zoukankan      html  css  js  c++  java
  • 之二:CAKeyframeAnimation

    是CApropertyAnimation的子类,跟CABasicAnimation的区别是:CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue),而CAKeyframeAnimation会使用一个NSArray保存这些数值,就可以实现CALayer的某一属性按照一串的数值进行动画,就好像制作动画的时候一帧一帧的制作一样。

    几个关键属性:

    • values:就是上述的NSArray对象。里面的元素称为”关键帧”(keyframe)。动画对象会在指定的时间(duration)内,依次显示values数组中的每一个关键帧
    • path:设置一个CGPathRefCGMutablePathRef的路径对象,默认nil,让CALayer跟着路径移动。path只对CALayer的anchorPoint(锚点)和position(位置)起作用。如果你设置了path,那么values将被忽略
    • keyTimes:可以为对应的关键帧指定对应的时间点,其取值范围为0到1.0,keyTimes中的每一个时间值都对应values中的每一帧.当keyTimes没有设置的时候,各个关键帧的时间是平分的

    说明:CABasicAnimation可看做是最多只有2个关键帧的CAKeyframeAnimation

    - Values方式

     1 // 创建5个关键帧的点对象
     2 CGPoint p1 = CGPointMake(50, 120);
     3 CGPoint p2 = CGPointMake(80, 170);
     4 CGPoint p3 = CGPointMake(30, 100);
     5 CGPoint p4 = CGPointMake(100, 190);
     6 CGPoint p5 = CGPointMake(200, 10);
     7 
     8 // 将创建的关键帧放入数组中,用NSValue结构体类型转化成对象
     9 NSArray *values = [NSArray arrayWithObjects:[NSValue valueWithCGPoint:p1], [NSValue valueWithCGPoint:p2], [NSValue valueWithCGPoint:p3], [NSValue valueWithCGPoint:p4], [NSValue valueWithCGPoint:p5], nil];
    10 
    11 CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    12 
    13 // 给Values属性赋值
    14 [animation setValues:values];
    15 
    16 // 动画完成后保持最新状态
    17 animation.removedOnCompletion = NO;
    18 animation.fillMode = kCAFillModeForwards;
    19 
    20 animation.duration = 4.0;
    21 
    22 // 动画定时函数属性
    23 animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    24 
    25 animation.delegate=self;
    26 
    27 [self.myView.layer addAnimation:animation forKey:nil];
    • 第23行:timingFunction 用于变化起点和终点之间的插值计算,形象点说它决定了动画运行的节奏
    1. kCAMediaTimingFunctionLinear            线性,即匀速 
    2. kCAMediaTimingFunctionEaseIn            先慢后快 
    3. kCAMediaTimingFunctionEaseOut           先快后慢 
    4. kCAMediaTimingFunctionEaseInEaseOut     先慢后快再慢 
    5. kCAMediaTimingFunctionDefault           实际效果是动画中间比较快. 
    • 注意:当上面的预置不能满足你的需求的时候,你可以使用下面的两个方法来自定义你的timingFunction 

         *  + (id)functionWithControlPoints:(float)c1x :(float)c1y :(float)c2x :(float)c2y; 

         *  - (id)initWithControlPoints:(float)c1x :(float)c1y :(float)c2x :(float)c2y; 

    - Path方式:

     1 CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
     2 
     3 CGMutablePathRef myPath = CGPathCreateMutable();
     4 
     5 // 将路径的起点定位到(50, 120)  
     6 CGPathMoveToPoint(myPath, NULL, 50.0, 120.0);
     7 
     8 // 添加5条直线的路径到myPath中
     9 CGPathAddLineToPoint(myPath, NULL, 60, 130);
    10 CGPathAddLineToPoint(myPath, NULL, 70, 140);
    11 CGPathAddLineToPoint(myPath, NULL, 80, 150);
    12 CGPathAddLineToPoint(myPath, NULL, 90, 160);
    13 CGPathAddLineToPoint(myPath, NULL, 100, 170);
    14 
    15 // 添加4条曲线路径到myPath中
    16 CGPathAddCurveToPoint(myPath,NULL,50.0,275.0,150.0,275.0,70.0,120.0);
    17 CGPathAddCurveToPoint(myPath,NULL,150.0,275.0,250.0,275.0,90.0,120.0);
    18 CGPathAddCurveToPoint(myPath,NULL,250.0,275.0,350.0,275.0,110.0,120.0);
    19 CGPathAddCurveToPoint(myPath,NULL,350.0,275.0,450.0,275.0,130.0,120.0);
    20 
    21 //以"position"为关键字创建 实例
    22 CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    23 
    24 // 是否动画回到原位
    25 [animation setAutoreverses:YES];
    26 
    27 // 设置path属性
    28 animation.path = myPath;
    29 
    30 // 释放路径
    31 CGPathRelease(myPath);
    32 
    33 animation.removedOnCompletion = NO;
    34 animation.fillMode = kCAFillModeForwards;
    35 
    36 animation.duration = 4.0;
    37 
    38 animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    39 
    40 animation.delegate=self;
    41 
    42 [self.myView.layer addAnimation:animation forKey:nil];

     - 其他属性

    • calculationMode 这个属性用来设定 关键帧中间的值是怎么被计算的
  • 相关阅读:
    java基础多线程
    java反射基础
    JSP-4(Session)
    JSP-3
    JSP-2
    复试计算机专业文献翻译
    jsp
    实现输入输出对应模型
    servlet
    tomcat的入门(1)
  • 原文地址:https://www.cnblogs.com/xs514521/p/5198355.html
Copyright © 2011-2022 走看看