Lottie 复杂动画的一种落地方案

Lottie

1. Lottie 简介

Lottie 是 Airbnb 开源的一套跨平台的完整的动画效果解决方案，设计师可以使用 Adobe After Effects 设计出漂亮的动画之后，使用 Lottie 提供的 Bodymovin 插件将设计好的动画导出成 JSON 格式，就可以直接运用在 iOS、Android、Web 和 React Native之上，无需其他额外操作。

2. Lottie 优缺点

2.1 优点

1. 职责分离，由设计师设计动画，前端负责控制动画的播放；
2. 减少前端的工作量，手写一套前端动画往往需要考虑很多方面的因素，所以工作量大且耗时，但得出来的结果往往又不如人意。使用lottie可以几乎百分百还原设计师的动画效果且省时。
3. 轻量级，相比以往的动画实现方式如PNG序列、GIF，lottie仅使用到一个json文件，因而文件体积要小得多。
4. 动画效果及大小可控，传统的实现方式往往固定了宽高与速度，而lottie可以自定义这些参数。

2.2 缺点

1. 有部分特效无法导出
2. 部分复杂动画无法完美导出

3. Lottie 起步

本文以在vue环境下使用lottie为例，使用到的是vue-lottie

具体的其他技术栈还有：

• lottie-android
• lottie-ios
• lottie-web
• lottie-react-native
• react-lottie

3.1 安装依赖

npm install vue-lottie --save

3.2 简单使用

step1

首先在main.js全局注册vue-lottie的组件

// main.js

import lottie from "vue-lottie";
Vue.component("lottie", lottie);

**坑1：**本来以为在web上使用lottie是用lottie-web的，然后使用了官方的示例代码，出现了 Uncaught DOMException: Failed to read the ‘responseText’ property from ‘XMLHttpRequest’: The value is only accessible if the object’s ‘responseType’ is ‘’ or ‘text’ (was ‘json’). 的错误。而后才查到vue环境下要用vue-lottie才能更好兼容。

lottie.loadAnimation({
   
  container: element, // the dom element that will contain the animation
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json' // the path to the animation json
});

step2

在你要使用动画的页面，使用lottie组件

**options：**是原生lottie的配置对象，lottie.loadAnimation 的参数如下

• animationData: an Object with the exported animation data.
• pa