动画Lottie

Lottie简介

Lottie是一个Airbnb 开发的用于Android，iOS，Web和Windows的库，用于解析使用Bodymovin导出为json的Adobe After Effects动画，并在移动设备和网络上呈现 —
GitHub

Lottie主要特性

After Effects 兼容性：
- 将 AE 项目 （.json） 转换为应用程序/Web 动画。

跨平台：

• 支持 Android、iOS、Web 和 React Native 等框架。

高性能：

• 使用本机图形以获得比 CSS/JS 更好的性能。

可自定义：

• 可以修改动画的颜色、大小、速度等。

轻量级：

• 文件大小小，因为它们仅包含关键帧数据。

易于使用：

• 简单的 API，易于集成。

丰富的效果：

• 支持 After Effects 中的复杂动画。

实时渲染：

• 在不同屏幕尺寸下保持质量。

社区支持：

• 活跃的开源社区，经常更新。

动画缓存：

• 支持缓存以提高重复播放性能。

Lottie基本用法

// cdn
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.10.1/lottie.min.js" type="text/javascript"></script>
npm install lottie-web;
// 示例
import lottie from 'lottie-web';
const animation = lottie.loadAnimation({
        container: document.querySelector('.animation'),
        path: './data.json', // 动画文件路径
        renderer: 'svg', // 渲染方式
        loop: true, // 是否循环播放
        autoplay: true, // 是否自动播放
        name: "New Year", // 动画参考名称
})

Lottie API

名称	参数
container	用于渲染的容器，一般使用一个 div 即可
renderer	渲染器，可以选择 ‘svg’ / ‘canvas’ / ‘html’，个人测试发现 svg 效果和兼容性最好
name	动画名称，用于 reference
loop	循环
autoplay	自动播放
path	json 路径，页面会通过一个 http 请求获取 json
animationData	json 动画数据，与 path 互斥，建议使用 path，因为 animationData 会将数据打包进来，会使得 js bundle 过大

Lottie 实例方法

名称	参数	描述
stop		停止动画
play		播放动画
pause		暂停动画
destroy		销毁
setSpeed	Number	设置播放速度，1 表示1倍速度，0.5 表示 0.5倍速度
setDirection	Number	正反向播放，1 表示 正向，-1 表示反向
goToAndStop	Number, [Boolean]	跳到某一帧或某一秒停止，第二个参数 iFrame 为是否基于帧模式还是时间，默认为 false
goToAndPlay	Number, [Boolean]	跳到某一帧或某一秒开始，第二个参数 iFrame 为是否基于帧模式还是时间，默认为 false画
playSegments	Array, [Boolean]	播放片段，参数1为数组，两个元素为开始帧和结束帧；参数2为，是否立即播放片段，还是等之前的动画播放完成

Lottie 实例事件

名称	描述
onComplete	当动画播放完成时触发
onLoopComplete	当动画的一个循环播放完成时触发
onEnterFrame	每一帧动画播放时触发
onSegmentStart	当动画片段开始播放时触发

addEventListener 事件

const animation = lottie.loadAnimation({
    ...,
});
animation.addEventListener('complete', function() {
  console.log('Animation complete');
});

名称	描述
complete	动画播放完成时触发
loopComplete	动画的一个循环播放完成时触发
enterFrame	每一帧动画播放时触发
segmentStart	动画片段开始播放时触发
config_ready	当初始配置完成时触发
data_ready	当动画的所有部分都已加载时触发
DOMLoaded	当元素已添加到 DOM 时触发
destroy	动画销毁时触发