react-spring 是一个基于弹簧物理学的动画库。
最基本的用法:
|
|
其中的useSpring可以创造一个js动画,这种动画默认不需要设置持续时间,他通过一些弹簧参数来控制动画的表现。可以通过config设置这些参数,像这样:
|
|
参数有哪些可以看Common api这节文档。
|
|
from为动画开始的值,1为动画最后的值。
|
|
1为动画开始的值,to为动画最后的值。
如果useSpring中变化的值可以直接使用,比如颜色、数字,则可以直接使用
|
|
或这样
|
|
如果useSpring中变化的值需要组合成字符串,比如transform,则需要使用插值函数(interpolate)来实现
|
|
useSpring中传值可以是任意的字段
|
|
可以在代码中更新spring
|
|
可以设置成多段动画
|
|
动画结束时触发事件
|
|