iphone layer 动画

原文：

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

sample下载地址

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

共描述了4个动画

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

源码：

self.view.backgroundColor = [UIColor blackColor];// Orbit #1CALayer *orbit1 = [CALayer layer];orbit1.bounds = CGRectMake(0, 0, 200, 200);orbit1.position = self.view.center;orbit1.cornerRadius = 100;orbit1.borderColor = [UIColor redColor].CGColor;orbit1.borderWidth = 1.5;CALayer *planet1 = [CALayer layer];planet1.bounds = CGRectMake(0, 0, 20, 20);planet1.position = CGPointMake(100, 0);planet1.cornerRadius = 10;planet1.backgroundColor = [UIColor redColor].CGColor;[orbit1 addSublayer:planet1];CABasicAnimation *anim1 = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];anim1.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];anim1.fromValue = [NSNumber numberWithFloat:0];anim1.toValue = [NSNumber numberWithFloat:((360*M_PI)/180)];anim1.repeatCount = HUGE_VALF;anim1.duration = 8.0;[orbit1 addAnimation:anim1 forKey:@"transform"];[self.view.layer addSublayer:orbit1];// Orbit #2CALayer *orbit2 = [CALayer layer];orbit2.bounds = CGRectMake(0, 0, 120, 120);orbit2.position = planet1.position;orbit2.cornerRadius = 60;orbit2.borderColor = [UIColor blueColor].CGColor;orbit2.borderWidth = 1.5;CALayer *planet2 = [CALayer layer];planet2.bounds = CGRectMake(0, 0, 16, 16);planet2.position = CGPointMake(60, 0);planet2.cornerRadius = 8;planet2.backgroundColor = [UIColor blueColor].CGColor;[orbit2 addSublayer:planet2];CABasicAnimation *anim2 = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];anim2.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];anim2.fromValue = [NSNumber numberWithFloat:0];anim2.toValue = [NSNumber numberWithFloat:((360*M_PI)/180)];anim2.repeatCount = HUGE_VALF;anim2.duration = 4.0;[orbit2 addAnimation:anim2 forKey:@"transform"];[orbit1 addSublayer:orbit2];// Orbit #3CALayer *orbit3 = [CALayer layer];orbit3.bounds = CGRectMake(0, 0, 72, 72);orbit3.position = planet2.position;orbit3.cornerRadius = 36;orbit3.borderColor = [UIColor grayColor].CGColor;orbit3.borderWidth = 1.5;CALayer *planet3 = [CALayer layer];planet3.bounds = CGRectMake(0, 0, 12, 12);planet3.position = CGPointMake(36, 0);planet3.cornerRadius = 6;planet3.backgroundColor = [UIColor grayColor].CGColor;[orbit3 addSublayer:planet3];CABasicAnimation *anim3 = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];anim3.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];anim3.fromValue = [NSNumber numberWithFloat:0];anim3.toValue = [NSNumber numberWithFloat:((360*M_PI)/180)];anim3.repeatCount = HUGE_VALF;anim3.duration = 2.0;[orbit3 addAnimation:anim3 forKey:@"transform"];[orbit2 addSublayer:orbit3];

2。飘动的云

源码

UIImage *cloudImage = [UIImage imageNamed:@"cloud.png"];CALayer *cloud = [CALayer layer];cloud.contents = (id)cloudImage.CGImage;cloud.bounds = CGRectMake(0, 0, cloudImage.size.width, cloudImage.size.height);cloud.position = CGPointMake(self.view.bounds.size.width / 2, cloudImage.size.height / 2);[self.view.layer addSublayer:cloud];CGPoint startPt = CGPointMake(self.view.bounds.size.width + cloud.bounds.size.width / 2,  cloud.position.y);CGPoint endPt = CGPointMake(cloud.bounds.size.width / -2,cloud.position.y);CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"position"];anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];anim.fromValue = [NSValue valueWithCGPoint:startPt];anim.toValue = [NSValue valueWithCGPoint:endPt];anim.repeatCount = HUGE_VALF;anim.duration = 8.0;[cloud addAnimation:anim forKey:@"position"];

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

源码

- (void)loadView {[super loadView];self.view.backgroundColor = [UIColor whiteColor];UIScrollView *scrollView = [[[UIScrollView alloc] initWithFrame:self.view.bounds] autorelease];scrollView.bounces = YES;[self.view addSubview:scrollView];// Scale out on click{UILabel *label = [[[UILabel alloc] initWithFrame:CGRectMake(10, 10, 320, 24)] autorelease];label.text = @"Scale button";label.textAlignment = UITextAlignmentCenter;[label sizeToFit];[scrollView addSubview:label];UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];button.center = CGPointMake(220, 30);button.tag = ButtonActionsBehaviorTypeExpand;[button setTitle:@"Delete" forState:UIControlStateNormal];[button sizeToFit];[button addTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];[scrollView addSubview:button];}// Animated trash delete{UILabel *label = [[[UILabel alloc] initWithFrame:CGRectMake(10, 126, 320, 24)] autorelease];label.text = @"Animate image into trash button";label.textAlignment = UITextAlignmentCenter;[label sizeToFit];[scrollView addSubview:label];UIImageView *icon = [[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"carmodel.png"]] autorelease];icon.center = CGPointMake(290, 150);icon.tag = ButtonActionsBehaviorTypeAnimateTrash;[scrollView addSubview:icon];UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];button.center = CGPointMake(40, 200);button.tag = ButtonActionsBehaviorTypeAnimateTrash;[button setTitle:@"Delete Icon" forState:UIControlStateNormal];[button sizeToFit];[button addTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];[scrollView addSubview:button];[scrollView bringSubviewToFront:icon];}// Determine the size of all subviews of the scrollviewCGRect contentSize = CGRectZero;for (UIView *subview in scrollView.subviews) {contentSize = CGRectUnion(contentSize, subview.frame);}scrollView.contentSize = contentSize.size;}- (void)buttonClicked:(id)sender {UIView *senderView = (UIView*)sender;if (![senderView isKindOfClass:[UIView class]])return;switch (senderView.tag) {case ButtonActionsBehaviorTypeExpand: {CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform"];anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];anim.duration = 0.125;anim.repeatCount = 1;anim.autoreverses = YES;anim.removedOnCompletion = YES;anim.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(1.2, 1.2, 1.0)];[senderView.layer addAnimation:anim forKey:nil];break;}case ButtonActionsBehaviorTypeAnimateTrash: {UIView *icon = nil;for (UIView *theview in senderView.superview.subviews) {if (theview.tag != ButtonActionsBehaviorTypeAnimateTrash)continue;if ([theview isKindOfClass:[UIImageView class]]) {icon = theview;break;}}if (!icon)return;UIBezierPath *movePath = [UIBezierPath bezierPath];[movePath moveToPoint:icon.center];[movePath addQuadCurveToPoint:senderView.center controlPoint:CGPointMake(senderView.center.x, icon.center.y)];CAKeyframeAnimation *moveAnim = [CAKeyframeAnimation animationWithKeyPath:@"position"];moveAnim.path = movePath.CGPath;moveAnim.removedOnCompletion = YES;CABasicAnimation *scaleAnim = [CABasicAnimation animationWithKeyPath:@"transform"];scaleAnim.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];scaleAnim.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.1, 0.1, 1.0)];scaleAnim.removedOnCompletion = YES;CABasicAnimation *opacityAnim = [CABasicAnimation animationWithKeyPath:@"alpha"];opacityAnim.fromValue = [NSNumber numberWithFloat:1.0];opacityAnim.toValue = [NSNumber numberWithFloat:0.1];opacityAnim.removedOnCompletion = YES;CAAnimationGroup *animGroup = [CAAnimationGroup animation];animGroup.animations = [NSArray arrayWithObjects:moveAnim, scaleAnim, opacityAnim, nil];animGroup.duration = 0.5;[icon.layer addAnimation:animGroup forKey:nil];break;}}}

4。汽车沿着跑道跑

源码：

#define degreesToRadians(x) (M_PI * x / 180.0)#define P(x,y) CGPointMake(x, y)@implementation RaceTrackViewController- (void)loadView {[super loadView];self.view.backgroundColor = [UIColor greenColor];UIBezierPath *trackPath = [UIBezierPath bezierPath];[trackPath moveToPoint:P(160, 25)];[trackPath addCurveToPoint:P(300, 120) controlPoint1:P(320, 0) controlPoint2:P(300, 80)];[trackPath addCurveToPoint:P(80, 380) controlPoint1:P(300, 200) controlPoint2:P(200, 480)];[trackPath addCurveToPoint:P(140, 300) controlPoint1:P(0, 300) controlPoint2:P(200, 220)];[trackPath addCurveToPoint:P(210, 200) controlPoint1:P(30, 420) controlPoint2:P(280, 300)];[trackPath addCurveToPoint:P(70, 110) controlPoint1:P(110, 80) controlPoint2:P(110, 80)];[trackPath addCurveToPoint:P(160, 25) controlPoint1:P(0, 160) controlPoint2:P(0, 40)];CAShapeLayer *racetrack = [CAShapeLayer layer];racetrack.path = trackPath.CGPath;racetrack.strokeColor = [UIColor blackColor].CGColor;racetrack.fillColor = [UIColor clearColor].CGColor;racetrack.lineWidth = 30.0;[self.view.layer addSublayer:racetrack];CAShapeLayer *centerline = [CAShapeLayer layer];centerline.path = trackPath.CGPath;centerline.strokeColor = [UIColor whiteColor].CGColor;centerline.fillColor = [UIColor clearColor].CGColor;centerline.lineWidth = 2.0;centerline.lineDashPattern = [NSArray arrayWithObjects:[NSNumber numberWithInt:6], [NSNumber numberWithInt:2], nil];[self.view.layer addSublayer:centerline];CALayer *car = [CALayer layer];car.bounds = CGRectMake(0, 0, 44.0, 20.0);car.position = P(160, 25);car.contents = (id)([UIImage imageNamed:@"carmodel.png"].CGImage);[self.view.layer addSublayer:car];CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:@"position"];anim.path = trackPath.CGPath;anim.rotationMode = kCAAnimationRotateAuto;anim.repeatCount = HUGE_VALF;anim.duration = 8.0;[car addAnimation:anim forKey:@"race"];}