一、概述

在动画中,我们会指定动画的持续时间。例如

scaleAnimation.duration = self.config.appearDuration

那么这个时间是怎么定义的呢?是指的绝对时间吗?

二、层级时间结构

layer在屏幕上的显示位置是根据父layer的位置以及本身相对于父layer偏移定义的。
与此类似,每一个layer都有自己的time space,计算本地时间(local time)时候,需要根据父layer的时间以及一定的转换规则来计算出本地时间。
这个规则就是CAMediaTiming协议。每一个CALayerCAAnimation实现了这个协议。

三、关于时间的概念

  1. 绝对时间Absolute time
    CACurrentMediaTime函数返回,实际调用mach_absolute_time()
  2. active local time
    根据CAMediaTiming协议计算得到的当前对象上的时间。
  3. basic local time
    由于动画可以重复(repeat)或者回放(play backwards)。需要把active local time转化为做动画相关的时间。
    例如active local time是5.5s,动画的重复次数是10,动画持续时间是1s。那么5.5s的active local time对应的local time是0.5s。

四、CAMediaTiming协议

  1. beginTime

    Required. Specifies the begin time of the receiver in relation to its parent object, if applicable.

    指定了指定了父对象时间和子对象时间的偏移。

  2. speed

    Specifies how time is mapped to receiver’s time space from the parent time space

    对动画以及子动画速度应用一个缩放的因子。如果speed是2.0,那么本地时间流逝的速度是父对象的时间流逝速度的两倍。

  3. timeOffset

    Required. Specifies an additional time offset in active local time.

    对本地时间做了一个偏移。

五、时间转换公式

  1. 从父layer转化为active local time
    \[ t= max\left\{(t_p-begintime),0\right\}\times speed+offset \]
    其中\(t\)是本地时间,\(t_p\)是父layer的时间,其他都是CAMediaTiming要求实现的字段。

六、例子

用一个简单的例子来说明各个参数的影响。动画很简单,一个红色的方块从左移到右边。动画的持续时间是1s,没有重复。

  1. 设置speed为2,begin time为0.3s,offset为0.5s,效果如下

    与上面相比,三处不同

    1. 动画的速度是原来的两倍,这是因为动画的speed是2。
    2. 动画起始时,滑块的位置为中央,而不是在左边。这是因为offset为0.5s。由于动画的持续时间是1s,0.5s时,动画刚刚进行了一半,滑块的位置是在屏幕中央。
    3. 点击开始动画的按钮,到开始动画,有一个延迟,这是因为begin time的时间不是默认值,而是有一个0.3s的延迟。
  2. 时间变换的图像表示

    1. 从父layer的时间到子layer的active local time

      图中,直线的斜率是speed,第一个y值不为零的点,对应的横轴坐标是begintime,对应的y轴坐标是offset
    2. 从active local time到basic local time

    图中,不为0的部分的x轴长度,即是动画时间,由repeattime或repeatDuration指定。由于这个动画没有repeattime或repeatDuration,因此就是动画的duration。如果指定了动画的时间,比如repeatcount为3,那么非0部分会重复3次。

    如果指定了autoreverses为yes,那么折线会部分有负的曲率。

    第一个不为0的点对应的横轴坐标即为offset。
    fillMode可以理解为不在动画时间内的y值是什么。如果kCAFillModeBackwards,对应于横轴在offset之前时,纵轴对应于offset。kCAFillModeForwards对应于横轴在动画结束之后,纵轴保存不变。

  3. 父对象和子对象联动

    我们的例子中,动画是加在layer上的,它们都遵守CAMediatiming协议,就CAMediatiming看来,动画的父对象是layer。

    1. 设置父对象的speed
      我们设置layer的speed为2,动画的speed为0.1,实际的速度会是0.2.
    2. 设置父对象的offset
      设置父对象的offset为0.5,那么动画将会在一半处开始。

七、关于begintime

根据公式
\[
t= max\left\{(t_p-begintime),0\right\}\times speed+offset
\]
这里begintime是应该怎么指定呢?如果想把一个加到layer的动画的延迟5s执行,应该把begintime直接设为5吗?
由于begintime是相对于父对象(layer)的时间偏移。由于layer可能在很久以前就存在了,因此对于动画来说\(t_p\)是一个很大的值。直接把begintime指定为5s,那么\(t\)将会是一个很大的值。正确的做法是把begintime设置为5s+这个layer被加到父layer以后,度过的时间,称为addtime.

    animation.beginTime = addTime + delay;

如何得到addtime

addTime = [layer convertTime:CACurrentMediaTime() fromLayer:nil];

参考

控制动画时间
控制动画时间
Time Warp in Animation

iOS开发之动画中的时间的更多相关文章

  1. iOS开发之动画中的时间(概况)

    一.引言 在iOS开发中使用动画时,可以通过设置动画的duration.speed.begintime.offset属性,来设置动画的时长.速度.起始时间及起始偏移. 用一个简单的例子来说明各个参数的 ...

  2. iOS开发之动画编程的几种方法

    iOS开发之动画编程的几种方法 IOS中的动画总结来说有五种:UIView<block>,CAAnimation<CABasicAnimation,CATransition,CAKe ...

  3. iOS 开发之动画篇 - 从 UIView 动画说起

    毋庸置疑的:在iOS开发中,制作动画效果是最让开发者享受的环节之一.一个设计严谨.精细的动画效果能给用户耳目一新的效果,吸引他们的眼光 —— 这对于app而言是非常重要的. 本文作为动画文集的第一篇, ...

  4. iOS开发-动画总结

    一.简介 IOS 动画主要是指Core Animation框架.官方使用文档地址为:Core Animation Guide.Core Animation是IOS和OS X平台上负责图形渲染与动画的基 ...

  5. ios开发核心动画七:核心动画与UIView动画的区别

    /** UIView与核心动画区别?(掌握) 1.核心动画只作用在layer. 2.核心动画看到的都是假像,它并没有去修改UIView的真实位置. 什么时候使用核心动画? 1.当不需要与用户进行交互, ...

  6. iOS dateformatter设置GMT格式时间--iOS开发系列---项目中成长的知识四

    今天在项目中开始接手客户端的签名这个模块,签名这个会在项目结束过后再单独写一下自己的心得! 今天讲讲在签名的过程中我们需要向服务器传送一个Date值,格式要求是格林威治时间,也就是GMT时间! 格式要 ...

  7. (转)iOS 开发,工程中混合使用 ARC 和非ARC

    [前提知识] ARC:Automatic Reference Counting,自动引用计数 在开发 iOS 3 以及之前的版本的项目时我们要自己负责使用引用计数来管理内存,比如要手动 retain. ...

  8. iOS 开发,工程中混合使用 ARC 和非ARC(转)

    [前提知识] ARC:Automatic Reference Counting,自动引用计数 在开发 iOS 3 以及之前的版本的项目时我们要自己负责使用引用计数来管理内存,比如要手动 retain. ...

  9. iOS开发CABasicAnimation动画理解

    1.CALayer简介 CALayer是个与UIView很类似的概念,同样有backgroundColor.frame等相似的属性,我们可以将UIView看做一种特殊的CALayer.但实际上UIVi ...

随机推荐

  1. Azure ARM (5) ARM Template初探 - 本地JSON Template文件(1)

    <Windows Azure Platform 系列文章目录>      Azure ARM (1) 概览      Azure ARM (2) 概览      Azure ARM (3) ...

  2. Windows Azure Web Site (10) Web Site测试环境

    <Windows Azure Platform 系列文章目录> 我们知道,在使用Azure Cloud Service的时候,会有2个不同的环境,称为Production环境和Stagin ...

  3. .Net Task<T>的一种比较神奇的卡死情况(Wait/Result卡死, await能得到结果)

    出现的环境.Net4.0 + WebApi1(4.0.30506.0) + Microsoft.Bcl.Async.1.0.168 自己死活看不出原因, 分享出来给大家看看,希望有人能找到问题的关键 ...

  4. Dapper学习 - Dapper.Rainbow(一) - Create

    Dapper这个ORM有许多扩展, 我自己用过两种, 也算是比较主流的两种, Rainbow和Extension, 这里就先介绍下Rainbow吧, 毕竟这个先用, 当然, 由于我使用的是mysql数 ...

  5. for循环的一种简化

    数组: var arr = [1, 2, 3, 5, 6]; 传统的教科书式的循环写法: for(var i=0; i<arr.length; i++){ console.log(arr[i]) ...

  6. LINQ的All的方法

    方法All返回布尔值bool,判断集合中是否所有元素都满足某一条件,通俗一点说,就是每一个元素,均符合同一个条件,它才返回真,不然返回假. 举列,创建一个model: source code: nam ...

  7. HTML 5 Web 存储

    HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储sessionStorage - 针对一个 session 的数据存储 html5 web sto ...

  8. 孙鑫MFC学习笔记5:文本显示

    1.CreateSolidCaret添加一个插入符 参数:宽度,高度 如果设为0,就设为默认窗口边界的宽度和高度 2.GetSystemMetrics获取默认窗口边界的宽度和高度 3.Caret在创建 ...

  9. Java递归列出所有文件和文件夹

    package file_op; import java.io.File; public class file_list { static int n =0; /** * @param args */ ...

  10. all requires API level 3 (current min is 1)问题的解决

    几次出现了all requires API level 3 (current min is 1)的错误,后来发现解决的方法是右键单击项目文件夹,选择Android Tools->Clear Li ...