问题定义:通过监听页面touch事件,可以得到已知参数:时间和位移,将拖动视为匀加速运动,在给定未知参数摩擦力加速度a'的情况下,推导出手指离开屏幕后需要的时间和位移
基本公式:
S=v0t+21at2,a=tvt−v0
获取动画时长:
初始速度为0,可以得到加速度:
a=t22S
由速度-加速度公式可得离开屏幕时的速度:
v0=at=t2S
由于最终速度为0,给定摩擦力加速度为a',求出离开屏幕后的动画时长:
t′=−a′−v0=a′t2S
获取动画位移:
得到惯性位移:
S′=v0t′−21a′t′2=a′t22S2
获取终点坐标
接下来需要根据已有的移动轨迹和最后点坐标,以及位移,计算出终点坐标,这里采用向量进行计算:
(x,y)=(x2−x1,y2−y1)
获取向量方向的位移
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))
最终得到动画:
timingFunc({ x, y }, t, 'ease-out');