关于js拖动物体之后的惯性公式计算

994 阅读1分钟

问题定义:通过监听页面touch事件,可以得到已知参数:时间和位移,将拖动视为匀加速运动,在给定未知参数摩擦力加速度a'的情况下,推导出手指离开屏幕后需要的时间和位移

基本公式:

S=v0t+12at2,a=vtv0tS = v_0t + \frac{1}{2}at^2, a = \frac{v_t - v_0}{t}

获取动画时长:

初始速度为0,可以得到加速度:

a=2St2a = \frac{2S}{t^2}

由速度-加速度公式可得离开屏幕时的速度:

v0=at=2Stv_0 = at = \frac{2S}{t}

由于最终速度为0,给定摩擦力加速度为a',求出离开屏幕后的动画时长:

t=v0a=2Satt' = \frac{-v_0}{-a'} = \frac{2S}{a't}

获取动画位移:

得到惯性位移:

S=v0t12at2=2S2at2S' = v_0t' - \frac{1}{2}a't'^2 = \frac{2S^2}{a't^2}

获取终点坐标

接下来需要根据已有的移动轨迹和最后点坐标,以及位移,计算出终点坐标,这里采用向量进行计算:

(x,y)=(x2x1,y2y1)(\vec{x},\vec{y}) = (x_2-x_1, y_2-y_1)

获取向量方向的位移

t(x,y)=Smod(x,y)=S(x1x2)2+(y1y2)2t_{(\vec{x},\vec{y})} = \frac{S'}{mod|(\vec{x},\vec{y})|} = \frac{S'}{\sqrt{(x_1-x_2)^2 + (y_1-y_2)^2}}

得到最终坐标:

(x,y)=(x2,y2)+t(x,y)(x,y)=(x2+t(x,y)(x1x2),y2+t(x,y)(y1y2))(x,y) = (x_2,y_2) + t_{(\vec{x},\vec{y})}(\vec{x},\vec{y}) = (x_2+t_{(\vec{x},\vec{y})}(x_1-x_2),y_2+t_{(\vec{x},\vec{y})}(y_1-y_2))

最终得到动画:

timingFunc({ x, y }, t, 'ease-out');