码迷，mamicode.com
首页 > 其他好文 > 详细

Core Animation之多种动画效果

时间：2014-10-31 11:48:07      阅读：193      评论：0      收藏：0      [点我收藏+]

标签：blog   http   io   color   os   ar   使用   for   sp   

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

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

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

bubuko.com,布布扣   bubuko.com,布布扣  bubuko.com,布布扣、

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

 

[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)    计算角度转换

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

bubuko.com,布布扣

本篇例子代码：代码

 

Core Animation之多种动画效果

标签：blog   http   io   color   os   ar   使用   for   sp   

原文地址：http://www.cnblogs.com/hanzhuzi/p/4064544.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！