vue3 给底座添加流光动画效果

AE动画 yekong

数据可视化大屏 项目开发中,经常会遇到各种底座装饰,但是只有底座装饰客户并不满意,客户还想给底座增加点动画效果,让底座看起来更加酷炫,今天我们来用ae给底座增加一个流光效果。

vue3 给底座添加流光动画效果

动态流光效果

打开ae

首先打开ae,将我们的图片添加的ae中。

添加图片

添加图片

添加纯色图层

在上面的透明状态下,我们看图片会看不太清,所以我们来增加一个纯色图层背景让我们更清晰的查看图片。我们右键新建选择纯色图层,这里我们选择黑色来实现我们想要的效果。

添加纯色图层

添加纯色图层黑色图层

到这里这个底座我们就可以清晰的看到了。

添加纯色图层-黑色背景

钢笔工具勾画

我们选择钢笔工具进行勾画,将上面这个比较清晰的菱形勾画出来。

钢笔工具勾画

添加saber

我们选择效果 - Video Copilot - Saber来添加我们想要的效果,这个插件需要单独安装

添加saber

进行如下配置

首先

找到渲染设置-合成设置选择添加

自定义核心

找到核心类型 选择图层遮罩

开始偏移0 开始大小0 结束大小20 结束偏移 20 然后遮罩演变里勾选前面的秒表图标。

进行如下配置

打上秒表,开始设置为0,结束设置为1,这里我设置的时间是3秒,3秒循环一周。

1700529892334qRSTMA

动态效果

到这里动态效果就基本实现了,接下来我们导出图片

首先要删掉我们上面创建的纯色图层,避免导出时,连带着纯色图层也导出来了。

添加渲染队列

在合成-选择添加渲染队列

添加渲染队列

配置导出

这里 我们点击输出模块,选择格式png序列 选择通rgb+alpha ,这样导出的图片才会是背景透明的图片。

配置导出

然后配置输出目录,进行输出。

最后点击右侧的渲染按钮渲染出来。

收获序列帧图片

到这里我们就收获到了我们需要的序列帧图片

接下来我们可以通过图压来对图片进行压缩,最好是单独复制一份出来进行压缩,然后对比一下看看大小以及清晰度是否受到了影响。

收获序列帧图片

然后我们可以在网页中渲染序列帧图片,也可以通过工具iSparta将图片转为apng格式的图片直接渲染。

源文件下载

相关文件下载地址
此资源需支付 ¥2 后下载
支付宝购买扫右侧红包码购买更优惠,如无法下载请联系微信:17331886870
喜欢
vue3 给底座添加流光动画效果