iphone layer 动画

原创 于 2013-09-22 14:24:09 发布 · 439 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

分类： iphone 2012-02-03 13:53  192人阅读  评论(0)  收藏  举报

原文：

http://nachbaur.com/blog/core-animation-part-1

sample下载地址

http://nachbaur.com/wp-content/uploads/2011/01/CALayerAnimTest.zip

共描述了4个动画

1）轨道环绕，比如月球绕地球


源码：

[html]  view plain copy
  1. self.view.backgroundColor = [UIColor blackColor];  
  2.   
  3. // Orbit #1  
  4. CALayer *orbit1 = [CALayer layer];  
  5. orbit1.bounds = CGRectMake(0, 0, 200, 200);  
  6. orbit1.position = self.view.center;  
  7. orbit1.cornerRadius = 100;  
  8. orbit1.borderColor = [UIColor redColor].CGColor;  
  9. orbit1.borderWidth = 1.5;  
  10.   
  11. CALayer *planet1 = [CALayer layer];  
  12. planet1.bounds = CGRectMake(0, 0, 20, 20);  
  13. planet1.position = CGPointMake(100, 0);  
  14. planet1.cornerRadius = 10;  
  15. planet1.backgroundColor = [UIColor redColor].CGColor;  
  16. [orbit1 addSublayer:planet1];  
  17.   
  18. CABasicAnimation *anim1 = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];  
  19. anim1.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];  
  20. anim1.fromValue = [NSNumber numberWithFloat:0];  
  21. anim1.toValue = [NSNumber numberWithFloat:((360*M_PI)/180)];  
  22. anim1.repeatCount = HUGE_VALF;  
  23. anim1.duration = 8.0;  
  24. [orbit1 addAnimation:anim1 forKey:@"transform"];  
  25.   
  26. [self.view.layer addSublayer:orbit1];  
  27.   
  28. // Orbit #2  
  29. CALayer *orbit2 = [CALayer layer];  
  30. orbit2.bounds = CGRectMake(0, 0, 120, 120);  
  31. orbit2.position = planet1.position;  
  32. orbit2.cornerRadius = 60;  
  33. orbit2.borderColor = [UIColor blueColor].CGColor;  
  34. orbit2.borderWidth = 1.5;  
  35.   
  36. CALayer *planet2 = [CALayer layer];  
  37. planet2.bounds = CGRectMake(0, 0, 16, 16);  
  38. planet2.position = CGPointMake(60, 0);  
  39. planet2.cornerRadius = 8;  
  40. planet2.backgroundColor = [UIColor blueColor].CGColor;  
  41. [orbit2 addSublayer:planet2];  
  42.   
  43. CABasicAnimation *anim2 = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];  
  44. anim2.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];  
  45. anim2.fromValue = [NSNumber numberWithFloat:0];  
  46. anim2.toValue = [NSNumber numberWithFloat:((360*M_PI)/180)];  
  47. anim2.repeatCount = HUGE_VALF;  
  48. anim2.duration = 4.0;  
  49. [orbit2 addAnimation:anim2 forKey:@"transform"];  
  50.   
  51. [orbit1 addSublayer:orbit2];  
  52.   
  53. // Orbit #3  
  54. CALayer *orbit3 = [CALayer layer];  
  55. orbit3.bounds = CGRectMake(0, 0, 72, 72);  
  56. orbit3.position = planet2.position;  
  57. orbit3.cornerRadius = 36;  
  58. orbit3.borderColor = [UIColor grayColor].CGColor;  
  59. orbit3.borderWidth = 1.5;  
  60.   
  61. CALayer *planet3 = [CALayer layer];  
  62. planet3.bounds = CGRectMake(0, 0, 12, 12);  
  63. planet3.position = CGPointMake(36, 0);  
  64. planet3.cornerRadius = 6;  
  65. planet3.backgroundColor = [UIColor grayColor].CGColor;  
  66. [orbit3 addSublayer:planet3];  
  67.   
  68. CABasicAnimation *anim3 = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];  
  69. anim3.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];  
  70. anim3.fromValue = [NSNumber numberWithFloat:0];  
  71. anim3.toValue = [NSNumber numberWithFloat:((360*M_PI)/180)];  
  72. anim3.repeatCount = HUGE_VALF;  
  73. anim3.duration = 2.0;  
  74. [orbit3 addAnimation:anim3 forKey:@"transform"];  
  75.   
  76. [orbit2 addSublayer:orbit3];  

2。飘动的云


源码

[html]  view plain copy
  1. UIImage *cloudImage = [UIImage imageNamed:@"cloud.png"];  
  2.   
  3. CALayer *cloud = [CALayer layer];  
  4. cloud.contents = (id)cloudImage.CGImage;  
  5. cloud.bounds = CGRectMake(0, 0, cloudImage.size.width, cloudImage.size.height);  
  6. cloud.position = CGPointMake(self.view.bounds.size.width / 2,  
  7.                              cloudImage.size.height / 2);  
  8. [self.view.layer addSublayer:cloud];  
  9.   
  10. CGPoint startPt = CGPointMake(self.view.bounds.size.width + cloud.bounds.size.width / 2,  
  11.                               cloud.position.y);  
  12. CGPoint endPt = CGPointMake(cloud.bounds.size.width / -2,  
  13.                             cloud.position.y);  
  14.   
  15. CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"position"];  
  16. anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];  
  17. anim.fromValue = [NSValue valueWithCGPoint:startPt];  
  18. anim.toValue = [NSValue valueWithCGPoint:endPt];  
  19. anim.repeatCount = HUGE_VALF;  
  20. anim.duration = 8.0;  
  21. [cloud addAnimation:anim forKey:@"position"];  

3。点击后放大又缩小的button， 以及点击后飘动的东西，比如删除时，将文件飘到垃圾箱


源码

[html]  view plain copy
  1. - (void)loadView {  
  2.     [super loadView];  
  3.     self.view.backgroundColor = [UIColor whiteColor];  
  4.       
  5.     UIScrollView *scrollView = [[[UIScrollView alloc] initWithFrame:self.view.bounds] autorelease];  
  6.     scrollView.bounces = YES;  
  7.     [self.view addSubview:scrollView];  
  8.       
  9.     // Scale out on click  
  10.     {  
  11.         UILabel *label = [[[UILabel alloc] initWithFrame:CGRectMake(10, 10, 320, 24)] autorelease];  
  12.         label.text = @"Scale button";  
  13.         label.textAlignment = UITextAlignmentCenter;  
  14.         [label sizeToFit];  
  15.         [scrollView addSubview:label];  
  16.           
  17.         UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];  
  18.         button.center = CGPointMake(220, 30);  
  19.         button.tag = ButtonActionsBehaviorTypeExpand;  
  20.         [button setTitle:@"Delete" forState:UIControlStateNormal];  
  21.         [button sizeToFit];  
  22.         [button addTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];  
  23.         [scrollView addSubview:button];  
  24.     }  
  25.       
  26.     // Animated trash delete  
  27.     {  
  28.         UILabel *label = [[[UILabel alloc] initWithFrame:CGRectMake(10, 126, 320, 24)] autorelease];  
  29.         label.text = @"Animate image into trash button";  
  30.         label.textAlignment = UITextAlignmentCenter;  
  31.         [label sizeToFit];  
  32.         [scrollView addSubview:label];  
  33.           
  34.         UIImageView *icon = [[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"carmodel.png"]] autorelease];  
  35.         icon.center = CGPointMake(290, 150);  
  36.         icon.tag = ButtonActionsBehaviorTypeAnimateTrash;  
  37.         [scrollView addSubview:icon];  
  38.           
  39.         UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];  
  40.         button.center = CGPointMake(40, 200);  
  41.         button.tag = ButtonActionsBehaviorTypeAnimateTrash;  
  42.         [button setTitle:@"Delete Icon" forState:UIControlStateNormal];  
  43.         [button sizeToFit];  
  44.         [button addTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];  
  45.         [scrollView addSubview:button];  
  46.         [scrollView bringSubviewToFront:icon];  
  47.     }  
  48.       
  49.     // Determine the size of all subviews of the scrollview  
  50.     CGRect contentSize = CGRectZero;  
  51.     for (UIView *subview in scrollView.subviews) {  
  52.         contentSize = CGRectUnion(contentSize, subview.frame);  
  53.     }  
  54.     scrollView.contentSize = contentSize.size;  
  55. }  
  56.   
  57. - (void)buttonClicked:(id)sender {  
  58.     UIView *senderView = (UIView*)sender;  
  59.     if (![senderView isKindOfClass:[UIView class]])  
  60.         return;  
  61.       
  62.     switch (senderView.tag) {  
  63.         case ButtonActionsBehaviorTypeExpand: {  
  64.             CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform"];  
  65.             anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];  
  66.             anim.duration = 0.125;  
  67.             anim.repeatCount = 1;  
  68.             anim.autoreverses = YES;  
  69.             anim.removedOnCompletion = YES;  
  70.             anim.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(1.2, 1.2, 1.0)];  
  71.             [senderView.layer addAnimation:anim forKey:nil];  
  72.   
  73.             break;  
  74.         }  
  75.   
  76.         case ButtonActionsBehaviorTypeAnimateTrash: {  
  77.             UIView *icon = nil;  
  78.             for (UIView *theview in senderView.superview.subviews) {  
  79.                 if (theview.tag != ButtonActionsBehaviorTypeAnimateTrash)  
  80.                     continue;  
  81.                 if ([theview isKindOfClass:[UIImageView class]]) {  
  82.                     icon = theview;  
  83.                     break;  
  84.                 }  
  85.             }  
  86.               
  87.             if (!icon)  
  88.                 return;  
  89.               
  90.             UIBezierPath *movePath = [UIBezierPath bezierPath];  
  91.             [movePath moveToPoint:icon.center];  
  92.             [movePath addQuadCurveToPoint:senderView.center  
  93.                              controlPoint:CGPointMake(senderView.center.x, icon.center.y)];  
  94.               
  95.             CAKeyframeAnimation *moveAnim = [CAKeyframeAnimation animationWithKeyPath:@"position"];  
  96.             moveAnim.path = movePath.CGPath;  
  97.             moveAnim.removedOnCompletion = YES;  
  98.               
  99.             CABasicAnimation *scaleAnim = [CABasicAnimation animationWithKeyPath:@"transform"];  
  100.             scaleAnim.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];  
  101.             scaleAnim.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.1, 0.1, 1.0)];  
  102.             scaleAnim.removedOnCompletion = YES;  
  103.               
  104.             CABasicAnimation *opacityAnim = [CABasicAnimation animationWithKeyPath:@"alpha"];  
  105.             opacityAnim.fromValue = [NSNumber numberWithFloat:1.0];  
  106.             opacityAnim.toValue = [NSNumber numberWithFloat:0.1];  
  107.             opacityAnim.removedOnCompletion = YES;  
  108.               
  109.             CAAnimationGroup *animGroup = [CAAnimationGroup animation];  
  110.             animGroup.animations = [NSArray arrayWithObjects:moveAnim, scaleAnim, opacityAnim, nil];  
  111.             animGroup.duration = 0.5;  
  112.             [icon.layer addAnimation:animGroup forKey:nil];  
  113.   
  114.             break;  
  115.         }  
  116.     }  
  117. }  

4。汽车沿着跑道跑


源码：

[html]  view plain copy
  1. #define degreesToRadians(x) (M_PI * x / 180.0)  
  2. #define P(x,y) CGPointMake(x, y)  
  3.   
  4. @implementation RaceTrackViewController  
  5.   
  6. - (void)loadView {  
  7.     [super loadView];  
  8.       
  9.     self.view.backgroundColor = [UIColor greenColor];     
  10.   
  11.     UIBezierPath *trackPath = [UIBezierPath bezierPath];  
  12.     [trackPath moveToPoint:P(160, 25)];  
  13.     [trackPath addCurveToPoint:P(300, 120)  
  14.                  controlPoint1:P(320, 0)  
  15.                  controlPoint2:P(300, 80)];  
  16.     [trackPath addCurveToPoint:P(80, 380)  
  17.                  controlPoint1:P(300, 200)  
  18.                  controlPoint2:P(200, 480)];  
  19.     [trackPath addCurveToPoint:P(140, 300)  
  20.                  controlPoint1:P(0, 300)  
  21.                  controlPoint2:P(200, 220)];  
  22.     [trackPath addCurveToPoint:P(210, 200)  
  23.                  controlPoint1:P(30, 420)  
  24.                  controlPoint2:P(280, 300)];  
  25.     [trackPath addCurveToPoint:P(70, 110)  
  26.                  controlPoint1:P(110, 80)  
  27.                  controlPoint2:P(110, 80)];  
  28.     [trackPath addCurveToPoint:P(160, 25)  
  29.                  controlPoint1:P(0, 160)  
  30.                  controlPoint2:P(0, 40)];  
  31.       
  32.     CAShapeLayer *racetrack = [CAShapeLayer layer];  
  33.     racetrack.path = trackPath.CGPath;  
  34.     racetrack.strokeColor = [UIColor blackColor].CGColor;  
  35.     racetrack.fillColor = [UIColor clearColor].CGColor;  
  36.     racetrack.lineWidth = 30.0;  
  37.     [self.view.layer addSublayer:racetrack];  
  38.   
  39.     CAShapeLayer *centerline = [CAShapeLayer layer];  
  40.     centerline.path = trackPath.CGPath;  
  41.     centerline.strokeColor = [UIColor whiteColor].CGColor;  
  42.     centerline.fillColor = [UIColor clearColor].CGColor;  
  43.     centerline.lineWidth = 2.0;  
  44.     centerline.lineDashPattern = [NSArray arrayWithObjects:[NSNumber numberWithInt:6], [NSNumber numberWithInt:2], nil];  
  45.     [self.view.layer addSublayer:centerline];  
  46.       
  47.     CALayer *car = [CALayer layer];  
  48.     car.bounds = CGRectMake(0, 0, 44.0, 20.0);  
  49.     car.position = P(160, 25);  
  50.     car.contents = (id)([UIImage imageNamed:@"carmodel.png"].CGImage);  
  51.     [self.view.layer addSublayer:car];  
  52.       
  53.     CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:@"position"];  
  54.     anim.path = trackPath.CGPath;  
  55.     anim.rotationMode = kCAAnimationRotateAuto;  
  56.     anim.repeatCount = HUGE_VALF;  
  57.     anim.duration = 8.0;  
  58.     [car addAnimation:anim forKey:@"race"];  
  59. }  
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值