IT序号网

前端动画lottie-web知识解答

wyy 2021年05月25日 编程语言 147 0

lottie是一个跨平台的动画库,通过AE(After Effects)制作动画,再通过AE插件Bodymovin导出Json文件,最终各个终端解析这个Json文件,还原动画。本文中我只介绍前端用到的库lottie-web。

对比三种常规的制作动画方式

  1. Png序列帧
  2. 2.Gif图
  3. 前端Svg API

先对位图与矢量图有一个基本的概念。

矢量图就是使用直线和曲线来描述的图形,构成这些图形的元素是一些点、线、矩形、多边形、圆和弧线等,它们都是通过数学公式计算获得的,具有编辑后不失真的特点。
位图是由称作像素(图片元素)的单个点组成的,放大会失真。

Png序列帧

用Png序列帧是也容易理解,用css keyframes操作每一帧需要展示的图片,缺点也很明显,每一帧都是一张图片,占比较大的体积。当然也可以将图片合并成精灵图(Sprites Map),可参考这个方案,使用 gka 一键生成帧动画。Png也是位图,放大会失真,不过可以通过增大图片尺寸,避免模糊。

Gif图

如果之前没有用过动画,用Gif图是最简单的,只需要引入一张图。但是Gif图是位图,不是矢量图,放大会虚。

前端Svg API

Svg API对于动画初学者不太友好,你要实现一个自定义的动画,需要了解Svg的所有的API,虽然它的属性与css的动画有一些相似。它是矢量图,不失真。

lottie

而lottie是一个不太占体积,还原度高,对于初学者友好的库。设计师制作好动画,并且利用Bodymovin插件导出Json文件。而前端直接引用lottie-web库即可,它默认的渲染方式是svg,原理就是用JS操作Svg API。但是前端完全不需要关心动画的过程,Json文件里有每一帧动画的信息,而库会帮我们执行每一帧。

前端安装lottie-web插件

npm install lottie-web

代码调用

import lottie from 'lottie-web'; 
 
this.animation = lottie.loadAnimation({ 
    container: this.animationRef.current, 
    renderer: 'svg', 
    loop: false, 
    autoplay: false, 
    animationData: dataJson, 
    assetsPath: CDN_URL, 
});

介绍一个每个属性的意思。

  • container 当前需要渲染的DOM
  • renderer,渲染方式,默认是Svg,还有Html和Canvas方案。
  • loop 是否循环播放
  • autoplay 是否自动播放
  • animationData AE导出的Json,注意,这里不是路径
  • assetsPath Json文件里资源的绝对路径,webpack项目需要配合这个参数。

动画的播放与暂停,如果动画需要用户触发与暂停,需要有一个切换操作(toggle)

this.animation.play(); 
this.animation.pause();

动画执行过程中的钩子,可以对动画有一定的控制权

  • complete
  • loopComplete
  • enterFrame
  • segmentStart
  • config_ready(初始配置完成)
  • data_ready(所有动画数据加载完成)
  • DOMLoaded(元素已添加到DOM节点)
  • destroy
// 动画播放完成触发 
anm.addEventListener('complete', anmLoaded); 
 
// 当前循环播放完成触发  
anm.addEventListener('loopComplete', anmComplete); 
 
// 播放一帧动画的时候触发  
anm.addEventListener('enterFrame', enterFrame);

打包时图片资源路径

webpack工程需要注意Json文件如果有图片资源(Png或者Svg),需要将文件放在项目的根目录的static下。这样打包的时候,图片会被打包,并且后缀名不会被改变,当然需要配合assetsPath这个参数,设置图片的绝对路径。而CDN的路径可以通过process.env.CDN_URL从webpack传到前端代码中。

关于源码

关于lottie源码解析,这位老哥已经分析的挺到位了,Lottie原理与源码解析。尽管lottie也一直在迭代,但是顺着这篇解析应该也能理清源码。以及Svg动画的介绍,SVG 动画精髓

参考文章

Lottie-前端实现AE动效

使用 gka 一键生成帧动画


发布评论
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

XState简介知识解答
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。