12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061 |
- //<MyLottie path='./living-bg.json' style={{ width: '100%', height: '100%', position: 'absolute', top: 0, left: 0, zIndex: 2 }}/>
- import React from 'react';
- import lottie from 'lottie-web';
- class MyLottie extends React.Component {
- componentDidMount() {
- this.renderLottie()
- }
- renderLottie() {
- const { path } = this.props;
- if (path) {
- this.timer = setTimeout(() => {
- this.lottie = lottie.loadAnimation({
- container: document.getElementById('lottie'), //this.lottieRef, // the dom element that will contain the animation
- renderer: 'svg',
- loop: true,
- autoplay: true,
- path, // the path to the animation json
- });
- }, 300);
- }
- }
- componentWillUnmount() {
- if (this.lottie) {
- this.lottie.destroy();
- }
- if (this.timer) {
- clearTimeout(this.timer);
- }
- }
- closeLottie() {
- if (this.lottie) {
- this.lottie.destroy();
- }
- }
- testLog() {
- console.log(this.state);
- }
- render() {
- return (
- <div
- ref={ref => (this.lottieRef = ref)}
- id="lottie"
- style={this.props.style || {}}
- ></div>
- );
- }
- }
- export default MyLottie;
- MyLottie.defaultProps = {
- path: ''
- }
|