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

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


第二波更新啦,整体来说会比上一期简单一些,更多的是使用效果和预设中的效果来制作,希望我的思考可以带给大家一些灵感~


继续开始!


1667535370368054_2.jpeg



二十五、旋转褪色


原理:旋转与不透明度结合。


步骤:新建合成,绘制一个矩形并为旋转和不透明度添加关键帧,然后复制矩形,将旋转角度改为90°,透明度为0,在20f的位置将上矩形旋转角度改为180°,下部矩形旋转改为90°,不透明度进行调换,最后为整体关键帧添加缓动并调节运动速度。


拓展应用:可用文字或其他图案形状来替换矩形,可增加多个属性结合当前效果。


1667535370221034_3.jpeg


1667535370512030_4.gif



二十六、滑动切换(幻灯片)


原理:通过路径使形状变形,并通过序列图层进行调整。


步骤:新建合成,绘制矩形(勾选贝塞尔曲线路径),选择上部两个瞄点,向右侧倾斜,然后复制矩形,像矩形2向左侧移动使矩形右侧边贴合原矩形左侧边,在1S时为两个矩形的位置和不透明度添加关键帧,然后在0S时将形状图层2的位置向右上方调节(形状图层1的位置向左下方),然后将不透明度调整为0,因为最终效果是先在中间,然后走开,在回来,所以要讲整体关键帧向后移动,复制最后一帧的关键帧粘贴到最前方并为整体关键帧添加缓动修改运动速度。选择设置好关键帧的两个图层进行复制并将图层顺序移动到上方,选择复制好的图层的所有关键帧向右移动(重复操作多次,左侧也是相同方法),调整图层的顺序(右侧-左侧),然后从下至上选择全部图层,然后选择动画-关键帧辅助-序列图层(时间选择8S其他数值也可以),然后将时间调到0秒并补全关键帧,把全部图形添加预合成,然后绘制一个正矩形作为遮罩。最后讲时间调节到合适位置也可以放大缩小预合成。


拓展应用:可以将正矩形遮罩改为文字或者其他的图形均可。


1667535370330808_5.jpeg


1667535371595396_6.gif




二十七、查找边缘


原理:效果和预设中的马赛克与查找边缘结合。


步骤:新建合成,新建六边形,在效果和预设中找到风格化-马赛克并添加在六边形上,增加水平和垂直的数量,然后在效果和预设中找到查找边缘并拖拽到六边形上,为与原始图像混合添加关键帧。最后为所有关键帧添加缓动。


拓展应用:可以结合其他效果联合使用,强化边缘。


166753537198578_7.jpeg


1667535371582847_8.gif




二十八、涂写


原理:效果和预设中的涂写。


步骤:新建合成,绘制一个正矩形并为矩形添加蒙版,然后在效果与预设中找到生成-涂写并为正矩形添加,调节涂写里的参数到合适数值,为起始和结束属性添加关键帧(如下图),然后为所有关键帧添加缓动,然后将摆动类型改为静态。


拓展应用:可以将六边形改为其他形状或者文字都可以使用涂写的效果。


1667535371359244_9.jpeg


1667535372164679_10.gif




二十九、百叶窗


原理:效果和预设中的百叶窗。


步骤:新建合成,绘制一个矩形,在效果和预设中找到过渡-百叶窗并为矩形添加此效果,为过渡完成添加关键帧,然后复制矩形移动关键帧,调节角度和位置删除不需要的部分,并为所有关键帧添加缓动并调节运动曲线。


拓展应用:也可在文字里设置百叶窗的效果。


1667535372181285_11.jpeg


1667535372364387_12.gif

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

使用微信扫一扫登录

“乐魔UI”

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