背景
原本动画效果是用AE导出的序列帧实现的,但是在做包体积优化的时候被嫌弃占用体积过大,最后决定用代码实现部分动画。
以下动画是整体效果中的一部分,需要用到AE缓动曲线的是其中的放大动画。
一、为什么需要从AE获取缓动曲线
Flutter官方是提供了很多常用动画缓动曲线,在Curves类中可以看到,官网上也可以看到各种缓动曲线的预览效果。
但是在实际开发中,偶尔会遇到预置的缓动曲线无法实现的动画效果,这个时候就需要通过Cubic类来实现自定义的缓动曲线。
从Cubic类中的_evaluateCubic方法可以知道,构造函数中的4个参数是在实现一条贝塞尔曲线,而这条贝塞尔曲线就是缓动曲线。那么现在就需要从AE中获取到我们需要的这4个参数了。
二、如何从AE获取缓动曲线
这部分会者不难,但是对于没有接触过AE的人来说就很麻烦了,或者说如何让视频设计师提供到缓动曲线需要的参数很困难。
1.显示动画曲线。
默认打开AE工程右下角显示的应该只是时间段而不是曲线值。
2.显示缓动曲线。
上图显示的是速度值曲线,但实际上我们生成Cubic实例需要的是动画值曲线,这条曲线才是我们需要的缓动曲线。
3.获取曲线值。
这个需要通过脚本来实现,推荐使用Get Bezier脚本来获取。下载脚本后,在AE中通过:文件 -> 脚本 -> 运行脚本文件,选中脚本文件,然后选中对应的动画效果,按快捷键(ctrl+alt+shift+d)就会显示曲线值了。
4.验证曲线值
获取到值之后,如果想要校验一下曲线值是否与AE中曲线一致,推荐一个网站cssportal,在其中可以输入获取到的值,网站会显示值对应的曲线。
验证也可以发现一些问题,比如第2和第4个值同样是NaN,但是实际一个值是0另一个是1。