动效设计Principle：动画介绍

当两个画板之间的事件被成功触发时，Principle会为名称相同的图层自动补全过渡动画效果，这个点非常关键，如果制作成功后，看不到对应的动画效果，务必检查两个画板之间的图层名称是否相同。看下图中的例子，画板1和2的矩形图层名称相同，都是“Layer”，第二个矩形透明度设置为30%，目的是矩形触发事件时颜色变淡，我们拉一个点击事件，当点击事件触发时，Principle会自动为两者补全一个变淡过程的动画。

另外，这个默认的动画参数是可以被修改的，这里就会涉及到关键帧和动画曲线两个概念。

在动画中，一帧就是一幅停止的画面，连续播放帧就形成了动画，在Principle中，我们可以控制帧的播放时间，这就是所谓的关键帧。点击事件的带箭头直线，在工作区下方就会出现一个动画面板，右侧时间轴有一个蓝色的条，就是我们所说的关键帧，蓝色条左侧的菱形代表关键帧的开始时间，右侧的菱形代表关键帧的结束时间，系统默认的动画效果持续时间是0.3S，我们可以拉长关键帧的长度，来增加动画效果的持续时间。

另外，在时间轴上向右拖动关键帧，可以延迟动画发生的时间，左侧对应的Opacity（透明度）就是动画要实现的效果，点击雪花图标，可以冻结当前的动画效果，这个图标还是挺形象的。

当汽车从A点驾驶到B点时，司机可以选择平稳驾驶，也可以选择先加速后减速，也可以选择高速起步临近终点再慢下来，这个驾驶过程就好比动画曲线。在动画中，控制“驾驶”过程的背后，就是动画曲线在起作用。关键帧中间有一个“Default（默认）”的英文单词，点击它，就会出现一个包含所有动画曲线的d层，Default默认被选中，拖动曲线的小蓝点，可以调整曲线的弧度，也可以在下方XY的输入框中输入参数，这些参数是需要给到前端实现的，我们后面会讲述。

每种动画曲线的效果都不同，简单的Default（默认）曲线，是一条平稳过渡的曲线；复杂的Springs（d性）曲线，模拟了d簧的震动和阻尼效果，还提供摩擦力系数的选项；Linear（直线）曲线是直线变化的效果，后面标记的表情也告诫我们不要用。

推荐阅读：

Principle中文手册： Principle中文手册（2019）

“拖动”是卡片式设计中一种常见的交互，属于“即时交互”。即时交互指的是在 *** 作进行的时刻即有反馈，非即时交互则是在人的 *** 作结束后物体才有反应，比如按钮的点击、卡片翻转等。

在实际的设计中，很多地方会用到“拖拽”的手段给用户带来更佳的效果，可以说，在拖动启动的一瞬间，用户就明白了这样 *** 作的结果，同时，他也可以“反悔”——放回原处，这样就可以防止误解和 *** 作失误，增加了产品的容错性