如何在到达目标后停止我的相机

Question

我有一个简单的功能，用户可以点击并拖动相机。相机移动起来有点平滑，但我不知道有什么简单的方法可以让相机在赶上鼠标位置后停止。

我确定这只是一个简单的数学逻辑错误，但目前相机一直在漂浮。

这是我的功能：

function drag(evt,el){
    clearInterval(timer);
    if(evt.button == 2){ //right click and drag
    mousePos = {};
    mousePos.x = evt.offsetX / scale;
    mousePos.y = evt.offsetY / scale;
    function update(e){
        var difx    = mousePos.x - (e.offsetX/scale),
            dify    = mousePos.y - (e.offsetY/scale);
        var targetX = camera.x + difx;
        var targetY = camera.y + dify;

        //update for next mouse movement
        mousePos.x  = e.offsetX / scale;
        mousePos.y  = e.offsetY / scale;     

        function smooth(){ // the problems lay here
            if(camera.x != targetX){
                camera.x    += (difx * lerp);
            }
            if(camera.y != targetY){
                camera.y    += (dify * lerp);
            }
        }

        timer = setInterval(smooth,16);
    }           
    function clear(){
        el.removeEventListener('mousemove', update, false);
        this.removeEventListener('mouseup', clear, false);
    }
    el.addEventListener('mousemove',update,false);
    document.body.addEventListener('mouseup',clear,false);  
}}

我这里有代码在运行 http://jsfiddle.net/bbb9q2c3/ 如果你点击并拖动然后放开盒子将继续移动因为我当前的代码似乎没有检测到什么时候相机已到达目标。

我该怎么做才能解决这个问题？

Answer 1

我fiddled有点用这个。

这是我更改的内容：

我在绘图函数中删除了平移，以便相机坐标与鼠标坐标匹配。所以带有 (0,0) 的相机在左上角而不是中间。
使用阈值检查相机是否在鼠标附近ath.abs(dify) > 1。
为更新函数添加了clearInterval。它现在的响应速度较慢，因此您可能需要 fiddle。
初始化时将square设置到中间位置

如何在到达目标后停止我的相机

How to stop my camera after it reaches it's target

javascript

math

animation

camera