• 欢迎光临~

react项目引用json动画的实现

开发技术 开发技术 2022-07-26 次浏览

安装: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'))
 
程序员灯塔
转载请注明原文链接:react项目引用json动画的实现
喜欢 (0)