iOS 动画整理

序列帧动画

曾经项目里的一段源码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14

UIImageView * activityImageView = [[UIImageView alloc] init]; NSMutableArray *imagesList = [NSMutableArray array]; for (NSInteger i = 1; i < 3; i++) { NSString *fileName = [NSString stringWithFormat:@"eggplant%i.png",i]; UIImage *image = [UIImage imageNamed:fileName]; [imagesList addObject:image]; } [activityImageView setAnimationImages:imagesList]; [activityImageView setAnimationDuration:0.5]; //0为无限循环 [activityImageView setAnimationRepeatCount:0]; [activityImageView startAnimating]; // [activityImageView stopAnimating];

UIView 动画

UIViewAnimation

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

//创建一个CGAffineTransform transform对象 CGAffineTransform transform; //设置旋转度数 transform = CGAffineTransformRotate(testView.transform,M_PI/6.0); //动画开始 [UIView beginAnimations:@"rotate" context:nil ]; //动画时常 [UIView setAnimationDuration:2]; //自动反转 // [UIView setAnimationRepeatAutoreverses:YES]; [UIView setAnimationRepeatCount:3]; //添加代理 [UIView setAnimationDelegate:self]; //获取transform的值 [testView setTransform:transform]; //关闭动画 [UIView commitAnimations];

UIViewAnimationWithBlocks

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

/* Duration 动画持续时间 delay 动画延迟时间 options 动画的节奏控制 */ [UIView animateWithDuration:5 delay:5 options:UIViewAnimationOptionCurveEaseInOut animations:^{ testView.frame = CGRectMake(100, 300, 100, 100); } completion:^(BOOL finished) { }]; /* Damping 动画的弹力指数 Velocity 弹力的初速度 */ [UIView animateWithDuration:0.5 delay:1 usingSpringWithDamping:0.8 initialSpringVelocity:10 options:0 animations:^{ testView.frame = CGRectMake(100, 300, 100, 100); } completion:^(BOOL finished) { }];

CoreAnimation

CATransition

继承关系：CATransition -> CAAnimation

1 2 3 4 5 6 7 8

CATransition *transition = [CATransition animation]; transition.duration = 0.5; transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; //动画类型 transition.type = kCATransitionPush; //动画方向 transition.subtype = kCATransitionFromTop; [testView.layer addAnimation:transition forKey:nil];

CAPropertyAnimation

继承关系：CABasicAnimation,CAKeyframeAnimation -> CAPropertyAnimation -> CAAnimation

CABasicAnimation

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

CABasicAnimation * animation = [CABasicAnimation animation]; animation.keyPath = @"position.y"; //运动的绝对距离 animation.fromValue = @77; animation.toValue = @455; //运动的相对距离 // animation.byValue = @222; animation.duration = 1; //留在最终状态 animation.fillMode = @"forwards"; //防止它被自动移除 animation.removedOnCompletion = NO; animation.timingFunction = [CAMediaTimingFunction functionWithControlPoints:0.5 :0 :0.9 :0.7]; [testView.layer addAnimation:animation forKey:@"basic"];

CAKeyframeAnimation 例一

1 2 3 4 5 6 7 8 9

CAKeyframeAnimation * animation = [CAKeyframeAnimation animation]; animation.keyPath = @"position.x"; animation.values = @[@0,@10,@-10,@10,@0]; //指定关键帧动画发生的时间 animation.keyTimes = @[ @0, @(1 / 6.0), @(3 / 6.0), @(5 / 6.0), @1 ]; animation.duration = 0.4; //提前无需设置位置 animation.additive = YES; [testView.layer addAnimation:animation forKey:@"shake"];

CAKeyframeAnimation 例二

1 2 3 4 5 6 7 8 9 10 11 12 13 14

CGRect boundingRect = CGRectMake(-150, -150,300, 300); CAKeyframeAnimation *orbit = [CAKeyframeAnimation animation]; orbit.keyPath = @"position"; //创建一个圆形的 CGPath 作为我们的关键帧动画的 path。 orbit.path = CFAutorelease(CGPathCreateWithEllipseInRect(boundingRect, NULL)); orbit.duration = 2; orbit.additive = YES; orbit.repeatCount = HUGE_VALF; //恒定速度 orbit.calculationMode = kCAAnimationPaced; //确保沿着路径旋转 orbit.rotationMode = kCAAnimationRotateAuto; [testView.layer addAnimation:orbit forKey:@"orbit"];

CAAnimationGroup 组动画

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"]; animation.duration = 3.; animation.fromValue = @(0.1); animation.toValue = @(1.); CABasicAnimation *animation2 = [CABasicAnimation animationWithKeyPath:@"transform.scale.y"]; animation2.duration = 3.; animation2.fromValue = @(1); animation2.toValue = @(2.); animation2.beginTime = 3.; CAAnimationGroup *group = [CAAnimationGroup animation]; group.duration = 6.; group.animations = @[animation,animation2]; [testView.layer addAnimation:group forKey:nil];

Facebook pop 动画

POPBasicAnimation 基本动画

1 2 3 4

POPBasicAnimation *anim = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerScaleXY]; anim.toValue = [NSValue valueWithCGPoint:CGPointMake(2.0, 2.0)]; anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]; [testView.layer pop_addAnimation:anim forKey:@"Animation"];

POPSpringAnimation 弹性动画

1 2 3 4 5 6 7 8 9 10 11 12

POPSpringAnimation *anim = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPosition]; anim.fromValue = [NSValue valueWithCGPoint:CGPointMake(60, 350)]; anim.toValue = [NSValue valueWithCGPoint:CGPointMake(60, 150)]; anim.springBounciness = 10; anim.springSpeed = 10; //摩擦力 anim.dynamicsFriction = 0.5; //张力 anim.dynamicsTension = 250; //质量 anim.dynamicsMass = 0.7; [testView.layer pop_addAnimation:anim forKey:@"Animation"];

POPDecayAnimation 减速动画

1 2 3 4 5 6 7 8 9 10 11

POPDecayAnimation *anim = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPositionX]; //初始速度 anim.velocity = @(200); //只有fromValue 没有toValue anim.fromValue = @(100.0); //负加速度 anim.deceleration = .998; [anim setCompletionBlock:^(POPAnimation *anim, BOOL finished) { NSLog(@"执行完毕"); }]; [testView.layer pop_addAnimation:anim forKey:@"Animation"];

UIViewController动画

有时间详细整理下：

http://onevcat.com/2013/10/vc-transition-in-ios7/

http://objccn.io/issue-12-3/

参考文章：

http://objccn.io/issue-12-1/

另外.....

我的愿望是.......

世界和平.........