react-motion
React-Motion 是一个动画库,拥有一种更轻松的方法来创建和实现逼真的动画。React-Motion利用物理学来为React元素创建几乎自然的动画。
基本概念
spring
- 基本描述:spring是react-motion最简单也是最深奥的一个函数,是react-motion构筑动画的基石,用户可以通过spring实现各种物理效果
- 参数:
- val: 终点值,即你希望达到的最后状态的数值,number类型
- config: 用于生成物理效果的配置
stiffness 和 damping
- stiffness: 相当于弹簧的强度,其影响的是弹簧回弹的速度,相同damping情况下,stiffness越大,回弹速度越快;
- damping: 是弹簧的减震性,其影响的是弹簧的回弹次数,相同stiffness情况下,damping越大,回弹次数越少
- 点击这里查看官方连接的效果
presets
- 基本描述:一般情况下,大多数用户其实是不想手动去配置stiffness和damping的,所以react-motion也单独提供了一些预设值
安装
yarn add react-motion
or
npm i react-motion
Demos
参考