潮!有趣的Loading动效教程

用户头像
深圳/UI设计师/6年前/578浏览
潮!有趣的Loading动效教程

摸一个趣味性的Loading动效,本人也是看教程学的,后面根据自己的操作重写了教程

(效果预览)



1:新建合成800*600    24fps

 

2:用PS 绘制一个可乐瓶,将图片导入AE,调整到差不多的大小,命名为“瓶子”,位置为(284,281)右键位置——单独尺寸,将X轴和Y轴分开,方便后面的操作。


  


3:先确定整个动画的周期为56帧即(2秒8帧),以4的倍数这是为了更好的设置循环。

为“瓶子”的位置添加关键帧(为蓝色的关键帧添加缓动)


         0f               27f          30f            34f              56f

x轴:    284                                                             514

y轴:    281             281         288            281            281


4:将“瓶子”ctrl+D复制一层,命名为“瓶子mask”,选中“瓶子mask”按U调出所有关键帧,将所有关键帧删除,同时将该层链接父级到瓶子,调整缩放为(90,98%)。

同时将“瓶子”的轨道遮罩模式改为Alpha遮罩,得到一个瓶子的描边。



5:波浪制作。

新建一个和合成等宽的矩形命名为波浪,使其初始位置在瓶子的底部,对该层使用效果预设——波形变形

调节锯齿——每段脊背为54,对大小和位置打关键帧



6:复制一份波浪命名为波浪2,关掉位置的关键帧(不需要移动),调整位置和大小,错开峰值,形成波澜。

改变颜色,形成区分

并将两个波浪图层进行预合成



7:ctrl+D复制“瓶子图层”命名为“波浪mask”,同样删除关键帧,链接父级到瓶子,将缩放调节在(90~100,98~100)之间,避免遮罩出现一像素的异常。

将波浪的预合成放在“波浪mask”下面,将波浪预合成的遮罩改为Alpha遮罩。

对波浪预合成的位置打上关键帧。



8:用钢笔绘制两条横的路径(一长一短,长的是压瓶盖前,短的是压瓶盖后),一条竖的路径,横的路径定位在瓶子上方,链接父级为瓶子。



9:选中所有的图层进行预合成,然后复制成四份,选中预合成的时间轴,拖动,使每个预合成开始时间都间隔14帧。

(周期为56f,我们就可以设置每14f出现一个瓶子,所以我们可以复制好多份瓶子动画的合成,将他们错开14f,周期为56f,确保瓶子动画出现之前存在瓶子,即不要以第一个瓶子动画作为周期的初始点,将周期往后设置一下。)

 

选中预合成将时间拨放在合成时间的最后边,将超出合成的部分ctrl+shift+D切断,然后将超出的部分移至0帧处。



10:添加下方的元素,导出渲染后用PS保存为GIF



3
举报
|
8
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
【新年UI图标】汽车icon
高级感金属拟物 UI设计组件库
盲盒APP UI设计
新能源APP应用UIKit
【新年UI图标】影音icon
户外旅行飞机情侣假日出行
高级表盘系列UI源文件
钱包ui模板
Security Camera UI kit
APP/小程序商业项目UI模板|99个高保真UI+79个原型
拟物风质感写实UI卡片合集源文件
【新年UI图标】会员icon
科技医疗透明柜UI界面设计
【新年UI图标】珠宝icon
3D渐变流体抽象矢量UI背景图
UI 登录界面设计模板包
新拟态风格 UI设计组件库
【新年UI图标】30个图标
矢量立体简约UI蓝白图标
【新年UI图标】钱包icon
【新年UI图标】秒杀icon
智能家居中心 简约 UI设计组件库
UI_3D图标“一本秘籍”(源文件
登录注册