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/

另外.....

個人願望是.......

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