前端动画解决方案 Lottie（Web 篇）

前些天阿里蚂蚁设计开放出了一款动画设计平台——犸良，惊讶了一阵子之后发现它的底层实现借助了airbnb的Lottie库，再次惊讶之后感叹其伟大。

概念

Lottie是一个面向Android、iOS、Web和Windows的库，它解析导出为带有bodymovin的json的AE（Adobe After Effects）动画，并在移动和Web上以本地方式呈现这些动画。

官网：http://airbnb.io/lottie/
社区：https://lottiefiles.com/
bodymovin是一个用于生成供Lottie使用的json文件的一个AE插件，是给设计狮使的

官方社区至今（2019.07.18）统计：下载动画量达1304264次，可见其广泛被大家所接受。

个人认为 Lottie 的最大优势是让设计师直接参与动画开发，将动效设计和实现交给专业设计团队，而不必反复指导前端开发，也无需直接使用难维护且性能较低的 GIF/MP4。这样可以解耦动效业务，让开发和设计协作得更顺畅。

安装和使用（web）

首先是根据需求引用lottie库，官方给出的下载地址：https://cdnjs.com/libraries/bodymovin

如图所示，官网地址给出了v5.5.6的所有版本：

其中：

_light：轻量级，按官网说法，以此拓展名的库将播放导出为SVG的动画。
_canvas：以此拓展名的库用canvas动画形式展示。
_svg：以此拓展名的库用svg动画形式展示。
_html：以此拓展名的库用canvas动画形式展示。

使用

根据需求找到Lottie库后，就是该如何使用了

准备容器和动画库

首先准备渲染容器和引用Lottie库，如：

1
2
3

<div id="app"><!-- 动画容器 --></div>
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.6/lottie.min.js"></script>

并将AE导出的动画数据库(如lottie-1.json)保存在项目目录中，如assets/lottie-1.json

配置参数和渲染

如：

<script>
var animation = bodymovin.loadAnimation({
  container: document.getElementById('app'), 	// 容器，必须填
  path: 'assets/lottie-1.json', // 动画数据文件，必须填
  renderer: 'canvas', 	// 渲染形式，必须填
  loop: true, // 一直循环？，选填
  autoplay: true, // 自动播放？，选填
  name: "lottie-1", // 命名，选填
})
</script>

这样配置后的页面打开将循环播放一个动画。

这样就是最简单的使用实现了。

配置参数和方法

配置

Lottie的配置很简单，主要配置参数如下：

参数	说明	数据格式	默认值
container	渲染动画的容器元素	DOM Element	–
path	动画数据json文件的路径（和`animationData`参数二选一）	string	–
animationData	动画数据（和`path`参数二选一）	object	–
renderer	渲染方式，`'svg'`/`'canvas'`/`'html'`（轻量版仅svg渲染）	string	–
loop	（可选）动画是否循环，为数字时即控制循环次数	boolean/number	false
autoplay	（可选）动画是否自动播放	boolean	true
name	（可选）自定义动画名称	string	–

方法

配置完动画后，我们可以拿到动画实例并通过实例方法进行控制：

play()：播放动画，从当前停止帧开始
stop()：终止动画，回到第0帧
pause()：暂停动画，停止在当前帧
setLocationHref(href)：href作为location.href，当你在Safari中遇到不带符号的掩码问题时，它非常有用。
setSpeed(speed)：设置动画速度（1是正常速度）。speed参数为速度，number。
goToAndStop(value, isFrame)：动画跨越到某进度并停止。value为进度数值,number；isFrame定义第一个参数（value）是基于时间的值还是基于帧的（默认为false）。
setDirection(direction)：设置动画播放顺序（顺序播放/倒叙播放）。direction参数表明顺序，1为顺序，-1为倒叙。
playSegments(segments, forceFlag)：播放动画片段。segments参数可以包含两个将用作动画第一帧和最后一帧的数值，或者可以包含一系列数组，每个数组都有2个数值，array。forceFlag表示是否立即强制播放该片段，如果设置为false，它将等待当前段完成。如果为true，它将立即播放此片段，boolean。如animation.playSegments([10,20], false); // 播放完之前的片段，播放10-20帧、animation.playSegments([[0,5],[10,18]], true); // 直接播放0-5帧和10-18帧
setSubframe(useSubFrames)：useSubFrames参数如果为false，则将尊重原始的AE fps。如果为true，它将使用中间值在每个RequestAnimationFrame上更新。默认值为true, boolean。
destory()：删除该动画，移除相应的元素标签等。在unmount的时候，需要调用该方法
getDuration(inFrames)，获取动画持续时间。inFrames参数为true，则返回以帧为单位的持续时间；如果为false，则返回以秒为单位的持续时间。

事件

在使用中可能也需要监听一些事件：

complete: 播放完成（循环播放下不会触发）
loopComplete: 当前循环下播放（循环播放/非循环播放）结束时触发
enterFrame: 每进入一帧就会触发，播放时每一帧都会触发一次，stop方法也会触发
segmentStart: 播放指定片段时触发，playSegments、resetSegments等方法刚开始播放指定片段时会发出，如果playSegments播放多个片段，多个片段最开始都会触发。
data_ready: 动画数据json文件加载完毕触发
data_fail：动画数据json文件加载失败触发
loaded_images：当所有图片加载成功/失败时触发
DOMLoaded: 动画相关的dom已经被添加到html后触发
destroy: 将在动画删除时触发

使用如：

// 上例的animation实例
animation.addEventListener('data_ready', function () {
  console.log('animation data file has loaded');
});

更多配置可见npm lottie-web

打包及框架中使用

原生js+webpack

│  index.html
│  
├─assets
│      lottie-2.json	// 动画数据json文件
│      
└─js
    └─index
            enter.js	// 入口

其中index.html：

<!-- index.html -->
...
<body>
    <div id="app"><!-- animation container --></div>
    <div>
        <button id="play">play</button>
        <button id="pause">pause</button>
        <button id="stop">stop</button>
    </div>
</body>
...

准备了一个动画容器和三个控制按钮。

安装依赖npm lottie-web

1	npm i -D lottie-web

引用并配置：

// enter.js
import lottie from 'lottie-web'
import * as animationData from '../../assets/lottie-2.json'

// 配置
let animation = lottie.loadAnimation({
  container: document.getElementById('app'), 	// 容器，必须填
  animationData,	// 动画数据
  renderer: 'svg', 	// svg渲染动画
  loop: true, 		// 一直循环
  autoplay: false, // 不自动播放
  name: "lottie-2" // 命名，选填
});

animation.addEventListener('loaded_images', () => {
    console.log('images ready');
})

// set events
let $play = document.getElementById('play'),
    $stop = document.getElementById('stop'),
	$pause = document.getElementById('pause');
    
$play.addEventListener('click', () => animation.play(), false);
$stop.addEventListener('click', () => animation.stop(), false);
$pause.addEventListener('click', () => animation.pause(), false);

这样使用便已完成，可通过按钮控制动画。

ReactJs

│  App.jsx
│  index.js
│  
└─assets
        lottie-2.json

安装依赖（npm react-lottie）

1	npm i -D react-lottie

该库将给出一个React组件，用于渲染动画，该组件props：

options：配置参数
width: 容器宽度，number
height：容器高度，number
isStopped：是否停止状态，boolean
isPaused：是否暂停状态，boolean
eventListeners ：事件监听，array

使用及配置如下

// App.jsx
import React, {Component} from 'react';
import Lottie from 'react-lottie';
import * as animationData from './assets/lottie-2.json'

class App extends Component {
    animation = null;
    
    state = {
        isStopped: false,
        isPaused: false
    }
    
    constructor () {
        super();
        this.handlePlay = this.handlePlay.bind(this);
        this.handlePause = this.handlePause.bind(this);
        this.handleStop = this.handleStop.bind(this);
    }
    
    defaultOptions = {
        animationData: animationData.default,	// 动画数据
        renderer: 'svg', 	// svg渲染动画
        loop: true, 		// 一直循环
        autoplay: false, // 不自动播放
        name: "lottie-2" // 命名，选填
    }
    
    
    // handle play
    handlePlay () {
        this.setState({ isStopped: false, isPaused: false });
    }
    
    // handle pause
    handlePause () {
        this.setState({ isPaused: !this.state.isPaused });
    }
    
    // handle stop
    handleStop () {
        this.setState({ isStopped: true });
    }

    render() {
        return (
        <section>
            <Lottie
                options={this.defaultOptions}
                width={700}
                height={400}
                isStopped={this.state.isStopped}
                isPaused={this.state.isPaused}
            />
            <div>
                <button onClick={this.handlePlay}>play</button>
                <button onClick={this.handlePause}>pause</button>
                <button onClick={this.handleStop}>stop</button>
            </div>
        </section>);
    }
}

export default App;

注：react-lottie底层实现也是使用了lottie-web这个库，只是将其配置和渲染进行了封装，便于开发使用。可访问github react-lottie通过源码查看其实现原理。

VueJS

│  index.html
│  main.js		// 入口
│  
├─assets
│      lottie-2.json
│      
└─views
        App.vue

安装依赖（npm vue-lottie）

1	npm i -D vue-lottie

该库将给出一个Vue组件，用于渲染动画，该组件props：

options：配置参数
width: 容器宽度，number
height：容器高度，number
animCreated：注册事件，用于处理动画实例（源码：this.$emit('animCreated', this.anim)）

使用及配置如下

<!-- App.vue -->
<template>
    <section>
        <lottie
            :options="defaultOptions"
            width="700"
            height="400"
            @animCreated="handleAnimation"
        />
        <div>
            <button @click="handlePlay">play</button>
            <button @click="handlePause">pause</button>
            <button @click="handleStop">stop</button>
        </div>
    </section>
</template>

<script>
import Lottie from 'vue-lottie';
import * as animationData from '../assets/lottie-2.json'

export default {
    name: "App",
    data () {
        return {
            animation: null,
            defaultOptions: {
                animationData: animationData.default,	// 动画数据
                renderer: 'svg', 	// svg渲染动画
                loop: true, 		// 一直循环
                autoplay: false, // 不自动播放
                name: "lottie-2" // 命名，选填
            }
        }
    },
    components: {
        'lottie': Lottie
    },
    methods: {
        // set instance
        handleAnimation (animation) {
            this.animation = animation;
        },
        // handle play
        handlePlay () {
            this.animation.play();
        },
        // handle stop
        handleStop () {
            this.animation.stop();
        },
        // handle pause
        handlePause () {
            this.animation.pause();
        }
    }
}
</script>

注：vue-lottie底层实现也是使用了lottie-web这个库，只是将其配置和渲染进行了封装，便于开发使用。可访问github vue-lottie通过源码查看其实现原理。

Angular

不细说，运用库为npm ng-lottie，底层仍然是lottie-web。

注意事项（设计狮）

下面这些效果，lottie暂不支持：

描边动效目前不支持，（会导致lottie性能问题，所以后来lottie去掉了对该属性的支持）。
merge Path(合并路径)Android只支持4.4以上，iOS都不支持.

遵循下面的方案，会使json文件减小：

尽量减少图层个数。每个图层都会导出成相应的json数据，图层减少能从很大程度上减小json大小。
尽可能所有的图层都是在AE里面画出来的，而不是从其他软件引入的。如果是其他软件引入的，很可能导致描述这个图形的json部分变得很大。

并且，Lottie支持的动画效果如下：

lottie-web动画实现原理

先占个坑~

lottie.json

首先来看lottie.json中的关键字段：

ip：起始帧
op：结束帧
w：宽
h：高
v：版本
fr：频率/帧率
ddd
nm
tiny
fonts：字体
- list
  - fontConfig
asset：资源
- assetConfig
  - id
  - w：宽
  - h：高
  - u：路径
  - p：名称
  - e
layers：图层
- layerConfig
  - st：开始帧
  - ip：起始帧
  - op：结束帧
  - nm：名字
  - ind：图层id
  - ty：图层类型
  - ks：动画
  - shapes：图形

【工具】前端动画解决方案 Lottie（Web 篇）