其他分享
首页 > 其他分享> > 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'))

标签:动画,render,react,json,animationData,import,lottie,true
来源: https://www.cnblogs.com/jietea/p/16519417.html