Core Animation之多种动画效果
jopen
11年前
前面介绍了Core Animation基础知识，还有CALayer的简单使用，最终还是有要动画的滴，这里列出几个动画效果，参考下能加深对Core Animation的认识和理解
1、把图片移到右下角变小透明
使用CAAnimationGroup叠加动画效果，就是下面按钮《把图片移到右下角变小透明》描述的效果：
、
上面三个图是动画的三个状态，实现代码如下：
- (void)viewDidLoad { [super viewDidLoad]; self.imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"snaguosha.png"]]; self.imageView.frame = CGRectMake(10, 10, 128, 192); [self.view addSubview:self.imageView]; }
- (IBAction)tranAction:(id)sender { CGPoint fromPoint = self.imageView.center; //路径曲线 UIBezierPath *movePath = [UIBezierPath bezierPath]; [movePath moveToPoint:fromPoint]; CGPoint toPoint = CGPointMake(300, 460); [movePath addQuadCurveToPoint:toPoint controlPoint:CGPointMake(300,0)]; //关键帧 CAKeyframeAnimation *moveAnim = [CAKeyframeAnimation animationWithKeyPath:@"position"]; moveAnim.path = movePath.CGPath; moveAnim.removedOnCompletion = YES; //旋转变化 CABasicAnimation *scaleAnim = [CABasicAnimation animationWithKeyPath:@"transform"]; scaleAnim.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity]; //x，y轴缩小到0.1,Z 轴不变 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 = 1; [self.imageView.layer addAnimation:animGroup forKey:nil]; }代码解析：上面关键帧设置了动画的路径，scaleAnim设置了缩小，opacityAnim设置了透明度的变化。把三个动画组合到：animGroup。
在把animGroup添加到imageView.layer层的动画里。于是动画效果就有了。
2、旋转并向右移动
- (IBAction)RightRotateAction:(id)sender { CGPoint fromPoint = self.imageView.center; UIBezierPath *movePath = [UIBezierPath bezierPath]; [movePath moveToPoint:fromPoint]; CGPoint toPoint = CGPointMake(fromPoint.x +100 , fromPoint.y ) ; [movePath addLineToPoint:toPoint]; CAKeyframeAnimation *moveAnim = [CAKeyframeAnimation animationWithKeyPath:@"position"]; moveAnim.path = movePath.CGPath; CABasicAnimation *TransformAnim = [CABasicAnimation animationWithKeyPath:@"transform"]; TransformAnim.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity]; //沿Z轴旋转 TransformAnim.toValue = [NSValue valueWithCATransform3D: CATransform3DMakeRotation(M_PI,0,0,1)]; //沿Y轴旋转 // scaleAnim.toValue = [NSValue valueWithCATransform3D: CATransform3DMakeRotation(M_PI,0,1.0,0)]; //沿X轴旋转 // TransformAnim.toValue = [NSValue valueWithCATransform3D: CATransform3DMakeRotation(M_PI,1.0,0,0)]; TransformAnim.cumulative = YES; TransformAnim.duration =3; //旋转2遍，360度 TransformAnim.repeatCount =2; self.imageView.center = toPoint; TransformAnim.removedOnCompletion = YES; CAAnimationGroup *animGroup = [CAAnimationGroup animation]; animGroup.animations = [NSArray arrayWithObjects:moveAnim, TransformAnim, nil]; animGroup.duration = 6; [self.imageView.layer addAnimation:animGroup forKey:nil]; }代码解析:可能你没注意到， CATransform3DMakeRotation，这返回的是旋转的值。上面的动画效果里返回的是 CATransform3DMakeScale缩放的值。 向右移动是因为关键帧使用了路径为直线的路径。
3、旋转并消除边缘锯齿
- (IBAction)Rotate360Action:(id)sender { //图片旋转360度 CABasicAnimation *animation = [ CABasicAnimation animationWithKeyPath: @"transform" ]; animation.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity]; //围绕Z轴旋转，垂直与屏幕 animation.toValue = [ NSValue valueWithCATransform3D: CATransform3DMakeRotation(M_PI, 0, 0, 1.0) ]; animation.duration = 3; //旋转效果累计，先转180度，接着再旋转180度，从而实现360旋转 animation.cumulative = YES; animation.repeatCount = 2; //在图片边缘添加一个像素的透明区域，去图片锯齿 CGRect imageRrect = CGRectMake(0, 0, self.imageView.frame.size.width, self.imageView.frame.size.height); UIGraphicsBeginImageContext(imageRrect.size); [self.imageView.image drawInRect:CGRectMake(1,1,self.imageView.frame.size.width-2,self.imageView.frame.size.height-2)]; self.imageView.image = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); [self.imageView.layer addAnimation:animation forKey:nil]; }如果你仔细观察，会看到第二个动画里在旋转时，图片边缘是有锯齿的，如何消除呢？ 在图片边缘添加一个像素的透明区域，去图片锯齿。 UIGraphicsBeginImageContext 开始图片内容
UIGraphicsGetImageFromCurrentImageContext 获取当前内容作为图片，
UIGraphicsEndImageContext结束。是和UIGraphicsBeginImageContext配套使用的。
4、吃豆人动画
这个有点复杂，首先说下实现的步骤：
- 画一个吃豆人开口的路径：pacmanOpenPath
- 画一个吃豆人闭口的路径：pacmanClosedPath
- 新建一个闭口的吃豆人头的层：shapeLayer
- 把开口和闭口路径设置成CABasicAnimation *chompAnimation动画的起点和终点，这样循环就能出现咬牙的动画了。
- 最后设置一个路径为关键帧，让吃豆人在这条路径上行动。
代码如下：
- (void)animationInit { self.view.backgroundColor = [UIColor blackColor]; CGFloat radius = 30.0f; CGFloat diameter = radius * 2; CGPoint arcCenter = CGPointMake(radius, radius); // Create a UIBezierPath for Pacman's open state pacmanOpenPath = [UIBezierPath bezierPathWithArcCenter:arcCenter radius:radius startAngle:DEGREES_TO_RADIANS(35) endAngle:DEGREES_TO_RADIANS(315) clockwise:YES]; [pacmanOpenPath addLineToPoint:arcCenter]; [pacmanOpenPath closePath]; // Create a UIBezierPath for Pacman's close state pacmanClosedPath = [UIBezierPath bezierPathWithArcCenter:arcCenter radius:radius startAngle:DEGREES_TO_RADIANS(1) endAngle:DEGREES_TO_RADIANS(359) clockwise:YES]; [pacmanClosedPath addLineToPoint:arcCenter]; [pacmanClosedPath closePath]; // Create a CAShapeLayer for Pacman, fill with yellow shapeLayer = [CAShapeLayer layer]; shapeLayer.fillColor = [UIColor yellowColor].CGColor; shapeLayer.path = pacmanClosedPath.CGPath; shapeLayer.strokeColor = [UIColor grayColor].CGColor; shapeLayer.lineWidth = 1.0f; shapeLayer.bounds = CGRectMake(0, 0, diameter, diameter); shapeLayer.position = CGPointMake(-40, -100); [self.view.layer addSublayer:shapeLayer]; SEL startSelector = @selector(startAnimation); UIGestureRecognizer *recognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:startSelector]; [self.view addGestureRecognizer:recognizer]; }- (void)startAnimation { // 创建咬牙动画 CABasicAnimation *chompAnimation = [CABasicAnimation animationWithKeyPath:@"path"]; chompAnimation.duration = 0.25; chompAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]; chompAnimation.repeatCount = HUGE_VALF; chompAnimation.autoreverses = YES; // Animate between the two path values chompAnimation.fromValue = (id)pacmanClosedPath.CGPath; chompAnimation.toValue = (id)pacmanOpenPath.CGPath; [shapeLayer addAnimation:chompAnimation forKey:@"chompAnimation"]; // Create digital '2'-shaped path UIBezierPath *path = [UIBezierPath bezierPath]; [path moveToPoint:CGPointMake(0, 100)]; [path addLineToPoint:CGPointMake(300, 100)]; [path addLineToPoint:CGPointMake(300, 200)]; [path addLineToPoint:CGPointMake(0, 200)]; [path addLineToPoint:CGPointMake(0, 300)]; [path addLineToPoint:CGPointMake(300, 300)]; CAKeyframeAnimation *moveAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"]; moveAnimation.path = path.CGPath; moveAnimation.duration = 8.0f; // Setting the rotation mode ensures Pacman's mouth is always forward. This is a very convenient CA feature. moveAnimation.rotationMode = kCAAnimationRotateAuto; [shapeLayer addAnimation:moveAnimation forKey:@"moveAnimation"]; }
- (void)viewDidLoad { [super viewDidLoad]; [self animationInit]; } 还需要添加一个宏：
#define DEGREES_TO_RADIANS(x) (3.14159265358979323846 * x / 180.0) 计算角度转换
添加了个手势，点一下屏幕，吃豆人就动起来了。效果：
本篇例子代码：代码
容芳志 (http://blog.csdn.net/totogo2010)
本文遵循“署名-非商业用途-保持一致”创作公用协议