React-Motion实现简单的动画效果

以下代码实现的效果为：鼠标点击Div向下移动一定距离，附带弹簧回弹的动作效果。

React-Motion默认条件下实现的动画效果等同于弹簧回弹的动作，可以通过设置spring函数的参数调整效果。

从react-motion导入Motion组件，spring函数及presets预定义属性。

import { Motion, spring,presets } from "react-motion";

设置开始样式：
Motion组件的defaultStyle和Style属性分别代表动画动作前后的样式，运动过程由spring函数决定。

    private styles={
        x:0
    }
    private Estyles={
        x:spring(this.styles.x+10,presets.gentle) 
    }

设置鼠标点击函数：
此处需要注意两个样式要同步修改。

    handleOnClick=()=>{
        this.styles.x+=10;
        this.Estyles.x=spring( this.styles.x+10,presets.gentle)   
        this.setState({})
    }

使用Motion组件：
组件内容为一个函数，参数是自定义的style，返回值为使用该样式的组件。

      <Motion
            defaultStyle={this.styles}
            style={this.Estyles}
      >
            {(value: any) => <div onClick={this.handleOnClick} style={{width:50,height:50,marginTop:value.x,marginLeft:50,border:'1px solid'}} >Div</div>}
      </Motion>