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