动画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

Lottie 实例方法

Lottie 实例事件

addEventListener 事件

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