关于拖动缓动效果的实现

关于拖动缓动就是在一个容器中拖动其中的物体,然后产生物理学中所谓的缓冲效果。在计算机中为了模拟这种现象通常是利用物理学中的匀加速运动公式:Vt = V0 + at来实现的。

缓动效果中Vt为0,即是一个最终速度为0的匀减速运动。以Flex为例,如图在拖动地图的过程中:

该过程中我们可以根据鼠标按下获取地图的初始坐标位置Pt0(x,y),在拖动过程中每一时刻的鼠标指针坐标(MouseX,MouseY),然后计算出两点的偏移量:

    offPt.x = (mouseX - startPt.x)x0.2;
    offPt.y = (mouseY - startPt.y)x0.2;

而在每一时刻,地图的坐标也在发生变化:

    x = containerPt.x + offPt.x;
    y = containerPt.y + offPt.y;
    containerPt.x = x;
    containerPt.y = y;

由此可以看到地图的与鼠标指针总有一定的偏移量,而这个偏移量也在不断的变化中,当鼠标停止移动,地图的偏移量逐渐变小直到偏移量为0,即地图移动到了鼠标指针的位置,只是随后减速移动到该位置。

备注:TweenMax.to提供了较完备的缓动动画效果,有兴趣的可以研究下。

Published: February 13 2012