动效周期表设计原理解析-01

1460天前
转载文章 / UI / 动效设计 (本文章为转载文章,如果若您的权利被侵害,请联系管理员删除的)
10447
0
13
 | 
作者:凌旬


动效周期表是由日本设计师 Kazuki Akamine按照基础动效的特点属性,把他们分成了大家所熟悉的类似元素周期表的形式。


1666857366978958_2 (1).gif


在AE软件中有很多效果预设插件,都值得我们去思考探索,日本设计师Kazuki Akamine编写了动效周期表涵盖了大部分常用效果,把里面的动效逐一解析,更易于对AE软件的学习以及动效的应用。大家可以先看原理,然后尝试制作,下面也都配有相应效果的制作步骤,当然,方法不唯一,大家可以广开脑洞去实现不同的拓展应用。

让我们开始吧!


166685949925186_0.jpeg


一、轨道旋转(在轨道上旋转对象的运动)


原理:移动锚点属性使物体与锚点产生距离,为旋转属性添加关键帧或表达式。


步骤:新建合成,绘制一个圆形,取消填充,保留描边,可将图层命名为圆轨道,其次绘制一个小圆形,保留填充,取消描边,将小圆与

圆轨道呈同心圆的状态,中心点一致,然后修改小圆的锚点,使小圆圆心在圆轨道上边缘点的中心上(为保证中心点一致,此处不要移

动位置而是修改锚点,因为旋转是以中心点的位置进行的),接下来设置关键帧,在0S时将旋转属性添加关键帧,在2S时,将旋转属性

设为360度也就是刚好小圆绕圆轨道一圈(可以通过调整时间的长短来控制小圆的旋转速度)。也可以采用表达式的方法来制作轨道旋

转,在上述方法的基础上删除关键帧,按住ALT键同时在小圆的旋转属性前面的码表上单击鼠标左键,为此添加表达式,将表达式改为

time*180(意思为每秒钟旋转180度)这样2秒会旋转360度为一圈,即可呈现出轨道旋转的效果。


拓展应用:可将小圆复制多个,修改不同小圆中表达式的度数值,来实现雷达的效果,也可能将小圆替换成星球,月亮太阳等图形。


1666857366860693_4.jpeg


1666857367543137_5 (1).gif


二、偏移(运动沿着形状的路径旋转)  


原理:调节描边的虚线属性以及修改偏移的数值


步骤:新建合成,双击多边形工具绘制出五边形,在属性-点中改为6,将图形变为六边形,打开描边属性,修改描边粗细,线段端点可改为方头端点,线段连接可改为圆角连接,打开虚线,点击加号,将虚线数值改为100(可根据想达到的效果字行调整数值),然后给偏移属性添加表达式为time*360(意思为每秒钟旋转360度),即可呈现出运动沿着形状的路径旋转的形态。


拓展应用:可设置内框,外框,内部图形,调整它们的虚线间隙或者将六边形换成其他图形等。


1666857367669606_6.jpeg


1666857367769032_7 (1).gif


三、勾画(沿着路径跑光的效果)


原理:为纯色层添加蒙版,为蒙版路径添加勾画效果。


步骤:新建合成,新建一个白色纯色层,选中纯色层绘制正矩形即为纯色层添加蒙版,在效果和预设中找到勾画,将勾画拖拽到纯色层中,在FX勾画中将描边选择蒙版和路径,路径里选择我们画好的矩形即蒙版1,片段属性改为4(需要X条线就改为X),混合模式选择透明,颜色,宽度以及硬度可根据需要自行调节,然后为旋转设置关键帧,在0S时将旋转属性添加关键帧,在2S时,将旋转属性设为360度也就是一圈。


拓展应用:可用钢笔绘制蒙版,做出心电图波动的状态,或多个形状组合成旋转的轮胎等等。


1666859843252162_0.jpeg


1666857367839674_9 (1).gif



四、循环


原理:偏移效果的调节。


步骤:新建合成,新建六边形,在效果和预设中找到扭曲下的偏移,将偏移拖拽到六边形上,然后为FX偏移中的“将中心转换为”这个属性加关键帧,在0S时添加关键帧,在1S15f时,把将中心转换为属性的X值改为1204(可根据合成大小以及六边形大小自行调节,让六边形重合的数值即可),将工作区切到1S20f,给六边形一个稳定的时间,此时预览,六边形会呈现匀速运动,可打开图标编辑器,改变匀速运动为先加速运动后缓慢停下的运动轨迹,然后所有关键帧设置缓动(选择关键帧按F9键或选择关键帧,然后菜单栏找到动画-关键帧辅助-缓动)。


拓展应用:可做UI界面滑动效果,长条过渡,循环效果等。


1666857367656726_10.jpeg


1666857367250836_11 (1).gif



五、砖瓦匠(平铺)


原理:为纯色层添加蒙版,为蒙版路径添加CC Tiler 。

步骤:新建合成,新建白色纯色层,为纯色层建立一个矩形蒙版,然后在效果和预设中找到扭曲下的CC Tiler,将CC Tiler拖拽到纯色层上,可以看到有三个属性,scale为缩放,Center中心点,Blend w.Original为与原始图像的混合程度,在0S时为scale添加关键帧,然后在3S时把scale数值调到10%,这样就可以实现由一到多的平铺的效果,然后在3S时为Blend w.Original添加关键帧数值为100%。将时间标尺向前移动10f,将Blend w.Original的数值改为0,这样整体就有了循环衔接的感觉,最后为关键帧加上缓动。


拓展应用:可替换其他形状,或一些图片来尝试做出更多有趣的效果。


1666857368411060_12.jpeg


1666857368598186_13 (1).gif



声明:乐魔UI(Lemooui)内网友所发表的所有内容及言论仅代表其本人,并不反映任何UI(Lemooui)之意见及观点。
举报
收藏
文章-动效设计
10447
0
13
标签
全部评论
发表评论
设置密码
注册会员
我已阅读并接受《乐魔UI协议》
微信登录
二维加载中...

使用微信扫一扫登录

“乐魔UI”

建议反馈
提交取消
举报
提交取消