#yyds干货盘点#前端开源动画库Lottie

最开始前端开发动画时会使用gif图，但是从前端性能的角度来说，gif有以下弊端：

1. GIF 图片保存了每一帧的内容，因此造成图片很大；为解决图片过大的问题，大多数情况下都会采用压缩的方式较小体积，但这也造成了动画模糊、失真；
2. 用户无法直接与动画本身做交互，如停止、开始、加速等交互，也无法直接修改动画元素的属性如背景色等；

既如此，那就再引入一种新的技术方案 ​​Lottie​​ 。

​

Lottie

什么是 Lottie

Lottie 是 Airbnb 发布的一款开源动画库，它适用于 Android、iOS、Web 和 Windows 的库。 它提供了一套从设计师使用 AE（Adobe After Effects）到各端开发者实现动画的工具流。

简单来说就是 UED 和开发各司其职，UED 提供动画 json 文件即可， 开发者就可以直接运用在 iOS、Android、Web 和 React Native之上，无需其他额外操作。

今天对如何设计动画不做详细介绍，只是从前端的视角出发看看如何使用 Lottie，实现精致的动画。

Lottie-Web

Lottie-Web 是 Lottie 在 web 端的技术方案。

Lottie-Web 提供了 SVG、Canvas 和 HTML 三种渲染模式，一般使用 Svg 或 Canvas 即可。

1. SVG 渲染器支持的特性最多，也是使用最多的渲染方式。并且 SVG 是可伸缩的，任何分辨率下不会失真;
2. Canvas 渲染器就是根据动画的数据将每一帧的对象不断重绘出来;
3. HTML 渲染器受限于其功能，支持的特性最少，只能做一些很简单的图形或者文字，也不支持滤镜效果。

使用

安装依赖

npm i lottie-web --save 
or 
yarn add lottie-web --save

复制代码

实例化

以下方法提供了一个简单的初始化过程，其他参数可参考 ​​官网​​ 。

function init(){
    // 读取动画容器
    const lottieContainer = document.querySelector("#container");
    if (!lottieContainer) return;
    // 实例化
    const lottieInstance = lottie.loadAnimation({
        // UED 提供的 动画的 json 文件
        path: 'https://static-cdn.canyuegongzi.xyz/lf20/lf20_jv0xz0qi.json',
        // 渲染方式
        renderer: "svg",
        // 是否循环
        loop: true,
        container: lottieContainer
    });
}

动画控制

开始、结束动画

// 开始动画
function onStart() {
    lottieInstance?.play();
}

// 结束动画
function onStop() {
    lottieInstance?.stop();
}
复制代码

速度修改

// 修改动画播放速度
function updateSpeed(val: number) {
    lottieInstance?.setSpeed(val);
}
复制代码

Lottie-Web 提供了相当丰富的 Api 此处借花献佛从网络拷贝了一份常用的如下，其他的可参考官网。

1. animation.play()：播放，从当前帧开始播放；
2. animation.stop()：停止，并回到第0帧；
3. animation.pause()：暂停，并保持当前帧；
4. animation.goToAndStop(value, isFrame)：跳到某个时刻/帧并停止（isFrame（可省略，默认false：毫秒；true：帧）指明value的单位是毫秒还是帧）；
5. animation.goToAndPlay(value, isFrame)：跳到某个时刻/帧并播放；

animation.goToAndStop(30, true)     // 跳转到第30帧并停止
animation.goToAndPlay(300)          // 跳转到第300毫秒并播放
复制代码

6. animation.playSegments(arr, forceFlag)：以帧为单位，播放指定片段（arr可以包含两个数字或者两个数字组成的数组，forceFlag表示是否立即强制播放该片段）；

animation.playSegments([10,20], false)          // 播放完之前的片段，播放10-20帧
animation.playSegments([[0,5],[10,18]], true)   // 直接播放0-5帧和10-18帧
复制代码

7. animation.setSpeed(speed)：设置播放速度，speed为1表示正常速度；
8. animation.setDirection(direction)： 设置播放方向，1表示正向播放，-1表示反向播放
9. animation.destroy()： 删除该动画，移除相应的元素标签等。

生命周期

Lottie-Web 提供了几个比较使用的生命周期钩子函数，开发者可根据需要做定制开发：

1. data_ready：动画数据加载完毕；
2. config_ready：完成初始配置后；
3. data_failed：当无法加载动画的一部分时；
4. loaded_images：当所有图像加载成功或错误时；
5. DOMLoaded：将元素添加到DOM时。

animation.addEventListener('data_ready', () => { 
    console.log("data_ready")
});