How to use bodymovin - 10 common examples

componentDidMount () {
    const animationData = require('Assets/bodymovin/react_logo.json')
    const animationProperties = {
      container: this.refs.cycle,
      renderer: 'svg',
      loop: true,
      autoplay: true,
      animationData
    }
    // 渲染svg
    Bodymovin.loadAnimation(animationProperties)
  }
  render() {

ngOnInit() {
        this._options = {
            container: this.lavContainer.nativeElement,
            renderer: 'svg',
            loop: this.options.loop !== false,
            autoplay: this.options.autoplay !== false,
            animationData: this.options.animationData,
            path: this.options.path || ''
        };
        this.viewWidth = this.width + 'px' || '100%';
        this.viewHeight = this.height + 'px' || '100%';
        let anim = bodymovin.loadAnimation(this._options);
        this.animCreated.emit(anim);
    }
}

setUpAnimation() {
    this.anim = bodymovin.loadAnimation(this.options);
    this.setSpeed();
    this.anim.addEventListener('complete', this.props.onComplete);
    this.anim.addEventListener('loopComplete', this.props.onLoopComplete);
  }

componentDidMount() {
    bodymovin.loadAnimation({
      container: ReactDOM.findDOMNode(this),
      renderer: "svg",
      loop: true,
      autoplay: true,
      animationData
    });
  }
  render() {

componentDidMount() {
    bodymovin.loadAnimation({
      container: ReactDOM.findDOMNode(this),
      renderer: "svg",
      loop: true,
      autoplay: true,
      animationData
    });
  }
  render() {

componentDidMount() {
    bodymovin.loadAnimation({
      container: ReactDOM.findDOMNode(this),
      renderer: "canvas",
      loop: true,
      autoplay: true,
      animationData
    });
  }
  render() {

},
  path: './images/animation/loadAnim.json'
};

let ccData = {
  container: ccAnimHolder,
  renderer: 'svg',
  loop: true,
  autoplay: false,
  rendererSettings: {
    progressiveLoad: false
  },
  path: './images/animation/ccLoading.json'
};

pictoAnim = bodymovin.loadAnimation(pictoData);
ccAnim = bodymovin.loadAnimation(ccData);

let resolve;

class IntroAnim {
  static play(resolveData) {
    resolve = resolveData;
    pictoAnim.setDirection(1);
    pictoAnim.play();
  }

  static reverse(resolveData) {
    resolve = resolveData;
    IntroAnim.stopLoader();
    pictoAnim.setDirection(-1);
    pictoAnim.play();

$.getJSON('/animations/1player-v3.json', data => {
          this.singleplayerAnimation = bodymovin.loadAnimation({
            container: document.getElementById('singleplayer-animation'),
            renderer: 'svg',
            loop: true,
            animationData: data,
          });
          resolve();
        });
      }),

$.getJSON('/animations/2player-v3.json', data => {
          this.multiplayerAnimation = bodymovin.loadAnimation({
            container: document.getElementById('multiplayer-animation'),
            renderer: 'svg',
            loop: true,
            animationData: data,
          });
          resolve();
        });
      }),

path: './images/animation/loadAnim.json'
};

let ccData = {
  container: ccAnimHolder,
  renderer: 'svg',
  loop: true,
  autoplay: false,
  rendererSettings: {
    progressiveLoad: false
  },
  path: './images/animation/ccLoading.json'
};

pictoAnim = bodymovin.loadAnimation(pictoData);
ccAnim = bodymovin.loadAnimation(ccData);

let resolve;

class IntroAnim {
  static play(resolveData) {
    resolve = resolveData;
    pictoAnim.setDirection(1);
    pictoAnim.play();
  }

  static reverse(resolveData) {
    resolve = resolveData;
    IntroAnim.stopLoader();
    pictoAnim.setDirection(-1);
    pictoAnim.play();
  }