Lottie 在 React（0.13.3 版本） 项目中实践

前言

事情的起因是在掘金中看到「网易云音乐大前端」团队分享的【剖析 lottie-web 动画实现原理】，开始学习如何使用 Lottie 并在项目中运用

Lottie 网址：airbnb.io/lottie/#/we…

如何实现一个 Lottie

1、首先需要获取一个 Lottie 动画 json 文件，有两种方式

方式一：设计师使用AE制作动画，并通过 Lottie 提供的 AE 插件 Bodymovin 把动画导出 JSON 数据文件 方式二：通过 lottiefiles.com/ 获取免费已有的 json 文件 我是通过方式二获取的已有的 json 文件

2、因目前项目中还没有json-loader，添加 json-loader

npm install json-loader --save-dev

在 webpack.config.dev.js 与 webpack.config.js 文件中添加 json 文件解析

// webpack 配置
module.exports = {
    entry: entries,
    devtool: '#eval-source-map',
    output: {
        ...
    },
    externals: {
      ...
    },
    resolve: {
        alias: {
          ...
        }
    },
    module: {
        loaders: [
            { test: /\.less$/, loader: 'style!css!postcss!less' },
            { test: /\.css$/, loader: "style!css!postcss" },
            { test: /\.(js|jsx)$/, loader: 'babel' },
            { test: /\.(jpg|png|svg|gif)$/, loader: "file-loader?name=[path][name].[ext]" },
            { test: /\.json$/, loader: 'json-loader'},  // json-loader
        ]
    },
    postcss:[
      // 添加浏览器前缀
      autoprefixer({
        browsers: [
          ...
        ]
      }),
    ],
};

3、安装 lottie-web （参考官网链接：airbnb.io/lottie/#/we…）

npm install lottie-web
or
bower install lottie-web

4、在项目中引入并使用

import React from 'react'
import lottie from 'lottie-web';
import './style.less'
const heepNewYear = require('./json/43075-2021-happy-new-year-celebration.json')
const lotTrustJSON = require('./json/42477-build-trust.json')
const LottieView = React.createClass({
  getInitialState() {
    return {

    }
  },
  componentDidMount: function () {
    // 初始化
    const lot = lottie.loadAnimation({
      container: document.getElementById('lottie'), 
      renderer: 'svg',
      loop: true,
      autoplay: false,
      path: 'https://assets6.lottiefiles.com/packages/lf20_vwml2zcv.json',
      // path: 'https://assets9.lottiefiles.com/datafiles/MUp3wlMDGtoK5FK/data.json',
      // animationData: './json/42357-christmas.json',
    });
    // 开始播放动画
    lot.play();
    const lotNewYear = lottie.loadAnimation({
      container: document.getElementById('lotNewYear'), 
      renderer: 'svg',
      loop: true,
      autoplay: false,
      animationData: heepNewYear,
    });
    lotNewYear.play();

    const lotTrust = lottie.loadAnimation({
      container: document.getElementById('lotTrust'), 
      renderer: 'svg',
      loop: true,
      autoplay: false,
      animationData: lotTrustJSON,
    })
    lotTrust.play()
  },
  render: function() {
    return <div className="lottie-box">
      <div className="lottie" id="lotTrust"></div>
      <div className="lottie" id="lotNewYear"></div>
      <div className="lottie" id="lottie"></div>
    </div>
  }

})
React.render(<LottieView />, document.getElementById('body-wrap'));

生成的图片示例

优化方式

lottie的体积优化你可以用蚂蚁集团-财富技术部开发的洛丽塔，地址如下： design.alipay.com/lolita