react项目引用json动画的实现

本文主要是介绍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'))

这篇关于react项目引用json动画的实现的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！