Javascript

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动画的实现的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!