preface

The cause of the matter is that I saw the “Netease Cloud Music Big Front End” team’s “Analysis of Lottie – Web Animation Implementation Principle” in nuggets, and began to learn how to use Lottie and apply it in the project

Lottie url:Reality. IO/Lottie / # / we…

How to implement a Lottie

First, you need to get a Lottie animation JSON file. There are two ways

Method 1: Designers use AE to produce animations and export the animations to JSON data files through Bodymovin, an AE plug-in provided by Lottie. Method 2: Obtain the free existing JSON file through Lottiefiles.com/ I obtained the existing JSON file through method 2

2. Add jSON-loader because there is no json-loader in the project

npm install json-loader --save-dev
Copy the code

Add json file parsing to webpack.config.dev.js and webpack.config.js files

Exports = {entry: entries, devtool: '#eval-source-map', output: {// webpack configuration 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: [/ / add browser prefix autoprefixer ({browsers: [...]})],};Copy the code

3. Install Lottie – Web (see official website link:Reality. IO/Lottie / # / we…)

npm install lottie-web
or
bower install lottie-web
Copy the code

4. Introduce and use in the project

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 () {
    / / initialization
    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',
    });
    // Start animation
    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'));
Copy the code

Examples of generated images

Optimize the way

For volume optimization of Lottie, you can use lolita, developed by Ant Group-Fortune Technology, at design.alipay.com/lolita