动画

当触发事件时,Principle 会自动创建两个画布之间的补间动画。

动画地图 Animation Mappings

如果一个图层部件在两个画布中名称一样,Principle 就认为这两个部件是同一个,继而根据这个部件的位移等属性变化创建补间动画。反之,如果在两个画布间没有图层部件名称相同,画布切换时部件就会突然消失或显示。

预设动画曲线 Custom Animations

动画的默认持续时间是 0.3秒,默认曲线是 iOS 和 OSX 中使用的曲线。在动画视图(Animate)中可以调节设置。点击两个画布顶部的箭头显示该转换的动画视图,可以生成动画的图层部件及其属性以列表显示,在这个时间轴可以调节动画持续时长、出现时机和动画曲线。

关键帧 Keyframes

在动画视图中,每条时间轴有两个关键帧,一个代表动画开始时刻,另一个是结束时刻。拖拽关键帧可以改变动画持续时间,拖动选区或用 Shift 可以批量修改。

缓和曲线 Easing Curves

缓和曲线决定了以下动画相关属性的速率:移动会不会从慢逐渐变得越来越快?或是开始非常快,但接近终点时突然又变慢了?以上现象就是由缓和曲线去控制的。

在动画视图中点击时间轴右侧的下拉菜单,菜单中显示了预设的几种曲线,点击曲线名称可以在坐标轴里查看图形。

预设的几种曲线跟 iOS 和 OSX 使用的一样。你可以随时调节预设的曲线:拖动曲线的两个手柄,改变长短和角度,或者在下方直接输入坐标都可以自定义动画曲线。自定义曲线不会抹掉预设曲线,可以大胆使用。

弹性曲线 Springs

弹性曲线模拟了物理弹性,和固定曲线那种从开始和结束的属性数值做渐变不同。它可以把一个元素的运动变成生动活泼。但也不能滥用,因为它会吸引人的注意力而打断思路。动画曲线的属性会根据持续时间自动的调节,所以只需微调关键帧即可改变动画的强度:越长力度越小,软绵绵;越短力度越大,干脆弹力十足。

可选择的属性 Optional Properties

动画视图中,图层名字后面有个绿色/红色方块。它可以切换是否允许一个属性在两个页面动画过度后变化。说白了,它把一个属性从上一个画布搬运到目标画布。This is useful when applied to a draggable layer to leave its position unaltered.(暂时没用过这个功能不知道如何解释,以后更新)