react动画库Ant Motion

一、Ant Motion 能够快速在 React 框架中使用动画。他提供了单项，组合动画，以及整套解决方案。

二、Ant Motion解决方案提供了6种类型：

1. 单元素动画 TweenOne
2. Css样式动画Animate
3. 进出场动画QueueAnim
4. 文字动画TextyAnim
5. 页面滚动动画ScrollAnim
6. Banner动画BannerAnim

三、单元素动画

1. 效果：单元素动画可以改变指定元素css样式的形状和运动轨迹，并且是以动画的形式进行变化。
2. 使用时机：当页面需要某个元素需要变形或者移动时使用。如进度条，降下金币等效果。
3. 使用方式

• 安装：npm install rc-tween-one --save
• 使用：

import TweenOne from 'rc-tween-one';
function Demo(props) {
  return (
    <TweenOne
      animation={{ 
        x: 80, //让code-box-shape向右移动80
        scale: 0.5, //缩小50%
        rotate: 120, //旋转120度
        yoyo: true, // 动画执行完后返回
        repeat: -1, // 循环播放
        duration: 1000//动画开始到结束用1秒
      }}
      paused={props.paused}
      style={{ transform: 'translateX(-80px)' }}
      className="code-box-shape"
    />
  );
}
ReactDOM.render(<Demo/>, mountNode);

.code-box-shape{
    width:100px;
    height:100px;
    background-color:blue;
}

以上代码表示为code-box-shape这个css类添加动画，动画的效果在animation属性中制定。动画的暂停和启动通过TweenOne的paused属性确定。
具体TweenOne的api见：http://motion.ant.design/api/tween-one-cn

• 单元素动画中有一个TweenOneGroup组件，他与TweenOne不同， 用来表示进出场动画的，动画的触发方式是元素的显示和隐藏时触发。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false
    }
  }

  render() {
    return (
      <div>
        <Button onClick={() => this.setState({ show: !this.state.show })}>点击</Button>
        <TweenOneGroup
          enter={
            { x: 100, opacity: 1, type: 'from' }
          }
          leave={
            { x: 100, opacity: 1, type: 'to' }
          }
        >
          {
            this.state.show && (
              <div key='demo1' onClick={() => this.setState({ show: false })}>
                我是动画
              </div>
            )
          }
        </TweenOneGroup>

      </div>
    )
  }
}

这里的TweenOneGroup属性enter和leave设置进场和出场时的动画。用this.state.show来触发动画。
具体api http://motion.ant.design/api/tween-one-cn