Core Animation之多种动画效果

前面介绍了Core Animation基础知识，还有CALayer的简单使用，最终还是有要动画的滴，这里列出几个动画效果，参考下能加深对Core Animation的认识和理解

1、把图片移到右下角变小透明

使用CAAnimationGroup叠加动画效果，就是下面按钮《把图片移到右下角变小透明》描述的效果：

     、

上面三个图是动画的三个状态，实现代码如下：

 

[cpp] view plaincopy
  1. - (void)viewDidLoad  
  2. {  
  3.     [super viewDidLoad];  
  4.     self.imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"snaguosha.png"]];  
  5.     self.imageView.frame = CGRectMake(10, 10, 128, 192);  
  6.     [self.view addSubview:self.imageView];  
  7.  }  

 

 

 

[cpp] view plaincopy
  1. - (IBAction)tranAction:(id)sender {  
  2.     CGPoint fromPoint = self.imageView.center;  
  3.       
  4.     //路径曲线  
  5.     UIBezierPath *movePath = [UIBezierPath bezierPath];  
  6.     [movePath moveToPoint:fromPoint];  
  7.     CGPoint toPoint = CGPointMake(300, 460);  
  8.     [movePath addQuadCurveToPoint:toPoint  
  9.                      controlPoint:CGPointMake(300,0)];  
  10.     //关键帧  
  11.     CAKeyframeAnimation *moveAnim = [CAKeyframeAnimation animationWithKeyPath:@"position"];  
  12.     moveAnim.path = movePath.CGPath;  
  13.     moveAnim.removedOnCompletion = YES;  
  14.       
  15.     //旋转变化  
  16.     CABasicAnimation *scaleAnim = [CABasicAnimation animationWithKeyPath:@"transform"];  
  17.     scaleAnim.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];  
  18.     //x，y轴缩小到0.1,Z 轴不变  
  19.     scaleAnim.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.1, 0.1, 1.0)];  
  20.     scaleAnim.removedOnCompletion = YES;  
  21.       
  22.     //透明度变化  
  23.     CABasicAnimation *opacityAnim = [CABasicAnimation animationWithKeyPath:@"alpha"];  
  24.     opacityAnim.fromValue = [NSNumber numberWithFloat:1.0];  
  25.     opacityAnim.toValue = [NSNumber numberWithFloat:0.1];  
  26.     opacityAnim.removedOnCompletion = YES;  
  27.       
  28.     //关键帧，旋转，透明度组合起来执行  
  29.     CAAnimationGroup *animGroup = [CAAnimationGroup animation];  
  30.     animGroup.animations = [NSArray arrayWithObjects:moveAnim, scaleAnim,opacityAnim, nil];  
  31.     animGroup.duration = 1;  
  32.     [self.imageView.layer addAnimation:animGroup forKey:nil];  
  33. }  



 

代码解析：上面关键帧设置了动画的路径，scaleAnim设置了缩小，opacityAnim设置了透明度的变化。把三个动画组合到：animGroup。

在把animGroup添加到imageView.layer层的动画里。于是动画效果就有了。

2、旋转并向右移动

 

[cpp] view plaincopy
  1. - (IBAction)RightRotateAction:(id)sender {  
  2.     CGPoint fromPoint = self.imageView.center;  
  3.     UIBezierPath *movePath = [UIBezierPath bezierPath];  
  4.     [movePath moveToPoint:fromPoint];  
  5.     CGPoint toPoint = CGPointMake(fromPoint.x +100 , fromPoint.y ) ;  
  6.     [movePath addLineToPoint:toPoint];  
  7.       
  8.     CAKeyframeAnimation *moveAnim = [CAKeyframeAnimation animationWithKeyPath:@"position"];  
  9.     moveAnim.path = movePath.CGPath;  
  10.       
  11.     CABasicAnimation *TransformAnim = [CABasicAnimation animationWithKeyPath:@"transform"];  
  12.     TransformAnim.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];  
  13.       
  14.     //沿Z轴旋转  
  15.     TransformAnim.toValue = [NSValue valueWithCATransform3D: CATransform3DMakeRotation(M_PI,0,0,1)];  
  16.       
  17.     //沿Y轴旋转  
  18.   //   scaleAnim.toValue = [NSValue valueWithCATransform3D: CATransform3DMakeRotation(M_PI,0,1.0,0)];  
  19.       
  20.     //沿X轴旋转  
  21. //     TransformAnim.toValue = [NSValue valueWithCATransform3D: CATransform3DMakeRotation(M_PI,1.0,0,0)];  
  22.     TransformAnim.cumulative = YES;  
  23.     TransformAnim.duration =3;  
  24.     //旋转2遍，360度  
  25.     TransformAnim.repeatCount =2;  
  26.     self.imageView.center = toPoint;  
  27.     TransformAnim.removedOnCompletion = YES;  
  28.     CAAnimationGroup *animGroup = [CAAnimationGroup animation];  
  29.     animGroup.animations = [NSArray arrayWithObjects:moveAnim, TransformAnim, nil];  
  30.     animGroup.duration = 6;  
  31.       
  32.     [self.imageView.layer addAnimation:animGroup forKey:nil];  
  33. }  

代码解析:可能你没注意到，CATransform3DMakeRotation，这返回的是旋转的值。上面的动画效果里返回的是CATransform3DMakeScale缩放的值。
向右移动是因为关键帧使用了路径为直线的路径。

 

3、旋转并消除边缘锯齿

[cpp] view plaincopy
  1. - (IBAction)Rotate360Action:(id)sender {  
  2.     //图片旋转360度  
  3.     CABasicAnimation *animation = [ CABasicAnimation  
  4.                                    animationWithKeyPath: @"transform" ];  
  5.     animation.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];  
  6.       
  7.     //围绕Z轴旋转，垂直与屏幕  
  8.     animation.toValue = [ NSValue valueWithCATransform3D:  
  9.                          CATransform3DMakeRotation(M_PI, 0, 0, 1.0) ];  
  10.     animation.duration = 3;  
  11.     //旋转效果累计，先转180度，接着再旋转180度，从而实现360旋转  
  12.     animation.cumulative = YES;  
  13.     animation.repeatCount = 2;  
  14.       
  15.     //在图片边缘添加一个像素的透明区域，去图片锯齿  
  16.     CGRect imageRrect = CGRectMake(0, 0, self.imageView.frame.size.width, self.imageView.frame.size.height);  
  17.     UIGraphicsBeginImageContext(imageRrect.size);  
  18.     [self.imageView.image drawInRect:CGRectMake(1,1,self.imageView.frame.size.width-2,self.imageView.frame.size.height-2)];  
  19.     self.imageView.image = UIGraphicsGetImageFromCurrentImageContext();  
  20.     UIGraphicsEndImageContext();  
  21.       
  22.     [self.imageView.layer addAnimation:animation forKey:nil];  
  23. }  
如果你仔细观察，会看到第二个动画里在旋转时，图片边缘是有锯齿的，如何消除呢？在图片边缘添加一个像素的透明区域，去图片锯齿。

UIGraphicsBeginImageContext 开始图片内容

 

UIGraphicsGetImageFromCurrentImageContext 获取当前内容作为图片，

 

UIGraphicsEndImageContext结束。是和UIGraphicsBeginImageContext配套使用的。

4、吃豆人动画

这个有点复杂，首先说下实现的步骤：
  1. 画一个吃豆人开口的路径：pacmanOpenPath
  2. 画一个吃豆人闭口的路径：pacmanClosedPath
  3. 新建一个闭口的吃豆人头的层：shapeLayer
  4. 把开口和闭口路径设置成CABasicAnimation *chompAnimation动画的起点和终点，这样循环就能出现咬牙的动画了。
  5. 最后设置一个路径为关键帧，让吃豆人在这条路径上行动。
代码如下：
[cpp] view plaincopy
  1. - (void)animationInit  
  2. {  
  3.     self.view.backgroundColor = [UIColor blackColor];  
  4.       
  5.     CGFloat radius = 30.0f;  
  6.     CGFloat diameter = radius * 2;  
  7.     CGPoint arcCenter = CGPointMake(radius, radius);  
  8.     // Create a UIBezierPath for Pacman's open state  
  9.     pacmanOpenPath = [UIBezierPath bezierPathWithArcCenter:arcCenter  
  10.                                                     radius:radius  
  11.                                                 startAngle:DEGREES_TO_RADIANS(35)  
  12.                                                   endAngle:DEGREES_TO_RADIANS(315)  
  13.                                                  clockwise:YES];  
  14.       
  15.     [pacmanOpenPath addLineToPoint:arcCenter];  
  16.     [pacmanOpenPath closePath];  
  17.       
  18.     // Create a UIBezierPath for Pacman's close state  
  19.     pacmanClosedPath = [UIBezierPath bezierPathWithArcCenter:arcCenter  
  20.                                                       radius:radius  
  21.                                                   startAngle:DEGREES_TO_RADIANS(1)  
  22.                                                     endAngle:DEGREES_TO_RADIANS(359)  
  23.                                                    clockwise:YES];  
  24.     [pacmanClosedPath addLineToPoint:arcCenter];  
  25.     [pacmanClosedPath closePath];  
  26.       
  27.     // Create a CAShapeLayer for Pacman, fill with yellow  
  28.     shapeLayer = [CAShapeLayer layer];  
  29.     shapeLayer.fillColor = [UIColor yellowColor].CGColor;  
  30.     shapeLayer.path = pacmanClosedPath.CGPath;  
  31.     shapeLayer.strokeColor = [UIColor grayColor].CGColor;  
  32.     shapeLayer.lineWidth = 1.0f;  
  33.     shapeLayer.bounds = CGRectMake(0, 0, diameter, diameter);  
  34.     shapeLayer.position = CGPointMake(-40, -100);  
  35.     [self.view.layer addSublayer:shapeLayer];  
  36.       
  37.     SEL startSelector = @selector(startAnimation);  
  38.     UIGestureRecognizer *recognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:startSelector];  
  39.     [self.view addGestureRecognizer:recognizer];  
  40. }  
[cpp] view plaincopy
  1. - (void)startAnimation {  
  2.     // 创建咬牙动画  
  3.     CABasicAnimation *chompAnimation = [CABasicAnimation animationWithKeyPath:@"path"];  
  4.     chompAnimation.duration = 0.25;  
  5.     chompAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];  
  6.     chompAnimation.repeatCount = HUGE_VALF;  
  7.     chompAnimation.autoreverses = YES;  
  8.     // Animate between the two path values  
  9.     chompAnimation.fromValue = (id)pacmanClosedPath.CGPath;  
  10.     chompAnimation.toValue = (id)pacmanOpenPath.CGPath;  
  11.     [shapeLayer addAnimation:chompAnimation forKey:@"chompAnimation"];  
  12.       
  13.     // Create digital '2'-shaped path  
  14.       
  15.     UIBezierPath *path = [UIBezierPath bezierPath];  
  16.     [path moveToPoint:CGPointMake(0, 100)];  
  17.     [path addLineToPoint:CGPointMake(300, 100)];  
  18.     [path addLineToPoint:CGPointMake(300, 200)];  
  19.     [path addLineToPoint:CGPointMake(0, 200)];  
  20.     [path addLineToPoint:CGPointMake(0, 300)];  
  21.     [path addLineToPoint:CGPointMake(300, 300)];  
  22.       
  23.     CAKeyframeAnimation *moveAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];  
  24.     moveAnimation.path = path.CGPath;  
  25.     moveAnimation.duration = 8.0f;  
  26.     // Setting the rotation mode ensures Pacman's mouth is always forward.  This is a very convenient CA feature.  
  27.     moveAnimation.rotationMode = kCAAnimationRotateAuto;  
  28.     [shapeLayer addAnimation:moveAnimation forKey:@"moveAnimation"];  
  29. }  

 

[cpp] view plaincopy
  1. - (void)viewDidLoad  
  2. {  
  3.     [super viewDidLoad];  
  4.     [self animationInit];  
  5. }  

 

还需要添加一个宏：

#define DEGREES_TO_RADIANS(x) (3.14159265358979323846 * x / 180.0)    计算角度转换

添加了个手势，点一下屏幕，吃豆人就动起来了。效果：

本篇例子代码：代码

 

posted on 2014-10-31 11:03  寒竹子的技术博客  阅读(226)  评论(0)  编辑  收藏  举报
Copyright © 2024 寒竹子的技术博客
Powered by .NET 9.0 on Kubernetes Powered By: 博客园