Web 开发中动画的另一种实现方式 Lottie

Lottie 解释：

Lottie 是一个由 Airbnb 公司开发，可同时在 Web、iOS、Android 和 React Native 等多个平台上运行的高性能、可交互的矢量动画的开源库。

说白了就是设计师通过导出一个描述动画的 JSON 格式文件，并通过 Lottie 库就可以同时在几乎所有的平台运行。大大简化了设计师和工程师的工作。并且保证多个平台动画有一致的运行效果。

而且相对于视频和 Gif 比较，它的文件格式小，动画的性能还高。

该动画由 Lottie 生成，下载 json 文件

在 React 中你可以通过 react-lottie 这个库来实现快速实现开发，首先安装：

npm install --save react-lottie

然后，在代码中引入组件，配置必要的参数：

import React from 'react';
import Lottie from 'react-lottie';
import * as animationData from '../json/github.json';

export default function WebLottie () {
  return (
    <Lottie
      options={{
        loop: true,
        autoplay: true, 
        animationData: animationData,
        rendererSettings: {
          preserveAspectRatio: 'xMidYMid slice'
        }
      }}
      height={400}
      width={400}
    />
  )
}

参数解释：

• loop：控制动画的播放形式，是否循环播放，默认值 false；
• autoplay：控制动画是否自动播放，默认值为 false；
• animationData：动画文件数据，可通过导入 json 文件；
• rendererSettings：渲染设置，preserveAspectRatio 属性表示是否强制进行统一缩放；
• width：渲染出来的 svg 的长度；
• height：渲染出来的 svg 的宽度；
• eventListeners：支持动画执行过程中各节点的回调，比如：

eventListeners=[
  {
    eventName: 'complete',
    callback: () => console.log('the animation completed:'),
  },
]

在开发端没有任何的使用心智负担，只要交给我们动画的 json 文件，就能轻易地渲染出来。

那么主流的 Lottie 动画制作工具有哪些呢？

• Adobe After Effects：最专业的设计工具当然还得是 Adobe
• Figma：最新的流行设计工具
• Sketch：主流的设计工具
• LottieFiles：一个 Lottie 动画共享和制作的平台
• Lottielab：一款创建和编辑 Lottie 动画的工具