调整转场时间

控制转场里各元素的时间非常重要。好的转场通常能很快将足够的动作展示给用户并向他们传递“什么重要”或帮助他们建立“这个APP发生了什么”的心理模型。

调整时间的方法

弹性函数

Flitno提供了两种弹性函数可以供您选择

UIKit

利用这个弹性函数参数匹配Apple的UIKit弹性函数参数可以让开发人员更简单的用Flinto for mac的弹性函数去设计运动轨迹

这个图表表示他们在Flinto for mac的名称和他们的uikit对应的参数值

Flinto for MacUIKit
阻尼阻尼相关的弹性函数
速率弹性函数的初始速率
持续时间持续时间


例如您设置阻力0.8,速度0,持续时间300毫秒,这就是实际UIKit API调用的样子:

UIView.animateWithDuration(0.3,
                    delay: 0,
   usingSpringWithDamping: 0.8,
    initialSpringVelocity: 0,
                  options: nil,
               animations: { // move layers, change opacity, etc },
               completion: nil)

RK4

一个看起来自然的弹性可以更加直观的去修改它。Flito for mac为开发者们提供了一个开源的Swift迅速实现算法用来配合mac版Flinto里的弹性值。

弹性函数选项创建了一个在转场动画中帮助图层创建真实的“物理”运动的虚拟的弹性。函数图表显示了弹性运动的预览以及会随您改变张力、摩擦和速率的值更新。

传统函数

传统函数提供一个直方的贝塞尔曲线定义了图层的释放方式。您能选择一个我们预置的曲线或者拖动手柄去直接修改它。

图表显示表现了动画完全完成的时间。如果一开始这条线向上走势的比较陡峭,然后变得平缓,那么动画一开始会运动的很快速,然后慢下来。如果这条线笔直地从一个角落到另一个角落,这个图层将会运动在一个恒定的速度上。如果这条线一开始比较平缓,然后逐渐变得陡峭,图层将会缓慢的运动然后速度渐渐增加到最后。

持续时间在毫秒级可以精确地决定动画播放完整需要多长时间。

毫秒:在1秒钟里有1000毫秒。所以500毫秒是半秒,250毫秒是四分之一秒。

延迟

当您使用弹性函数或传统函数的时候,您可以设置一个毫秒级的延迟。动画将会在您指定的时间开始。

默认函数

每当您改变函数或当您修改下一个图层的时候,确定的数值将会变成默认的。这使得在大量的图层间很容易保持统一的函数

拷贝函数数值

在函数检查器下面您将注意到一个有数值的文本字段如bezier(0.42 , 0, 0.58, 1).。这是您可以拷贝粘贴的弹性曲线文本表达式。粘贴这个数值到其他图层,将会改变它的函数值以匹配效果。