MyLottie.js 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. //<MyLottie path='./living-bg.json' style={{ width: '100%', height: '100%', position: 'absolute', top: 0, left: 0, zIndex: 2 }}/>
  2. import React from 'react';
  3. import lottie from 'lottie-web';
  4. class MyLottie extends React.Component {
  5. componentDidMount() {
  6. this.renderLottie()
  7. }
  8. renderLottie() {
  9. const { path } = this.props;
  10. if (path) {
  11. this.timer = setTimeout(() => {
  12. this.lottie = lottie.loadAnimation({
  13. container: document.getElementById('lottie'), //this.lottieRef, // the dom element that will contain the animation
  14. renderer: 'svg',
  15. loop: true,
  16. autoplay: true,
  17. path, // the path to the animation json
  18. });
  19. }, 300);
  20. }
  21. }
  22. componentWillUnmount() {
  23. if (this.lottie) {
  24. this.lottie.destroy();
  25. }
  26. if (this.timer) {
  27. clearTimeout(this.timer);
  28. }
  29. }
  30. closeLottie() {
  31. if (this.lottie) {
  32. this.lottie.destroy();
  33. }
  34. }
  35. testLog() {
  36. console.log(this.state);
  37. }
  38. render() {
  39. return (
  40. <div
  41. ref={ref => (this.lottieRef = ref)}
  42. id="lottie"
  43. style={this.props.style || {}}
  44. ></div>
  45. );
  46. }
  47. }
  48. export default MyLottie;
  49. MyLottie.defaultProps = {
  50. path: ''
  51. }