首页 » 前端 » 正文

“前端”背后刀–Lottie

最近一个项目中UI同学给了我一个json文件,说可以用lottie操作,完成一个动画——哇?!设计同学都这么牛了吗!
话不多说,按照惯例,先上代码图:

lottie

代码不难,就是引用一个库文件,然后初始化,文章末尾附上了比较官方都手册,其中的animationData可以换成path,定义一个在线路径,这样可以在打包的时候减少包的大小,而且还可以随时到服务器上去更新,而我去写一个动画,偶尔还有兼容问题,比如z轴翻转卡片,但是用这个就没有这个问题,挺不错的(我就问,前端同学慌不慌)

不过呢,我不想用,首先一个原因就是为了用lottie,导致我需要引用一个库,会增加我的包大小,虽然可以用外链或者分包来处理,但是如果页面只是简单用到这个,那我其实并不太认同,而且UI同学说,这个只能用在一些简单动画里(因为我后来想把其他动画过程都用这个库来解决,减少雪碧图和css3的耦合)关于这个问题我没去验证,毕竟这个东西是纯依赖设计同学出文件了。

另外,还有一个问题,是这个只能针对一个容器操作,而多个相同的类是不行的,以至于我要多次实例化同一个动画,而我在项目中的使用场景:随着时间进度,未开启的宝箱有动画,已开启的或者已过时的宝箱无动画,用户在当前页面等待或者操作,需要更新状态,我需要一开始就把实例化的动画存储下来,需要变动的时候,先销毁所有动画(lottie有destory方法),然后重新遍历。占用了包,也占用了内存,而且本来我改一个状态class的事,现在要复杂操作,如果只是一个两个动画,实在没必要用,而如果多个动画,随着用户操作,这些动画可能需要不停的更改操作,总觉得有点得不偿失。

仁者见仁,大家拿来看看也可以的。

参考:https://www.yuque.com/lottie/document/web