文档章节

关键帧动画

小春0618
 小春0618
发布于 2015/07/27 11:22
字数 1112
阅读 22
收藏 0

之所以叫做关键帧动画是因为,这个类可以实现,某一属性按照一串的数值进行动画,就好像制作动画的时候一帧一帧的制作一样。

一般使用的时候  首先通过 animationWithKeyPath 方法 创建一个CAKeyframeAnimation实例,

 

CAKeyframeAnimation 的一些比较重要的属性

1. path

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

2. values

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

下面是一个简单的例子  效果为动画的连续移动一个block到不同的位置

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);
    [self.block.layer addAnimation:animation forKey:NULL];

 运行后  block会先沿着直线移动,之后再沿着设定的曲线移动,完全按照我们设定的“关键帧”移动。

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

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];

 也非常简单,到目前位置,只用到了CAKeyframeAnimation的两个关键属性就能完成动画,下面的一些属性提供了更加细致化,更加强大的功能。

 

设定每一帧的时间

默认情况下,一帧动画的播放,分割 的时间是动画的总时间除以帧数减去一。你可以通过下面的公式决定每帧动画的时间:总时间/(总帧数-1)。 例如,如果你指定了一个 5 帧,10 秒的动画,那么每帧的时间就是 2.5 秒钟:10/(5-1)=2.5。你可以做更多 的控制通过使用 keyTimes 关键字,你可以给每帧动画指定总时间之内的某个时间点。 

通过设置属性keyTimes,能实现这个功能,这个属性是一个数组,其成员必须是NSNumber。

同时 这个属性的设定值要与calculationMode属性相结合,同时他们有一定的规则,

The appropriate values in the keyTimes array are dependent on the calculationMode property.

  • If the calculationMode is set to kCAAnimationLinear, the first value in the array must be 0.0 and the last value must be 1.0. Values are interpolated between the specified key times.

  • If the calculationMode is set to kCAAnimationDiscrete, the first value in the array must be 0.0.

  • If the calculationMode is set to kCAAnimationPaced or kCAAnimationCubicPaced, the keyTimes array is ignored。

如果keyTimes的值不合法,或者不符合上面的规则,那么就会被忽略。

[animation setCalculationMode:kCAAnimationLinear]; [animation setKeyTimes:
[NSArray arrayWithObjects:
[NSNumber numberWithFloat:0.0],
[NSNumber numberWithFloat:0.25], [NSNumber numberWithFloat:0.50],
[NSNumber numberWithFloat:0.75], [NSNumber numberWithFloat:1.0], nil]];

calculationMode

这个属性用来设定 关键帧中间的值是怎么被计算的

NSString * const kCAAnimationLinear;
NSString * const kCAAnimationDiscrete;   只展示关键帧的状态,没有中间过程,没有动画。
NSString * const kCAAnimationPaced;
NSString * const kCAAnimationCubic;
NSString * const kCAAnimationCubicPaced;

可选的值有关键帧动画的基础步骤

1.决定你想要做动画的属性(例如,框架,背景,锚点,位置,边框,等等) 2.在动画对象值的区域中,指定开始,结束,和中间的值。这些都是你的关键帧(看清单 4-2)
3.使用 duration 这个字段指定动画的时间
4.通常来讲,通过使用 times 这个字段,来给每帧动画指定一个时间。如果你没有指定这些,核心动画就

会通过你在 values 这个字段指定的值分割出时间段。
5.通常,指定时间功能来控制步调。 这些都是你需要做的。你创建你的动画和增加他们到层中。调用-addAnimation 就开始了动画。


本文转载自:http://www.cnblogs.com/bucengyongyou/archive/2013/01/02/2842065.html

小春0618
粉丝 8
博文 40
码字总数 10552
作品 0
海淀
程序员
私信 提问
加载中

评论(0)

Unity 多物体联动动画

分享一个前几天写的插件,当时为了做多个物体的简单动画(只有移动、旋转、缩放之类的)同时运动效果而写的,说白了算不上什么高级的联动动画,就只是同时控制多个物体协调运动而已,像什么机...

qq992817263
2017/06/12
0
0
【WPF学习】第五十四章 关键帧动画

  到目前为止,看到的所有动画都使用线性插值从起点到终点。但如果需要创建具有多个分段的动画和不规则移动的动画。例如,可能希望创建一个动画,快速地将一个元素滑入到视图中,然后慢慢地...

Peter.Luo
03/05
0
0
CocosBuilder 学习笔记(3) AnimationManager 与 ccbi 文件解析

【CocosBuilder】学习笔记目录 1. 相关的类 先介绍和AnimationManager相关的几个类: CCBSequence 时间线。有成员duration(时间线时间,默认10秒)、name(时间线名)、SequenceId(Id)、C...

深潮
2019/08/31
0
0
iOS UIView动画实践(五):Keyframe Animation

前言 有些时候大家可能会遇到制作复杂、具有连贯性UIView动画的需求,这时大家可能会使用在闭包中衔接一段一段的动画,使之成为一段连续的动画。 如果我们只是连接2个,或者3个动画,这种方式...

上官尘
2016/03/15
51
0
Unity插件 - MeshEditor(五) 网格顶点动画(变形动画)

源码已上传至github,并持续更新,链接请看底部。(本帖跟随github持续更新) 网格顶点动画(变形动画)是针对于物体的形状可以随意变换并记录为关键帧的动画,虽然模型的顶点数据还是应该交...

qq992817263
2016/08/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

刚得到一台centos7服务器,作为Java程序员应该做的事

1.JDK的卸载安装 卸载掉服务器本来的OPENJDK,安装ORELOC的JDK 检查是否已经安装了jdk rpm -qa | grep jdk 如果有的话,就卸载了再装 rpm -e --nodeps java-1.7.0-openjdk 去Oracle下载一...

ytuan996
28分钟前
47
0
ConcurrentHashMap(1.8)源码剖析

ConcurrentHashMap(JDK1.8)学习记录 看了忘忘了看系列之ConcurrentHashMap,本文主要记录下通过看ConcurrentHashMap源码学习到的知识点。主要有以下几个点。文章稍长,需要耐心阅读。 1、Con...

DoubleCherish
30分钟前
29
0
mysql之explain详解(分析索引最佳使用)

mysql之explain详解(分析索引最佳使用) mysql explain用于分析sql 语句的执行及数据库索引的使用。本文将致力于帮助大家充分理解explain所返回的各项参数,从而使大家快速掌握explain用法技...

科比可比克
昨天
38
0
如何比较两个不同分支的文件? - How to compare files from two different branches?

问题: I have a script that works fine in one branch and is broken in another. 我有一个脚本在一个分支中工作正常,在另一个分支中被破坏。 I want to look at the two versions side-...

技术盛宴
昨天
29
0
jenkins Euleros镜像打包

一、下载需要的软件 mkdir jenkins_software && cd jenkins_softwarewget --no-check-certificate -q https://mirrors.huaweicloud.com/epel/RPM-GPG-KEY-EPEL-7 -O RPM-GPG-KEY-EPEL-7......

mbzhong
昨天
61
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部