惯性 Inertia

物理的惯性,惯性越大,数值衰减越慢

引入

import { inertia } from 'popmotion';

使用

提供一个velocity from属性,就可以计算出需要最终值和减数向目标

inertia({ velocity: 200, from: 50 })
  .start(v => console.log(v))

可以设置max 或者 min 作为边界:

inertia({
  velocity: 500,
  from: 50,
  max: 1000
})

如果最终的数值超过了max,或者小于min,就会调用spring做一个回弹动画

属性

velocity

默认:0

decay

from

默认:0

decay

modifyTarget

默认:v => v

decay

power

默认:0.8

decay

timeConstant

默认:700

decay

max

数据最大值,超过则触发回弹效果

min

数据最小值,超出则触发回弹效果

bounceStiffness

默认:500

回弹刚度,设置超过max min的变价值的时候的回弹动画系数,数值越大,越Q弹

bounceDamping

默认:10

回弹阻尼,数值越大,回弹越快停止,设置0,无线回弹

方法

decay

实例方法

decay

decay的区别

interita一般可用来做滚动效果

效果跟衰减decay非常类似,可以理解为decay的封装版,添加了数值的边界控制,并且设置了超出边界之后的回弹动画。 如果只是一个简单的衰减动画,直接使用decay即可。如果需要做一些减速回弹动画,可以使用intertia

例子

https://codepen.io/popmotion/pen/BMNvqj