UIBezierPath 和CAKeyframeAnimation.position制作简易动画

1 制作简易三个球的旋转动画,效果如下:


UIBezierPath 和CAKeyframeAnimation.position制作简易动画_第1张图片

思路:三个UIView  + 一个Window + UIVisualEffectView,测试下下,好久没练习动画这块;

@interface TJTestLoadingHUD : UIVisualEffectView

+(void)showHUD;

+(void)dismissHUD;

@end

@implementation TJTestLoadingHUD{

UIView *ball_1;

UIView *ball_2;

UIView *ball_3;

}

+(TJTestLoadingHUD *)sharedHUD{

static dispatch_once_t onceToken;

static TJTestLoadingHUD *sharedHUD;

dispatch_once(&onceToken, ^{

sharedHUD = [[self alloc] initWithEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleDark]];

//UIBlurEffectStyleExtraLight UIBlurEffectStyleDark

});

return sharedHUD;

}

-(instancetype)initWithEffect:(UIVisualEffect *)effect{

if (self = [super initWithEffect:effect]) {

self.frame = [UIScreen mainScreen].bounds;

//创建三个圆球 并设置frame ball_2 位于中间

ball_2 = [[UIView alloc]initWithFrame:CGRectMake(WIDTH/2 - BALL_RADIUS/2, HEIGHT/2 -BALL_RADIUS /2, BALL_RADIUS, BALL_RADIUS)];

ball_2.backgroundColor = [UIColor whiteColor];

ball_2.layer.cornerRadius = ball_2.bounds.size.width/2.0;

ball_1 = [[UIView alloc] initWithFrame:CGRectMake(ball_2.frame.origin.x - BALL_RADIUS, ball_2.frame.origin.y, BALL_RADIUS, BALL_RADIUS)];

ball_1.backgroundColor = [UIColor whiteColor];

ball_1.layer.cornerRadius = ball_1.bounds.size.width/2;

ball_3 = [[UIView alloc]initWithFrame:CGRectMake(ball_2.frame.origin.x + BALL_RADIUS, ball_2.frame.origin.y, BALL_RADIUS, BALL_RADIUS)];

ball_3.backgroundColor = [UIColor whiteColor];

ball_3.layer.cornerRadius = ball_3.bounds.size.width / 2;

[self addSubview:ball_1];

[self addSubview:ball_2];

[self addSubview:ball_3];

}

return self;

}

+(void)showHUD{

//UIView动态改变alpha值

TJTestLoadingHUD *hud = [TJTestLoadingHUD sharedHUD];

UIWindow *window = [UIApplication sharedApplication].keyWindow;

if (window != nil) {

hud.alpha = 0.0;

[window addSubview:hud]; //不完全为1,可以看见下面的View

[UIView animateWithDuration:0.25 animations:^{

hud.alpha = 0.9;

}completion:^(BOOL finished) {

hud.alpha = 0.9;

[hud startLoadingAnimation];

}];

}

}

//转球动画

-(void)startLoadingAnimation{

//创建动画路径

UIBezierPath *circlePath_1 = [UIBezierPath bezierPath];

[circlePath_1 moveToPoint:CGPointMake(WIDTH/2 -BALL_RADIUS, HEIGHT/2)];

//球1 动画路径

[circlePath_1 addArcWithCenter:CGPointMake(WIDTH/2, HEIGHT/2) radius:BALL_RADIUS startAngle:(180 * M_PI)/180 endAngle:(360 *M_PI)/180 clockwise:NO];

UIBezierPath *circlePath_1_2 = [UIBezierPath bezierPath];

[circlePath_1_2 addArcWithCenter:CGPointMake(WIDTH/2, HEIGHT/2) radius:BALL_RADIUS startAngle:0 endAngle:(180*M_PI)/180 clockwise:NO];

[circlePath_1 appendPath:circlePath_1_2];

CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];

animation.path = circlePath_1.CGPath;

animation.removedOnCompletion = YES;

animation.duration = 1.4;

animation.repeatCount = INFINITY;

animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

[ball_1.layer addAnimation:animation forKey:@"animation"];

// ===2 球3 动画路径

UIBezierPath *circlePath_2 = [UIBezierPath bezierPath];

[circlePath_2 moveToPoint:CGPointMake(WIDTH/2 + BALL_RADIUS, HEIGHT/2)];

[circlePath_2 addArcWithCenter:CGPointMake(WIDTH/2, HEIGHT/2) radius:BALL_RADIUS startAngle:(0*M_PI)/180 endAngle:(180*M_PI)/180 clockwise:NO];

UIBezierPath *circlePath_2_2 = [UIBezierPath bezierPath];

[circlePath_2_2 addArcWithCenter:CGPointMake(WIDTH/2, HEIGHT/2) radius:BALL_RADIUS startAngle:(180 *M_PI)/180 endAngle:(360*M_PI)/180 clockwise:NO];

[circlePath_2 appendPath:circlePath_2_2];

CAKeyframeAnimation *animation_2 = [CAKeyframeAnimation animationWithKeyPath:@"position"];

animation_2.path = circlePath_2.CGPath;

animation_2.removedOnCompletion = YES;

animation_2.repeatCount = INFINITY;

animation_2.duration = 1.4 ;

animation_2.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

[ball_3.layer addAnimation:animation_2 forKey:@"Rotation"];

self.timer = [NSTimer scheduledTimerWithTimeInterval:0.7 target:self selector:@selector(scaleAnimation) userInfo:nil repeats:YES];

[[NSRunLoop mainRunLoop] addTimer:_timer forMode:NSRunLoopCommonModes];

}

//放大球 + 平移球

-(void)scaleAnimation{

[UIView animateWithDuration:0.3 delay:0.1 options:UIViewAnimationOptionCurveEaseOut | UIViewAnimationOptionBeginFromCurrentState animations:^{

ball_1.transform = CGAffineTransformMakeTranslation(-BALL_RADIUS, 0);

ball_1.transform = CGAffineTransformScale(ball_1.transform, 0.7, 0.7);

ball_3.transform = CGAffineTransformMakeTranslation(BALL_RADIUS, 0);

ball_3.transform = CGAffineTransformScale(ball_3.transform, 0.7, 0.7);

ball_2.transform = CGAffineTransformScale(ball_2.transform, 0.7, 0.7);

} completion:^(BOOL finished) {

[UIView animateWithDuration:0.3 delay:0.0 options:UIViewAnimationOptionCurveEaseIn | UIViewAnimationOptionBeginFromCurrentState animations:^{

ball_1.transform = CGAffineTransformIdentity;

ball_3.transform = CGAffineTransformIdentity;

ball_2.transform = CGAffineTransformIdentity;

} completion:NULL];

}];

}

//隐藏hud

+(void)dismissHUD{

TJTestLoadingHUD *hud = [TJTestLoadingHUD sharedHUD];

[hud stopLoadingAnimation];

[hud.timer invalidate];

[UIView animateWithDuration:0.3 animations:^{

hud.alpha = 0;

} completion:^(BOOL finished) {

[hud removeFromSuperview];

}];

}

//停止动画

-(void)stopLoadingAnimation {

[ball_1.layer removeAllAnimations];

[ball_2.layer removeAllAnimations];

[ball_3.layer removeAllAnimations];

}

另外,在拓展里面,声明了一个NSTimer 的时间;涌来执行球的放大和平移;关于UIVisualEffectView,这是iOS 8推出的一种制作遮罩的View;有兴趣可以 打开Xcode->window->Documentation And API reference 搜索 UIVisualEffectView,看看!

你可能感兴趣的:(UIBezierPath 和CAKeyframeAnimation.position制作简易动画)