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 #1
	CALayer *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 #2
	CALayer *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 #3
	CALayer *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 scrollview
	CGRect 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"];
}