react项目引用json动画的实现

安装：npm install –save react-lottie

实现：

import { Component } from “react”;
import ReactDOM from ‘react-dom’
import Lottie from ‘react-lottie’;
import animationData from ‘./images/云_bmp.json’

class App extends Component {
 
  constructor(props) {
    super(props)
    // 给this增加一个属性 state
    this.state = {
      defaultOptions: {
        loop: true,
        autoplay: true,
        animationData: animationData,
        rendererSettings: {
          preserveAspectRatio: ‘xMidYMid slice’
        }
      }
    }
  }
  render() {
    return (
      <div>
          <Lottie
            options={this.state.defaultOptions}
            height={400}
            width={300}
            isStopped={false}
            isPaused={false} />
      </div>
    )
  }
}

ReactDOM.render(<App/>, document.getElementById(‘root’))