如何制作拖放后的惯性效果(一)

现在很多交互都需要这样一个效果,在拖拽结束时,被拖拽的元素会因为惯性向前移动一段距离。接下来说一下如何实现这个效果。

这个运动的原理其实很简单,就是一个匀减速运动。匀减速运动也就是匀加速运动的一种,只是加速度的方向和速度方向符号相反。我们在中学的时候学过匀加速运动的公式为:S = vt + (1/2)at^2;用文字表达就是在t时刻,物体移动的距离S为:初始速度v * t + (1/2) * 加速度a * t的平方。在这个公式中,我们可以将加速度a和初始速度v视为常量,将t当做变量,就可以知道在t时刻物体移动的距离了。那么问题又转到了如何对a和v求解。加速度a在这个问题中其实只是一个系数而已,我们可以设定a为1秒钟减少10000像素/秒的运动速度。(a = 10000)。那么到目前为止只有初始速度v是未知的了。

在这个动画中初始速度为我拖拽时松开鼠标那一刻的瞬时速度。我们知道计算平均速度的公式为v = s / t,如果这个t你取得足够的小,那么在t时间段移动的距离s除以t就是物体在某一点上的瞬时速度。接下来的问题就是如何确定这个t,以及如何确定在t时间段中物体移动的距离s。

我们知道在移动鼠标的时候会触发mousemove事件,而在持续移动鼠标的过程中,前后相邻的两个mousemove事件的时间间隔非常小,也就符合我们上面说的t时间段,在主流浏览器中event对象会有个timeStamp属性来标识这个事件是什么时刻发生的(在IE中因为要用window.event来取得事件,window.event没有timeStamp属性,所以要用new Date来计算事件发生的时刻),那么对t的求解就变得显而易见了:var t = e1.timeStamp – e0.timeStamp; 同时在t时间段移动的距离在X轴方向上为var s = e1.clientX – e1.clientX;

有了上面的思路,在鼠标松开的瞬时速度也就变得迎刃而解了。鼠标松开的瞬时速度v即为(e1.timeStamp – e0.timeStamp) / (e1.clientX – e1.clientX); e1为最后一次mousemove事件,e0为倒数第二次mousemove事件。如何保存e1和e0可以用以下代码:

var tracker = [];
document.body.addEventListener('mousemove', function(e) {
	tracker.push(e);
	if(tracker.length > 2) {
		tracker.shift();
	}
});

待续……

如何制作拖放后的惯性效果(一)》上有2条评论

发表评论