React MotionReact 彈性動畫庫

React Motion 是一個(gè) React 彈性動畫庫，使用 0-10 的彈性參數(shù)進(jìn)行動畫處理：

import {Motion, spring} from 'react-motion';
// In your render...
<Motion defaultStyle={{x: 0}} style={{x: spring(10)}}>
  {value => <div>{value.x}</div>}
</Motion>

這個(gè)庫解決了什么問題？

對于 95% 的動畫組件使用案例，我們沒有必要用硬編碼(把配置寫死)式的緩沖曲線和時(shí)間過渡來重排序。只需要給你的 UI 設(shè)置一個(gè)剛度系數(shù)和阻尼系數(shù)，接下來讓神奇的物理原理處理即可。用這種方式，根本無需擔(dān)心如中斷動畫等小問題。它也極大的簡化了 API 。

該庫還為 React 的 TransitionGroup（React 自帶的 CSS 動畫組件）提供了一個(gè)更強(qiáng)大的替代 API ：

• spring

• Motion

• StaggeredMotion

• TransitionMotion 

• presets

Demos

• Simple Transition

• Chat Heads

• Draggable Balls

• TodoMVC List Transition

• Photo Gallery

• Spring Parameters Chooser

• Water Ripples

• Draggable List