您的位置:首页 > 产品设计 > UI/UE

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

2015-12-28 14:44 411 查看
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 = [NSVa
4000
lue 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.}  

 

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: