Question

我使用AfterEffects的bodymovin扩展来创建动画并将其导出为与Web兼容的JSON。我尝试按照此演练来了解如何将其包含在组件中：https://gist.github.com/prettyhandsome/caa7386dcda76fde28cf5d2a07a12082#file-devmyndshapes-jsx

然而，我没有运气。是否有一个好的，一步一步的资源在线如何将JSON作为图像包含在React组件中？这是我失败的尝试：

import React, { Component } from 'react';
import Plx from 'react-plx';
import PropTypes from 'prop-types';
import bodymovin from 'bodymovin';
import animationData from '../../animations/test.json';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { skyChange } from './redux/actions';



export class Home extends Component {
  static propTypes = {
    home: PropTypes.object.isRequired,
    actions: PropTypes.object.isRequired,
  };

  componentDidMount() {
    this.attachAnimation();
  }

  animationIsAttached = false;
  const animationProperties = {
    //the is the DOM element that you would like to attach your animation to
    container: this.animationContainer,
    //the renderer options are  svg, canvas, or html
    renderer: 'svg',
    //true plays the animation in a continuous loop
    loop: true,
    //true plays the animation when the view loads
    autoplay: true,
    //the JSON data, which we imported above
    animationData: animationData
  }
  attachAnimation = () => {
    if (this.animationContainer !== undefined && !this.animationIsAttached) {
      const animationProperties = {
        container: this.animationContainer,
        renderer: 'svg',
        loop: true,
        autoplay: true,
        animationData: animationData
      }

      bodymovin.loadAnimation(animationProperties);
    }
  }


  render() {

    const { skyState, splashState } = this.props.home;
    const { skyChange } = this.props.actions;



    return (
      <div className="testing-animation">
         <h1> Animation Attempt </h1>
         <div style={{width: 50, height: 50}} ref={(animationDiv) => { this.animationContainer = animationDiv; }}/>
         </div>
       </div>
    );
  }
}

/* istanbul ignore next */
function mapStateToProps(state) {
  return {
    home: state.home,
  };
}

/* istanbul ignore next */
function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators({ skyChange }, dispatch)
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Home);

Answer 1

替换代码-

animationData: animationData

到

animationData: animationData.default

React Component中的SVG的JSON格式

1 个答案: