使用ReactJS和Mo.js实现的甩热狗动画 - 踏得网

React + mo.js Hot Dogs, 学习如何使用React和SVG来实现简单动画。

react, food

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3431
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

const { Component, Children, PropTypes } = React;
const { render } = ReactDOM;

const Burst = React.createClass({
  render() {
    return (<div></div>);
  },
  
  shouldComponentUpdate () {
    this.props.isPlay && this._burst.replay();
    return false;
  },
  
  componentDidMount () {
    const dur = 3500,
          dur2 = dur - 500;
    
    //caching the hotdog shapes
    class DogBase extends mojs.CustomShape {
      getShape () { return '<path d="M81.9,6.9c-2.5-2.5-5.1-3.7-7.8-3.7c-7.5,0-14.2,9.1-21.9,19.5c-4.1,5.5-8.4,11.4-12.9,16 c-4.7,4.7-10.5,8.9-16.1,13C13,59.2,4.2,65.7,3.7,73c-0.2,3,1,5.9,3.7,8.5c2.1,2.1,4.4,3.4,6.9,3.9c0.5,2,1.6,3.9,3.5,5.8 c2.9,2.9,6.3,4.3,10,4.3c10.9,0,23.5-11.8,40.3-28.5c10.2-10.2,19.1-19.4,24.2-27.6c5.9-9.4,5.9-16.8,0.1-22.7 C84.2,16.3,81.9,6.9,81.9,6.9z"/>'; }
    }
    mojs.addShape( 'dogbase', DogBase ); 
    
    class DogMid extends mojs.CustomShape {
      getShape () { return '<path d="M93.6,16.3c-2.2-2.2-4.6-3.6-7.1-3.9c-0.7-2.1-1.8-4.3-3.7-6.2c-2.6-2.6-5.3-3.8-8.1-3.8 c-7.7,0-14.7,9.4-22.6,20.2c-4.3,5.7-8.6,11.8-13.3,16.5c-4.8,4.8-10.9,9.2-16.6,13.4C11.7,60.2,2.6,66.9,2,74.4 c-0.2,3.1,1,6.1,3.8,8.7c2.1,2.1,4.6,3.5,7.2,4c0.6,2,1.7,4,3.6,5.9c3,3,6.5,4.5,10.3,4.5c11.2,0,24.3-12.2,41.6-29.5 c10.5-10.5,19.7-20.1,25-28.5C99.5,29.9,99.5,22.3,93.6,16.3z M12.8,83.7c-1.7-0.6-3.1-1.5-4.6-2.9c-2-2-3-4-2.8-6.2 c0.4-5.9,9.4-12.5,18.8-19.5c5.8-4.4,12-8.7,16.8-13.7c4.9-4.9,9.3-11,13.7-16.8C61.9,15,68.6,5.9,74.6,5.9c1.9,0,3.8,0.9,5.7,2.8 c1.2,1.2,2.1,2.6,2.7,3.9c-2.2,0.4-4.4,1.7-6.4,3.4c-0.4-0.7-1-1.3-1.7-2c-2.8-2.8-6.4-3.1-10.3,0.8c-3.8,3.8,0.7,2.8-24.9,28.5 C14.1,68.7,15.1,64.2,11.3,68c-3.8,3.8-3.6,7.5-0.8,10.3c1,1,2,1.7,3.1,2.2C13.2,81.6,12.9,82.7,12.8,83.7z M62.4,32 c0,0.3,0,0.6,0,0.9c-1.6,2-3,4.1-4.6,6.2c-1,0.3-2,0.4-3,0.2c-1.6-0.3-3.6-2-5.5-0.2c-2,2-0.4,4.4-0.2,6.2c0.2,1.7-0.3,3.2-1.7,4.9 c0,0.1-0.1,0.1-0.2,0.2l-0.1,0.1L47,50.6c0,0,0,0-0.1,0.1c-1.8,1.6-3.4,2-5.2,1.6c-1.6-0.3-3.6-2-5.5-0.2c-2,2-0.4,4.4-0.2,6.2 c0.1,0.6,0,1.1,0,1.7c-1,0.8-2,1.5-3,2.2c-1.6,1.1-3.1,2.2-4.6,3.4c-1.6-0.3-3.5-2-5.4-0.1c-1.6,1.5-1,3.2-0.6,4.8 c-1.1,0.9-2.1,1.9-3.1,2.8c-0.1-1.5-0.9-3.1-0.9-4.1c0-1.9,0.8-3.9,2.5-5.6c1.7-1.7,3.7-2.5,5.7-2.4c1.2,0.1,3.8,1.9,5.2,0.8 c0.1-0.1,0.1-0.1,0.2-0.2c0.1-0.1,0.1-0.1,0.2-0.2c1.2-1.5-0.4-4.4-0.4-5.7c0-1.9,0.8-3.9,2.5-5.6c1.7-1.7,3.7-2.5,5.7-2.4 c1.2,0.1,3.8,1.9,5.2,0.8l0.1-0.1l0.1-0.1c1.2-1.5-0.4-4.4-0.4-5.7c0-1.9,0.8-3.9,2.5-5.6c1.7-1.7,3.7-2.5,5.7-2.4 c1.2,0.1,3.8,1.9,5.2,0.8c0.1-0.1,0.1-0.1,0.2-0.2c0.1-0.1,0.1-0.1,0.2-0.2c1.2-1.5-0.4-4.4-0.4-5.7c0-1.9,0.8-3.9,2.5-5.6 c1.7-1.7,3.7-2.5,5.7-2.4c0.9,0.1,2.7,1.1,4,1.1c-0.9,1-1.7,2.1-2.6,3.2c-1.7-0.1-3.5-1.3-5.2,0.3C60.6,27.8,62.2,30.2,62.4,32z M90.6,38c-5,8.2-14.1,17.4-24.5,27.8C50,81.9,36.9,94.3,26.9,94.3c-3,0-5.6-1.1-8-3.5c-1.1-1.1-1.9-2.2-2.4-3.4 c-0.1-0.2-0.2-0.6-0.3-0.8l0,0c0-0.1,0-0.1,0-0.2C16.1,86,16,85.5,16,85.1c-0.2-2.5,0.9-5.9,7.6-11.7l0,0c3.2-2.8,7.1-5.6,11.1-8.5 c5.9-4.3,12-8.7,16.9-13.7s9.3-11,13.7-16.9c2.2-3,4.5-6.1,6.6-8.7l-0.1,0.1c0.1-0.1,0.2-0.2,0.2-0.3c-1.7,2.1-3.4,4.4-5.2,6.8 c1.8-2.5,3.5-4.8,5.2-6.8c0.1-0.1,0.1-0.2,0.2-0.3c0-0.1,0.1-0.1,0.1-0.2c0-0.1,0.1-0.1,0.1-0.2c1.5-1.8,3-3.5,4.7-4.9l0.1-0.1 c0.2-0.2,0.4-0.3,0.7-0.6c0.4-0.3,0.8-0.7,1.1-0.9c0,0,0,0,0.1,0c0,0,0,0-0.1,0c1.5-1.1,2.9-1.9,4.3-2.2c0.6-0.1,1-0.2,1.6-0.2 s1.1,0.1,1.8,0.2c1.3,0.4,2.8,1.3,4.1,2.7C96,23.6,95.8,29.5,90.6,38z"/>'; }
    }
    mojs.addShape( 'dogmid', DogMid );
    
    class Mustard extends mojs.CustomShape {
      getShape () { return '<path d="M58.1,29.4c0-1.9,0.8-3.9,2.5-5.6c1.7-1.7,3.7-2.5,5.7-2.4c0.9,0.1,2.7,1.1,4,1.1c-0.9,1-1.7,2.1-2.6,3.2 c-1.7-0.1-3.5-1.3-5.2,0.3c-2,2-0.4,4.4-0.2,6.2c0,0.3,0,0.6,0,0.9c-1.6,2-3,4.1-4.6,6.2c-1,0.3-2,0.4-3,0.2 c-1.6-0.3-3.6-2-5.5-0.2c-2,2-0.4,4.4-0.2,6.2c0.2,1.7-0.3,3.2-1.7,4.9c0,0.1-0.1,0.1-0.2,0.2L47,50.8l-0.1,0.1c0,0,0,0-0.1,0.1 c-1.8,1.6-3.4,2-5.2,1.6c-1.6-0.3-3.6-2-5.5-0.2c-2,2-0.4,4.4-0.2,6.2c0.1,0.6,0,1.1,0,1.7c-1,0.8-2,1.5-3,2.2 c-1.6,1.1-3.1,2.2-4.6,3.4c-1.6-0.3-3.5-2-5.4-0.1c-1.6,1.5-1,3.2-0.6,4.8c-1.1,0.9-2.1,1.9-3.1,2.8c-0.1-1.5-0.9-3.1-0.9-4.1 c0-1.9,0.8-3.9,2.5-5.6c1.7-1.7,3.7-2.5,5.7-2.4c1.2,0.1,3.8,1.9,5.2,0.8c0.1-0.1,0.1-0.1,0.2-0.2c0.1-0.1,0.1-0.1,0.2-0.2 c1.2-1.5-0.4-4.4-0.4-5.7c0-1.9,0.8-3.9,2.5-5.6c1.7-1.7,3.7-2.5,5.7-2.4c1.2,0.1,3.8,1.9,5.2,0.8l0.1-0.1l0.1-0.1 c1.2-1.5-0.4-4.4-0.4-5.7c0-1.9,0.8-3.9,2.5-5.6c1.7-1.7,3.7-2.5,5.7-2.4c1.2,0.1,3.8,1.9,5.2,0.8c0.1-0.1,0.1-0.1,0.2-0.2"/>'; }
    }
    mojs.addShape( 'mustard', Mustard );

const dog_opts = {
      radius:   { 0: 400 },
      count:    12,
    };
    
    const dog_child_opts = {
      angle:      { 750: 0 },
      duration:   dur,
      radius:     {75 : 20}
    };

const dog1 = new mojs.Burst({
      ...dog_opts,
      children: {
        ...dog_child_opts,
        shape:      'dogbase',
        fill:       '#E89221'
      }
    });
    
    const dog2 = new mojs.Burst({
      ...dog_opts,
      children: {
        ...dog_child_opts,
        shape:      'dogmid',
        fill:       '#7C0808'
      }
    });
    
    const dog3 = new mojs.Burst({
      ...dog_opts,
      children: {
        ...dog_child_opts,
        shape:      'mustard',
        fill:       '#F2D60A'
      }
    });

const burst4 = new mojs.Burst({
      radius:   { 0: 200 },
      angle:    { 200 : 0 },
      children: {
        shape:        'zigzag',
        fill:         'none',
        stroke:       'cyan',
        points:       '6',
        opacity:      { 1 : 0 },
        radius:       20,
        duration:     dur2
      }
    });

this._burst = new mojs.Timeline()
    .add( dog1, dog2, dog3, burst4);
    }
      
    });

const App = React.createClass({
  getInitialState() {
    return { isPlay: true }
  },
  
  _play() { this.setState({ isPlay: true }); },
  _resetPlay() { this.setState({ isPlay: false }); },
                              
  render() {
    return ( <div>
              <button onClick={this._play}>Play</button>
              <Burst isPlay={this.state.isPlay} onComplete={this._resetPlay}/>
            </div>);
  }
});

render(<App />, document.querySelector('#js-app-root'));

编译

CSS

HTML