Lottie中渐变透明的实现研究

天津/设计爱好者/6年前/3261浏览
Lottie中渐变透明的实现研究
NorthSea

再次通过修改源码,实现完美带透明通道的渐变效果。附源文件

前言

你好,看这篇的小伙伴原来你们还在做动效。肯定是被老板逼得23333(摸头)。你选择了Lottie输出说明我们志同道合(微笑)Lottie社区最近也更新了官方中文,未来形势一片大好。

诚惶诚恐,上一期教程意外获得好评(虽然也不算很多),本期教程将为您带来大家迫切想知道的Lottie动画渐变填充中附带透明通道的实现方法。


《Lottie中渐变填充的实现研究》

如果你不知道我讲的什么请自行查询上篇文章。如果不知道Lottie是啥,请自行点击窗口右上角,咳咳。


准备工具

老三样,值得注意的是Bodymoivn最新版本为5.5.2,支持了更多的表达式,强烈推荐更新。


在AE中制作一个渐变填充的矢量小球


同样,为了方便讲解,这里就不加任何动效了。圆大小400px,这次做了三个渐变色,红黄蓝(因为换算成RGB时候比较简单)。

这里我们要将黄色消失,所以放在第一位了。(经过多次尝试,被消失的颜色要放在第一位,大家只记住这个结论拿来用就好。)不必非要在AE渐变填充中设置透明度之类的,因为导出json不支持没啥用。

起始点请设置为[-15,215],结束点为[-294,-98]。

这是本期的第一个重点,消失色放在第一位,然后通过调节起始结束点控制方向


生成json直接用VS code打开


“椭圆路径 1”后面的出现的 [0,1,1,1,1,0,0,0] 数组,修改成[0,1,1,0,0.5,1,0,0,1,0,0,1](黄/红/蓝),并将"p"值修改成3(因为是三个渐变色,不清楚怎么来的请查询上篇教程),"s""e"值不要动。


上传预览我们看一下,没啥问题,一如既往的帅气。



重点从这里开始


哒哒,是不是很神奇~


大功告成了~


以上是我 Lottie 的一些作品,还有一些在服役没公开。

祝 Lottie 社区越来越好!


51
Report
|
65
Share
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
大家都在看
Log in