CABasicAnimation,CAKeyframeAnimation,CATransition,CAAnimationGroup,UIBezierPath之间做动画的不同点和各自的使用范围。

CABasicAnimation：

定义：通过设定起始点，终点，时间，动画会沿着你这设定点进行移动。可以看做特殊的CAKeyFrameAnimation，它是与CAKeyFrameAnimation结合使用才能看到他的强大效果。

CABasicAnimation类的使用方式就是基本的关键帧动画。

所谓关键帧动画，就是将Layer的属性作为KeyPath来注册，指定动画的起始帧和结束帧，然后自动计算和实现中间的过渡动画的一种动画方式。

CABasicAnimation设定动画的几个属性：

属性

说明

duration

动画时长（秒为单位）（注：此处与原文有出入）

repeatCount

重复次数。永久重复的话设置为HUGE_VALF。

beginTime

指定动画开始时间。从开始指定延迟几秒执行的话，请设置为
「CACurrentMediaTime() + 秒数」的形式。

timingFunction

设定动画的速度变化

autoreverses

动画结束时是否执行逆动画

设定动画开始和结束帧时的状态：

属性

说明

fromValue

开始值

toValue

终了值（絶対値）

byValue

终了值（相对值）

动画样式：

移动动画：根据我们给定坐标点进行运动。@"position"

1. /* 移动 */

2. CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];  

3.

4. // 动画选项的设定

5. animation.duration = 2.5; // 持续时间

6. animation.repeatCount = 1; // 重复次数

7.

8. // 起始帧和终了帧的设定

9. animation.fromValue = [NSValue valueWithCGPoint:myView.layer.position]; // 起始帧

10.animation.toValue = [NSValue valueWithCGPoint:CGPointMake(320, 480)]; // 终了帧

11.

12.// 添加动画

13.[myView.layer addAnimation:animation forKey:@"move-layer"];

旋转动画：根据我们给定的角度沿着设定的点旋转，@"transform.rotation.y"这是设定沿着y轴旋转。

1. /* 旋转 */

2.

3. // 对Y轴进行旋转（指定Z轴的话，就和UIView的动画一样绕中心旋转）

4. CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];  

5.

6. // 设定动画选项

7. animation.duration = 2.5; // 持续时间

8. animation.repeatCount = 1; // 重复次数

9.

10.// 设定旋转角度

11.animation.fromValue = [NSNumber numberWithFloat:0.0]; // 起始角度

12.animation.toValue = [NSNumber numberWithFloat:22 * M_PI]; // 终止角度  

13.

14.// 添加动画

15. [myView.layer addAnimation:animation forKey:@"rotate-layer"];

缩放动画：根据我们给定的缩放比例进行缩放，@"transform.scale"这是缩放格式

1. // 设定为缩放

2. CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];  

3.

4. // 动画选项设定

5. animation.duration = 2.5; // 动画持续时间

6. animation.repeatCount = 1; // 重复次数

7. animation.autoreverses = YES; // 动画结束时执行逆动画  

8.

9. // 缩放倍数

10.animation.fromValue = [NSNumber numberWithFloat:1.0]; // 开始时的倍率

11.animation.toValue = [NSNumber numberWithFloat:2.0]; // 结束时的倍率

12.

13.// 添加动画

14. [myView.layer addAnimation:animation forKey:@"scale-layer"];

CAKeyframeAnimation：

之所以叫做关键帧动画是因为，这个类可以实现，某一属性按照一串的数值进行动画，就好像制作动画的时候一帧一帧的制作一样。跟CABasicAnimation的区别是：CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue)，而CAKeyframeAnimation会使用一个NSArray保存这些数值

CAKeyframeAnimation 的一些比较重要的属性：

1. path

这是一个 CGPathRef  对象，默认是空的，当我们创建好CAKeyframeAnimation的实例的时候，可以通过制定一个自己定义的path来让  某一个物体按照这个路径进行动画。这个值默认是nil  当其被设定的时候  values  这个属性就被覆盖

2. values

一个数组，提供了一组关键帧的值，  当使用path的 时候values的值自动被忽略。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

CGMutablePathRef path = CGPathCreateMutable();

//将路径的起点定位到  （50  120）

CGPathMoveToPoint(path,NULL,50.0,120.0);

//下面5行添加5条直线的路径到path中

CGPathAddLineToPoint(path, NULL, 60, 130);

CGPathAddLineToPoint(path, NULL, 70, 140);

CGPathAddLineToPoint(path, NULL, 80, 150);

CGPathAddLineToPoint(path, NULL, 90, 160);

CGPathAddLineToPoint(path, NULL, 100, 170);

//下面四行添加四条曲线路径到path

CGPathAddCurveToPoint(path,NULL,50.0,275.0,150.0,275.0,70.0,120.0);

CGPathAddCurveToPoint(path,NULL,150.0,275.0,250.0,275.0,90.0,120.0);

CGPathAddCurveToPoint(path,NULL,250.0,275.0,350.0,275.0,110.0,120.0);

CGPathAddCurveToPoint(path,NULL,350.0,275.0,450.0,275.0,130.0,120.0);

//以“position”为关键字 创建 实例

CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];

//设置path属性

[animation setPath:path];

[animation setDuration:3.0];

//这句代码 表示 是否动画回到原位

// [animation setAutoreverses:YES];

CFRelease(path);

//开始运行block动画

[self.block.layer addAnimation:animation forKey:NULL];

下面一个例子是利用values制作的动画：

1

2

3

4

5

6

7

8

9

10

11

CGPoint p1=CGPointMake(50, 120);

CGPoint p2=CGPointMake(80, 170);

CGPoint p3=CGPointMake(30, 100);

CGPoint p4=CGPointMake(100, 190);

CGPoint p5=CGPointMake(200, 10);

NSArray *values=[NSArray arrayWithObjects:[NSValue valueWithCGPoint:p1],[NSValue valueWithCGPoint:p2],[NSValue valueWithCGPoint:p3],[NSValue valueWithCGPoint:p4],[NSValue valueWithCGPoint:p5], nil];

CAKeyframeAnimation

*animation = [CAKeyframeAnimation animationWithKeyPath:@"position"]; [animation setValues:values];

[animation setDuration:3.0];

[animation setAutoreverses:YES];

[self.block.layer addAnimation:animation forKey:NULL];

- keyPath可以使用的key：

transform.rotation.x 围绕x轴翻转 参数：角度 angle2Radian(4)

transform.rotation.y 围绕y轴翻转 参数：同上

transform.rotation.z 围绕z轴翻转 参数：同上

transform.rotation 默认围绕z轴

transform.scale.x x方向缩放 参数：缩放比例 1.5

transform.scale.y y方向缩放 参数：同上

transform.scale.z z方向缩放 参数：同上

transform.scale 所有方向缩放 参数：同上

transform.translation.xx方向移动 参数：x轴上的坐标 100

transform.translation.yx方向移动 参数：y轴上的坐标

transform.translation.zx方向移动 参数：z轴上的坐标

transform.translation 移动 参数：移动到的点 （100，100）

CATransition:

CAAnimation的子类，用于做转场动画，能够为层提供移出屏幕和移入屏幕的动画效果。

几个比较重要的属性：

filter：为动画添加一个可选的滤镜。

如果指定，那么指定的filter必须同时支持x和y，否则该filter将不起作用。

默认值为nil。

如果设置了filter，那么，为layer设置的type和subtype属性将被忽略。

该属性只在iOS 5.0以及以后版本被支持。

type：动画过渡类型

指定预定义的过渡效果。

默认为kCATransitionFade

如果指定了filter，那么该属性无效。

subtype：动画过渡方向

指定预定义的过渡方向。

默认为nil。

如果指定了filter，那么该属性无效。

预定义的过渡方向为：

kCATransitionFromRight;

kCATransitionFromLeft;

kCATransitionFromTop;

kCATransitionFromBottom;

分别表示：过渡从右边、左边、顶部、底部开始。

startProgress：动画起点(在整体动画的百分比)

定义过度的开始点

开始点的值必须小于或者等于结束点。

默认值为0.0。

这两个属性是float类型的。

可以控制动画进行的过程，可以让动画停留在某个动画点上，值在0.0到1.0之间。endProgress要大于等于startProgress。

比如:立方体转，可以设置endProgress=0.5，让动画停留在整个动画的特定位置(停止在旋转一般的状态)

endProgress：动画终点(在整体动画的百分比)

定义过度的结束点。

结束点的值必须大于或者等于开始点。

默认值为1.0。

翻页效果：

fade     //交叉淡化过渡(不支持过渡方向)

push     //新视图把旧视图推出去

moveIn   //新视图移到旧视图上面

reveal   //将旧视图移开,显示下面的新视图

cube     //立方体翻滚效果

oglFlip  //上下左右翻转效果

suckEffect   //收缩效果，如一块布被抽走(不支持过渡方向)

rippleEffect//滴水效果(不支持过渡方向)

pageCurl     //向上翻页效果

pageUnCurl   //向下翻页效果

cameraIrisHollowOpen  //相机镜头打开效果(不支持过渡方向)

cameraIrisHollowClose//相机镜头关上效果(不支持过渡方向)

CATransition *animation = [CATransitionanimation];  
    //动画时间  
    animation.duration =1.0f;  
    //display mode, slow atbeginning and end  
    animation.timingFunction =UIViewAnimationCurveEaseInOut;  
    //在动画执行完时是否被移除  
    animation.removedOnCompletion= NO;  
    //过渡效果  
    animation.type =@"pageCurl";  
    //过渡方向  
    animation.subtype =kCATransitionFromRight;  
    //暂时不知,感觉与Progress一起用的,如果不加,Progress好像没有效果  
    animation.fillMode =kCAFillModeForwards;  
    //动画停止(在整体动画的百分比).  
    animation.endProgress =0.7;  
    [imageView.layeraddAnimation:animation forKey:nil];

CAAnimationGroup——动画组动画，是CAAnimation的子类，可以保存一组动画对象，将CAAnimationGroup对象加入层后，组中所有动画对象可以同时并发运行属性说明：–animations：用来保存一组动画对象的NSArray默认情况下，一组动画对象是同时运行的，也可以通过设置动画对象的beginTime属性来更改动画的开始时间具体的实例如下：

-(void)labelinAnimation{
//position为指定的keypath。  即layer中的可动画属性（animatable property）这行代码就是指定我要对控件的position这个属性进行动画.
//除了CABasicAnimation ，还有CAKeyframeAnimation 以及CAAnimationGroup.
    CABasicAnimation *basic = [CABasicAnimation animationWithKeyPath:@"position"];
//设置动画的持续时间    
basic.duration = 3.0f;
//对应之前的position .fromValue 为：position的起始位置，需要使用NSValue    basic.fromValue = [NSValue valueWithCGPoint:CGPointMake(self.label.center.x, self.view.bounds.size.height+10)];
//.toValue：position动画的结束位置.   
 basic.toValue = [NSValue valueWithCGPoint:CGPointMake(self.label.center.x,100)];
[self.label.layer addAnimation:basic forKey:@"posit"];   //动画添加至layer层.完成
//组合动画，初始化第二个动画，此次的keypath 是透明度   
 CABasicAnimation *basic1 = [CABasicAnimation animationWithKeyPath:@"opacity"];   
 basic1.duration = 3.0f;
//从无到有  
  basic1.fromValue = @(0);  
  basic1.toValue = @(1);    
//将上述两个动画组合成一个动画。   
 CAAnimationGroup *group = [CAAnimationGroup animation];
//组合两个动画   
 [group setAnimations:@[basic,basic1]];
//当使用组合动画之后，持续时间等信息以group的为主
    group.duration = 3.0f;
//使动画停留在执行后的位置，最好与group.fillMode=kCAFillModeForwards ;同用

group.removedOnCompletion = NO;

//重复次数    
group.repeatCount = 0;
//使动画停留在执行后的位置，最好与removeOnCompletion同用    
group.fillMode=kCAFillModeForwards ;  
  [self.label.layer addAnimation:group forKey:@"posit"];}

顺序执行animation

CABasicAnimation *animation31 =[CABasicAnimation

animationWithKeyPath: @"position.x" ];

[animation31 setToValue:[NSNumber numberWithFloat:470]];

animation31.cumulative=YES;

animation31.duration = .1;

[animation31 setFillMode:kCAFillModeForwards];

animation31.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];

[animation31 setRemovedOnCompletion:NO];

CAAnimationGroup *group = [CAAnimationGroup animation];

group.animations = [NSArray arrayWithObjects:animation31, nil];

group.duration = .1;

group.timingFunction = [CAMediaTimingFunctionfunctionWithName:kCAMediaTimingFunctionEaseInEaseOut];

group.autoreverses = YES;

group.repeatCount = 2;

[garbagebutton.layer addAnimation:group forKey:nil];

UIBezierPath:

使用UIBezierPath类可以创建基于矢量的路径，这个类在UIKit中。此类是Core Graphics框架关于path的一个封装。使用此类可以定义简单的形状，如椭圆或者矩形，或者有多个直线和曲线段组成的形状。

UIBezierPath对象是CGPathRef数据类型的封装。path如果是基于矢量形状的，都用直线和曲线段去创建。我们使用直线段去创建矩形和多边形，使用曲线段去创建弧（arc），圆或者其他复杂的曲线形状。每一段都包括一个或者多个点，绘图命令定义如何去诠释这些点。每一个直线段或者曲线段的结束的地方是下一个的开始的地方。每一个连接的直线或者曲线段的集合成为subpath。一个UIBezierPath对象定义一个完整的路径包括一个或者多个subpaths。

创建和使用一个path对象的过程是分开的。创建path是第一步，包含一下步骤：

（1）创建一个Bezier path对象。

（2）使用方法moveToPoint:去设置初始线段的起点。

（3）添加line或者curve去定义一个或者多个subpaths。

（4）改变UIBezierPath对象跟绘图相关的属性。

例如，我们可以设置stroked path的属性lineWidth和lineJoinStyle。也可以设置filled path的属性usesEvenOddFillRule。

当创建path，我们应该管理path上面的点相对于原点（0，0），这样我们在随后就可以很容易的移动path了。为了绘制path对象，我们要用到stroke和fill方法。这些方法在currentgraphic context下渲染path的line和curve段。

创建一个多边形用直线连接（五边形）：

1. - (void)drawRect:(CGRect)rect

2. {

3.     UIColor *color = [UIColor redColor];

4.     [color set]; //设置线条颜色

5.       //创建UIBezierPath

6.     UIBezierPath* aPath = [UIBezierPath bezierPath];

7.     aPath.lineWidth = 5.0;

8.

9.     aPath.lineCapStyle = kCGLineCapRound; //线条拐角

10.    aPath.lineJoinStyle = kCGLineCapRound; //终点处理

11.

12.    // 设置原点，所有的点都是围绕原点作图形

13.    [aPath moveToPoint:CGPointMake(100.0, 0.0)];

14.

15.    // 设置剩余的4个点

16.    [aPath addLineToPoint:CGPointMake(200.0, 40.0)];

17.    [aPath addLineToPoint:CGPointMake(160, 140)];

18.    [aPath addLineToPoint:CGPointMake(40.0, 140)];

19.    [aPath addLineToPoint:CGPointMake(0.0, 40.0)];

20.    [aPath closePath];//第五条线通过调用closePath方法得到的

21.

22.    [aPath stroke];//Draws line 根据坐标点连线 （这是空心连线）

// [aPath fill];//实心无边形

23.

24. }

根据圆半径、圆起点角度、圆终点角度、创建一整圆或半圆：

1. - (void)drawRect:(CGRect)rect

2. {

3.     UIColor *color = [UIColor redColor];

4.     [color set]; //设置线条颜色

5.       /*

center:弧线中心点的坐标

radius:弧线所在圆的半径

startAngle:弧线开始的角度值

endAngle:弧线结束的角度值

1.      clockwise:是否顺时针画弧线

2. */

3.     UIBezierPath* aPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150)

4.                                                          radius:75

5.                                                      startAngle:0

6.                                                        endAngle:DEGREES_TO_RADIANS(135)

7.                                                       clockwise:YES];

8.

9.     aPath.lineWidth = 5.0;  //设置线宽

10.    aPath.lineCapStyle = kCGLineCapRound; //线条拐角

11.    aPath.lineJoinStyle = kCGLineCapRound; //终点处理

12.    [aPath stroke];

13.}

通过2个点来设置一条曲线（起点为原点）

1. - (void)drawRect:(CGRect)rect

2. {

3.     UIColor *color = [UIColor redColor];

4.     [color set]; //设置线条颜色

5.

6.     UIBezierPath* aPath = [UIBezierPath bezierPath];

7.

8.     aPath.lineWidth = 5.0;

9.     aPath.lineCapStyle = kCGLineCapRound; //线条拐角

10.    aPath.lineJoinStyle = kCGLineCapRound; //终点处理

11.      //原点（起点）

12.    [aPath moveToPoint:CGPointMake(20, 100)];

13.      //CurveToPoint：为曲线终点   controlPoint:通过这个点来确定曲线的弯曲度

14.    [aPath addQuadCurveToPoint:CGPointMake(120, 100) controlPoint:CGPointMake(70, 0)];

15.

16.    [aPath stroke];

17.}

  通过三个点来确定一条曲线：

1. - (void)drawRect:(CGRect)rect

2. {

3.     UIColor *color = [UIColor redColor];

4.     [color set]; //设置线条颜色

5.

6.     UIBezierPath* aPath = [UIBezierPath bezierPath];

7.

8.     aPath.lineWidth = 5.0;

9.     aPath.lineCapStyle = kCGLineCapRound; //线条拐角

10.    aPath.lineJoinStyle = kCGLineCapRound; //终点处理

11.      //起点

12.    [aPath moveToPoint:CGPointMake(20, 50)];

13.    // CurveToPoint: 终点   controlPoint1:第一点  controlPoint2:第二点

14.    [aPath addCurveToPoint:CGPointMake(200, 50) controlPoint1:CGPointMake(110, 0) controlPoint2:CGPointMake(110, 100)];

15.

16.    [aPath stroke];

17.}

CABasicAnimation,CAKeyframeAnimation,CATransition,CAAnimationGroup,UIBezierPath之间做动画的不同点和各自的使用范围。相关推荐

  1. ios开发——使用CALayer和Core Animation做动画效果

    一. CALayer (一). CALayer简介 在iOS中,你能看得见摸得着的东西基本上都是UIView,比如一个按钮.一个文本标签.一个文本输入框.一个图标等等,这些都是UIView,其实UIV ...

  2. 沿着path路径做动画

    沿着path路径做动画 路径 效果 源码 // // ViewController.m // PathAnimation // // Created by YouXianMing on 16/1/26 ...

  3. Android使用XML做动画UI

    在Android应用程序,使用动画效果,能带给用户更好的感觉.做动画可以通过XML或Android代码. 本教程中,介绍使用XML来做动画.在这里,介绍基本的动画,如淡入,淡出,旋转等. 效果: ht ...

  4. python做动画视频教程_Python入门教程:Python创建动画竟然这么简单！

    数据下载地址:www.drugabuse.gov/sites/default/files/overdose_data_1999-2015.xls. 我们将用Matplotlib和Seaborn绘图,用 ...

  5. 聊聊使用 JavaScript 做动画出现卡顿的原因

    前段时间在使用 JavaScript 做动画的时候发现做出来的动画会出现卡顿的现象,今天我们主要就来聊一下卡顿的原因以及如何解决这个问题. 使用定时器实现动画出现卡顿的原因 主要原因是浏览器无法确定定 ...

  6. 初学UI设计会接触什么 怎么用PS时间轴做动画

    初学UI设计会接触什么?怎么用PS时间轴做动画?很多初学UI设计的人在接触PS时都会被其繁多的技法.复杂的操作困扰,时间轴是其中的重点和难点知识.当PS有了时间轴功能以后,制作GIF动画就变得轻而易举 ...

  7. 利用UE4人偶做动画的工具选择

    uefy下载地址:  https://github.com/BilboTheGreedy/Blender-rigify-to-ue4. Mr mannequins插件下载地址:https://gith ...

  8. 不用在读长和准确性之间做选择题，PacBio发表新方法

    不用在读长和准确性之间做选择题,PacBio发表新方法 来源: 2019/8/19 16:21:56      点击:125 从一开始,研究人员似乎就面临着艰难的选择.一边是Illumina产生的短序 ...

  9. 用silverlight做动画-相机

    用silverlight做动画-相机 适合初学者学习 做一个相机的动画 和做flash动画一样,准备好素材 将素材放入项目中 开始正式制作前为了方便以后重用,就把这个动画做成usercontrol(和 ...

最新文章

  1. python映射类型-python2.x学习笔记(8)－映射和集合类型
  2. Hibernate中通过annotaion配置SQLServer的存储过程
  3. Mysql的innodb缓冲池管理（转）
  4. 更改UISearchBar button属性
  5. 什么镜头最适合拍风景_35mm F1.8定焦镜头，拍人拍风景都可以！
  6. Cocos2d-x3.1FileUtilsTest使用
  7. 基本汇编语言学习结构
  8. 国内破解站点大全! -by[http://blog.csdn.net/netxiaoyue]
  9. 官方通知：考研国家线预计4月中旬公布
  10. 5款在线制图工具分享，快来看看！
  11. 在代码里面如何使用workman
  12. opencv制作微信小游戏 最强连一连 辅助(2)--dfs深度优先搜索算法
  13. 如何在程序里写死一张图片（base64编码，OpenCV）
  14. 【erdas】使用行政界线分割栅格影像
  15. 服务器部署sas_如何在阿里云SAS上部署WordPress网站
  16. 分布式事务简介(seata)
  17. charles系列破解激活办法（最高charles4.2都可以激活）
  18. 人工智能-一种现代的方法-chapter3-通过搜索进行问题求解
  19. signature=cfd49330e04062ab770d7ddb4cfcf23a,Przed pierwszym rozbiorem Polski
  20. 使用FME实现PGDB转CAD并赋eed属性

热门文章

  1. Electron 自定义托盘实战——桌面计算器
  2. 【WIN 07】笔记本重装系统找回预装的office
  3. 安卓手机修改音量键为HOME和BACK
  4. U的含义，u是什么单位
  5. 5G使用随笔-华为5G模块MH5000-31
  6. 立体感css播放按钮样式
  7. switch怎么切换服务器账号,任天堂eshop如何换区 switch账号如何切换其他服地区
  8. eviews做回归分析时输出值的理解
  9. php 文章分句,php 英文分句/分段落
  10. 智课雅思词汇---二十五、形容词后缀-ate-fic-ose-ulent-olent-ous-ulous-y