动画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 | 动画销毁时触发 |