以下程式碼實現的效果為：滑鼠點選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>