动效设计Principle:动画介绍

Principle教程 夜雨 172℃
动效设计软件Principle,可以用来制作非常优秀的动画,我们就来看看这款软件中用哪些因素实现动画吧。

1.动画在软件中实现的原理

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

2.关键帧

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

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

3.动画曲线

当汽车从A点驾驶到B点时,司机可以选择平稳驾驶,也可以选择先加速后减速,也可以选择高速起步临近终点再慢下来,这个驾驶过程就好比动画曲线。在动画中,控制“驾驶”过程的背后,就是动画曲线在起作用。关键帧中间有一个“Default(默认)”的英文单词,点击它,就会出现一个包含所有动画曲线的弹层,Default默认被选中,拖动曲线的小蓝点,可以调整曲线的弧度,也可以在下方XY的输入框中输入参数,这些参数是需要给到前端实现的,我们后面会讲述。
每种动画曲线的效果都不同,简单的Default(默认)曲线,是一条平稳过渡的曲线;复杂的Springs(弹性)曲线,模拟了弹簧的震动和阻尼效果,还提供摩擦力系数的选项;Linear(直线)曲线是直线变化的效果,后面标记的表情也告诫我们不要用。

转载请注明:爱交互 » 动效设计Principle:动画介绍

喜欢 (1)