0DAAA493-70D7-4859-AEA6-3A6DE5A052EB1.gif
看到一個有趣的選擇效果圖
用UIBezierPath和CAKeyframeAnimation實現這個效果。
CGAffineTransformMakeScale(CGFloat sx, CGFloat sy)
兩個參數，代表x和y方向縮放倍數。
_ball2.transform = CGAffineTransformIdentity;
在操作結束之后可對設置量進行還原
- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise
可以畫出一段弧線。
看下各個參數的意義：
center：圓心的坐標
radius：半徑
startAngle：起始的弧度
endAngle：圓弧結束的弧度
clockwise：YES為順時針，No為逆時針
start和end angle的參數
核心代碼
以左球為例。
// 動畫分為三個部分
// 1.旋轉到中球右邊
// 2.旋轉到中球左邊
// 3.回到原位
//-------第一個球的動畫
CGFloat width = _ballContainer.bounds.size.width;
//小圓半徑
CGFloat r = (_ball1.bounds.size.width)*ballScale/2.0f;
//大圓半徑
CGFloat R = (width/2 + r)/2.0;
//1
UIBezierPath *path1 = [UIBezierPath bezierPath];
[path1 moveToPoint:_ball1.center];
//畫大圓
[path1 addArcWithCenter:CGPointMake(R + r, width/2) radius:R startAngle:M_PI endAngle:M_PI*2 clockwise:NO];
//2
//畫小圓
UIBezierPath *path1_1 = [UIBezierPath bezierPath];
[path1_1 addArcWithCenter:CGPointMake(width/2, width/2) radius:r*2 startAngle:M_PI*2 endAngle:M_PI clockwise:NO];
[path1 appendPath:path1_1];
//3
//回到原處
[path1 addLineToPoint:_ball1.center];
完成旋轉動畫
源代碼
//
// XLBallLoading.h
// XLBallLoadingDemo
//
// Created by MengXianLiang on 2017/3/21.
// Copyright ? 2017年 MengXianLiang. All rights reserved.
//
#import <UIKit/UIKit.h>
@interface XLBallLoading : UIView
-(void)start;
-(void)stop;
+(void)showInView:(UIView*)view;
+(void)hideInView:(UIView*)view;
@end
//
// XLBallLoading.m
// XLBallLoadingDemo
//
// Created by MengXianLiang on 2017/3/21.
// Copyright ? 2017年 MengXianLiang. All rights reserved.
//
#import "XLBallLoading.h"
static CGFloat ballScale = 1.5f;
@interface XLBallLoading ()<CAAnimationDelegate>
{
UIVisualEffectView *_ballContainer;
UIView *_ball1;
UIView *_ball2;
UIView *_ball3;
BOOL _stopAnimationByUser;
}
@end
@implementation XLBallLoading
-(instancetype)initWithFrame:(CGRect)frame{
if (self = [super initWithFrame:frame]) {
[self initUI];
}
return self;
}
/**
初始化ui
*/
-(void)initUI{
_ballContainer = [[UIVisualEffectView alloc]initWithEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleLight]];
_ballContainer.frame = CGRectMake(0, 0, 100, 100);
_ballContainer.center = CGPointMake(self.bounds.size.width/2.0f, self.bounds.size.height/2.0f);
_ballContainer.layer.cornerRadius = 10.0f;
_ballContainer.layer.masksToBounds = true;
[self addSubview:_ballContainer];
CGFloat ballWidth = 13.0f;
//左球
_ball1 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, ballWidth, ballWidth)];
_ball1.center = CGPointMake(ballWidth/2.0f, _ballContainer.bounds.size.height/2.0f);
_ball1.layer.cornerRadius = ballWidth/2.0f;
_ball1.backgroundColor = [UIColor colorWithRed:54/255.0 green:136/255.0 blue:250/255.0 alpha:1];
[_ballContainer addSubview:_ball1];
//中球
_ball2 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, ballWidth, ballWidth)];
_ball2.center = CGPointMake(_ballContainer.bounds.size.width/2.0f, _ballContainer.bounds.size.height/2.0f);
_ball2.layer.cornerRadius = ballWidth/2.0f;
_ball2.backgroundColor = [UIColor colorWithRed:100/255.0 green:100/255.0 blue:100/255.0 alpha:1];
[_ballContainer addSubview:_ball2];
//右球
_ball3 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, ballWidth, ballWidth)];
_ball3.center = CGPointMake(_ballContainer.bounds.size.width - ballWidth/2.0f, _ballContainer.bounds.size.height/2.0f);
_ball3.layer.cornerRadius = ballWidth/2.0f;
_ball3.backgroundColor = [UIColor colorWithRed:234/255.0 green:67/255.0 blue:69/255.0 alpha:1];
_ball3.hidden = YES;
[_ballContainer addSubview:_ball3];
}
-(void)startPathAnimate{
// 動畫分為三個部分
// 1.旋轉到中球右邊
// 2.旋轉到中球左邊
// 3.回到原位
//-------第一個球的動畫
CGFloat width = _ballContainer.bounds.size.width;
//小圓半徑
CGFloat r = (_ball1.bounds.size.width)*ballScale/2.0f;
//大圓半徑
CGFloat R = (width/2 + r)/2.0;
//1
UIBezierPath *path1 = [UIBezierPath bezierPath];
[path1 moveToPoint:_ball1.center];
//畫大圓
[path1 addArcWithCenter:CGPointMake(R + r, width/2) radius:R startAngle:M_PI endAngle:M_PI*2 clockwise:NO];
//2
//畫小圓
UIBezierPath *path1_1 = [UIBezierPath bezierPath];
[path1_1 addArcWithCenter:CGPointMake(width/2, width/2) radius:r*2 startAngle:M_PI*2 endAngle:M_PI clockwise:NO];
[path1 appendPath:path1_1];
//3
//回到原處
[path1 addLineToPoint:_ball1.center];
//執行動畫
CAKeyframeAnimation *animation1 = [CAKeyframeAnimation animationWithKeyPath:@"position"];
animation1.path = path1.CGPath;
animation1.removedOnCompletion = YES;
animation1.duration = [self animationDuration];
animation1.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[_ball1.layer addAnimation:animation1 forKey:@"animation1"];
//-------第三個球的動畫
UIBezierPath *path3 = [UIBezierPath bezierPath];
[path3 moveToPoint:_ball3.center];
//畫大圓
[path3 addArcWithCenter:CGPointMake(width - (R + r), width/2) radius:R startAngle:2*M_PI endAngle:M_PI clockwise:NO];
//畫小圓
UIBezierPath *path3_1 = [UIBezierPath bezierPath];
[path3_1 addArcWithCenter:CGPointMake(width/2, width/2) radius:r*2 startAngle:M_PI endAngle:M_PI*2 clockwise:NO];
[path3 appendPath:path3_1];
//回到原處
[path3 addLineToPoint:_ball3.center];
//執行動畫
CAKeyframeAnimation *animation3 = [CAKeyframeAnimation animationWithKeyPath:@"position"];
animation3.path = path3.CGPath;
animation3.removedOnCompletion = YES;
animation3.duration = [self animationDuration];
animation3.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation3.delegate = self;
[_ball3.layer addAnimation:animation3 forKey:@"animation3"];
}
//放大縮小動畫
-(void)animationDidStart:(CAAnimation *)anim{
CGFloat delay = 0.3f;
CGFloat duration = [self animationDuration]/2 - delay;
[UIView animateWithDuration:duration delay:delay options:UIViewAnimationOptionCurveEaseOut| UIViewAnimationOptionBeginFromCurrentState animations:^{
//使ball變大
_ball1.transform = CGAffineTransformMakeScale(ballScale, ballScale);
_ball2.transform = CGAffineTransformMakeScale(ballScale, ballScale);
_ball3.transform = CGAffineTransformMakeScale(ballScale, ballScale);
} completion:^(BOOL finished) {
[UIView animateWithDuration:duration delay:delay options:UIViewAnimationOptionCurveEaseInOut| UIViewAnimationOptionBeginFromCurrentState animations:^{
//變回原形
_ball1.transform = CGAffineTransformIdentity;
_ball2.transform = CGAffineTransformIdentity;
_ball3.transform = CGAffineTransformIdentity;
} completion:nil];
}];
}
-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
if (_stopAnimationByUser) {return;}
[self startPathAnimate];
}
-(CGFloat)animationDuration{
return 1.6f;
}
#pragma mark -
#pragma mark 顯示隱藏方法
-(void)start{
[self startPathAnimate];
_stopAnimationByUser = false;
}
-(void)stop{
_stopAnimationByUser = true;
[_ball1.layer removeAllAnimations];
[_ball1 removeFromSuperview];
[_ball2.layer removeAllAnimations];
[_ball2 removeFromSuperview];
[_ball3.layer removeAllAnimations];
[_ball3 removeFromSuperview];
}
+(void)showInView:(UIView *)view{
[self hideInView:view];
XLBallLoading *loading = [[XLBallLoading alloc] initWithFrame:view.bounds];
[view addSubview:loading];
[loading start];
}
+(void)hideInView:(UIView *)view{
for (XLBallLoading *loading in view.subviews) {
if ([loading isKindOfClass:[XLBallLoading class]]) {
[loading stop];
[loading removeFromSuperview];
}
}
}
@end
