Core Animation之多种动画效果

前面介绍了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:toPointcontrolPoint: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 = [ CABasicAnimationanimationWithKeyPath: @"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 statepacmanOpenPath = [UIBezierPath bezierPathWithArcCenter:arcCenterradius:radiusstartAngle:DEGREES_TO_RADIANS(35)endAngle:DEGREES_TO_RADIANS(315)clockwise:YES];[pacmanOpenPath addLineToPoint:arcCenter];[pacmanOpenPath closePath];// Create a UIBezierPath for Pacman's close statepacmanClosedPath = [UIBezierPath bezierPathWithArcCenter:arcCenterradius:radiusstartAngle:DEGREES_TO_RADIANS(1)endAngle:DEGREES_TO_RADIANS(359)clockwise:YES];[pacmanClosedPath addLineToPoint:arcCenter];[pacmanClosedPath closePath];// Create a CAShapeLayer for Pacman, fill with yellowshapeLayer = [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 valueschompAnimation.fromValue = (id)pacmanClosedPath.CGPath;chompAnimation.toValue = (id)pacmanOpenPath.CGPath;[shapeLayer addAnimation:chompAnimation forKey:@"chompAnimation"];// Create digital '2'-shaped pathUIBezierPath *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)

本文遵循“署名-非商业用途-保持一致”创作公用协议