甲虫课堂 > AE教程 >

ae如何运用Lottie库让动效落地

阅读
2021-05-08 17:20:36

使用ai软件新建一个800×600大小的文件 并且把动效中出现的几个图标分别采用描边的方式绘出,并且叠在同一区域,

ae如何运用Lottie库让动效落地

保存ai文件,然后打开AE软件双击导入ai文件并且转为预合成

ae如何运用Lottie库让动效落地(1)

操作窗口选中文件右击选择“从矢量图层创建形状”

ae如何运用Lottie库让动效落地(2)

点击“聊天”轮廓前面的小箭头展开形状图层

ae如何运用Lottie库让动效落地(3)

点击“添加”修剪路径

ae如何运用Lottie库让动效落地(4)

点击“修剪路径”前面的箭头展开操作区 在0s的位置添加开始关键帧0%在1s位置添加开始关键帧100%,当前“聊天图标”便可以通过修剪路径的方式实现想要的动效效果

ae如何运用Lottie库让动效落地(5)

动效做完了。

在AE中来安装Bodymovin插件,用于导出开发所需要的json文件,

ae如何运用Lottie库让动效落地(6)

提示安装成功之后,并在AE软件首选项_常规中“在允许脚本写入web脚本和访问网络”打钩。安装之后在窗口_扩展中找到Bodymovin插件

ae如何运用Lottie库让动效落地(7)

先选中要导出的动画其次点击设置图标

ae如何运用Lottie库让动效落地(8)

在设置页面勾选两项后选择保存

ae如何运用Lottie库让动效落地(9)

然后点击渲染动画,显示100%就成功了

ae如何运用Lottie库让动效落地(10)

此时在桌面生成html预览文件这个可以用浏览器打开可以看到预览的效果,其次生成一个json文件这个是交给开发的。

ae如何运用Lottie库让动效落地(11)

点击展开更多
相关教程
相关评论
X
0条回复

全部回复

回复...
X
X
写评论...
0
更多
X