动画 #

当一个事件被触发时,Principle 会在当前画板和该事件的目标画板之间进行动画过渡。

自动动画 #

如果不同画板上的两个图层有相同的名称,Principle 将在过渡期间自动在它们之间制作动画。如果在源画板和目的画板上都没有同名的图层,该图层将没有动画。

animate 面板将显示在源画板和目的画板上都有名字的图层的动画属性。如果我们在画板 1 上有一个名字相同的图层,定位在(x:0, y:0),画板 2 在(x:0, y:50)。animate 面板会显示 y 属性的动画信息,但不会显示 x 属性。

自定义动画 #

默认情况下,所有动画的持续时间为 0.3 秒,并使用 iOS 和 OSX 中默认的缓动曲线。Animate 视图是你可以自定义的地方。点击画板上方的过渡箭头将显示 Animate 视图,其中列出了所有将被动画化的属性和改变时间和缓动的时间线。

关键帧 #

Animate 视图中的每一行都显示两个关键帧,一个代表动画的开始时间,另一个代表结束时间。拖动这些关键帧可以改变动画的延迟和持续时间。

曲线 #

缓动曲线决定了一个属性的动画化速度:它是否缓慢移动,然后加速?它是否快速地摇摆到最后,然后逐渐放慢到停止?像这样的行为是由缓和曲线控制的。

点击两个关键帧之间的蓝色区域就会显示出曲线选择器。曲线选择器有几个内置的曲线,以及所选曲线的图形。

内置的曲线与 iOS 和 OSX 中使用的曲线相同。在任何时候,都可以通过拖动预览中的手柄来调整曲线,或者在弹出窗口的底部输入手柄的新坐标来调整。

弹簧动画 #

弹簧动画可以通过在曲线选择器中选择 “Spring” 来使用。这对增加图层的物理性和趣味性很有用,但不应该过度使用。曲线选择器有弹簧的张力和摩擦力的选项。弹簧动画没有一个结束的关键帧,因为弹簧动画的结束时间将由物理模拟决定。你可以通过改变张力和摩擦力的值来间接地改变弹簧动画的持续时间。

冻结属性 #

有时,在转换过程中,保持前一个画板的属性值是很有用的。Principle 称这些类型的属性为 “冻结”。你可以通过点击动画面板中的雪花图标来冻结一个属性。冻结一个属性可以防止它在转换过程中触发变化,并因此而产生动画。冻结的属性可以用来记住其他画板上的东西,比如滚动偏移量、可拖动层的位置,或者一个组件所在的画板。Principle 默认冻结了 Scroll X 和 Scroll Y 属性,以便在画板之间保持滚动位置。如果你需要一个事件来滚动到一个特定的位置,你可以解冻 Scroll X 和 Y。

动画是共享的 #

每个过渡的动画信息都存储在过渡的目标画板中。这意味着所有前往某个特定画板的过渡都有相同的动画设置。例如,如果你在从画板 A 到画板 B 的过渡中使用弹簧动画,那么从画板 C 到画板 B 的过渡中也会使用弹簧动画。