关于js拖动物体之后的惯性公式计算
站长
· 阅读数 48
问题定义：通过监听页面touch事件，可以得到已知参数：时间和位移，将拖动视为匀加速运动，在给定未知参数摩擦力加速度a'的情况下，推导出手指离开屏幕后需要的时间和位移
基本公式：
S=v0t+12at2,a=vt−v0tS = v_0t + \frac{1}{2}at^2, a = \frac{v_t - v_0}{t}S=v0t+21at2,a=tvt−v0
获取动画时长：
初始速度为0，可以得到加速度：
a=2St2a = \frac{2S}{t^2}a=t22S
由速度-加速度公式可得离开屏幕时的速度：
v0=at=2Stv_0 = at = \frac{2S}{t}v0=at=t2S
由于最终速度为0，给定摩擦力加速度为a'，求出离开屏幕后的动画时长：
t′=−v0−a′=2Sa′tt' = \frac{-v_0}{-a'} = \frac{2S}{a't}t′=−a′−v0=a′t2S
获取动画位移：
得到惯性位移：
S′=v0t′−12a′t′2=2S2a′t2S' = v_0t' - \frac{1}{2}a't'^2 = \frac{2S^2}{a't^2}S′=v0t′−21a′t′2=a′t22S2
获取终点坐标
接下来需要根据已有的移动轨迹和最后点坐标，以及位移，计算出终点坐标，这里采用向量进行计算：
(x⃗,y⃗)=(x2−x1,y2−y1)(\vec{x},\vec{y}) = (x_2-x_1, y_2-y_1)(x,y)=(x2−x1,y2−y1)
获取向量方向的位移
t(x⃗,y⃗)=S′mod∣(x⃗,y⃗)∣=S′(x1−x2)2+(y1−y2)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}}t(x,y)=mod∣(x,y)∣S′=(x1−x2)2+(y1−y2)2S′
得到最终坐标：
(x,y)=(x2,y2)+t(x⃗,y⃗)(x⃗,y⃗)=(x2+t(x⃗,y⃗)(x1−x2),y2+t(x⃗,y⃗)(y1−y2))(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))(x,y)=(x2,y2)+t(x,y)(x,y)=(x2+t(x,y)(x1−x2),y2+t(x,y)(y1−y2))
最终得到动画：
timingFunc({ x, y }, t, 'ease-out');
转载自:https://juejin.cn/post/7130130330597457951