JS动画秘籍:揭秘物体位置运动差值公式

617 阅读3分钟

这几天看月影大佬写的小册子,其中有个差值公式,在描述物体运动的轨迹很有用,用在前端动画也是很棒的。

第一次看这篇文章可能有点懵,我待会写另一篇应用文章, 再看这篇文章会好些

上面差值公式的目的是,给出起点,终点,以及起点到终点所花的时间,来计算出物体在时间 t 的位置。

其中提到了三个差值公式

  1. 匀速运动: S(t) = start * ( 1- p) + end * p
  2. 加速运动: S(t) = start * ( 1- p1) + end * p1, p1 = p ^ 2
  3. 减速运动: S(t) = start * (1 - p1)+ end * p1, p1 = p( 2 - p )

下面说说每个公式啥意思

匀速运动

匀速运动: S(t) = start * ( 1- p) + end * p

其中S(t)表示物体在时间t的位置,start为起点的坐标,end为终点的坐标;pt 和整个运动时间的比值。整个运动时间是物体从startend所花的时间,设为T,即p = t / T,表示所用时间占整个时间比

那么上面的公式可以变一下形: s = start + (end - start) * p

这样公式就很好理解了。物体在时间t的位置是,起点的坐标加上,物体运动的位移---即起点到终点之间的距离,乘以所用时间占整体时间的比

是不是很简单

加速运动

加速运动: S(t) = start * (1 - p1) + end * p1, p1 = p ^ 2

变量所表示的意思和上面一致。

合并一下,就是start + (end - start) * p ^ 2

那为什么是这样?为什么这个表示加速运动?完全不好理解,想要理解它需要用到高中物理必修一的知识。

下面开始:

只考虑初速度为零的简单情况

一个初速度为零的,加速度为a,匀加速直线运动,运动的时间为t,那么这个物体的位移S可以这么表示:

若起点为S0, 那么公式就变成了:

接下来把a换掉。若终点的坐标为S1,整个运动的距离为S1 - S0, 整个时间为T,则我们可以用S1S0表示a:

=>

带入原先的公式得,

=>

完成

t/T更换成pS0更换成startS1更换成end,就是上面的插值公式了start + (end - start) * p ^ 2

减速运动

减速运动: S(t) = start * (1 - p1)+ end * p1, p1 = p( 2 - p )

这个也变下形: start + (end - start) * (2p - p^2)

不过也不好理解,需要用到一些物理知识

下面开始:

只考虑末速度为零的简单情况

一个初速度为v0的,末速度为零,加速度为a,运动的时间为t的,匀减速直线运动,起始位置为S0,那么这个物体的位置S可以这么表示:

按照上面一样的变形方式,先用S0S1表示a ,

=>

再用S0S1表示V0

有个公式可以用初速度和末速度来表示匀变速直线运动的位移:S = 1/2*( V初+V末 )*t

所以 IMG_EFF8906371A4-1.jpeg,

其中末速度为零,整个运动时间为T, 可得:

带入上公式得

=>

完成

t/T更换成pS0更换成startS1更换成end,就是上面的插值公式了start + (end - start) * (2p - p^2)

总结

本篇讲的差值公式是比较简单的,更多内容大家可以看看这篇文章平滑轨迹插值方法之多项式插值😋

下篇文章来讲讲差值函数的具体运用,see you 😍