ReactMotio是一个React弹性动画库,使用0-10的弹性参数进行动画处理:
import {Motio, sprig} from 'react-motio';// I your reder...<Motio defaultStyle={{x: 0}} style={{x: sprig(10)}}> {value => <div>{value.x}</div>}</Motio>这个库解决了什么问题?对于95%的动画组件使用案例,我们没有必要用硬编码(把配置写死)式的缓冲曲线和时间过渡来重排序。只需要给你的UI设置一个刚度系数和阻尼系数,接下来让神奇的物理原理处理即可。用这种方式,根本无需担心如中断动画等小问题。它也极大的简化了API。
该库还为React的TrasitioGroup(React自带的CSS动画组件)提供了一个更强大的替代API:
sprig
Motio
StaggeredMotio
TrasitioMotio
presets
DemosSimpleTrasitio
ChatHeads
DraggableBalls
TodoMVCListTrasitio
PhotoGallery
SprigParametersChooser
WaterRipples
DraggableList
评论