缓和功能对象过快

Question

我最近遇到了这个包含一些缓动功能的网站： http ： //gizma.com/easing/

并且已经尝试在其中实现quadratic easing in/out进入我的脚本，但我的精灵似乎超级迅速地从屏幕上移开。 我不确定我的逻辑出错了，需要帮助理解我的错误。

我的缓动功能如下所示：

    //t = time, b = startvalue, c = change in value
     function ease(t, b, c, duration) {
         t /= duration/2; //duration is in milliseconds
         if (t < 1) return c/2*t*t + b;
         t--;
         return -c/2 * (t*(t-2) - 1) + b;
     };

我动画动画的代码是从一个mousedown监听器中触发的：

function animate(e){
    clearTimeout(timer);

    var duration  = 2000; //2 seconds

    var startX    = camera.x;
    var startY    = camera.y;

    var targetX   = e.offsetX - element.width/2  + camera.x; //world space
    var targetY   = e.offsetY - element.height/2 + camera.y; //world space

    var vectorX   = targetX - startX / duration;
    var vectorY   = targetY - startY / duration;

    var startTime = Date.now();

    function update(){
        var t   = Date.now() - startTime; //time elapsed so far
        var cX  = vectorX * t; //change in X
        var cY  = vectorY * t; //change in Y

        var amountX = ease(t,startX,cX,duration); // see function above
        var amountY = ease(t,startY,cY,duration);

        var difX    = startX - amountX; //get the difference
        var difY    = startY - amountY;

            camera.x += difX;
            camera.y += difY;

        if (t >= duration){
            clearTimeout(timer);
        } else {
            timer = setTimeout(update,0);               
        }
    }
    update();   
}

是什么导致动画如此迅速而且到目前为止？

编辑：添加，一个小提琴包括它帮助： http ： //jsfiddle.net/a86m33nj/

Answer 1

https://jsfiddle.net/pcconsolidated/xesnom2t/

你的问题只是简单地使它复杂化。 二次缓和函数只是想知道起始坐标，移动距离，相对于开始时间的当前时间以及总持续时间。 二次方的输出也是新坐标，而不是对象移动的距离，因此只需将坐标替换为四舍五入到最接近数字的函数中的值。

 var element = document.getElementById('background'); var output = document.getElementById('output'); var camera=document.getElementById("camera"); var timer; var targetX=0; var targetY=0; document.addEventListener('click', animate,true); var duration = 2000; //2 seconds var startX = 0; var startY = 0; var startTime =0; function animate(e){ targetX = e.clientX ; targetY = e.clientY ; clearTimeout(timer); startX = parseInt(camera.style.left.split("p")[0]); startY = parseInt(camera.style.top.split("p")[0]); startTime = Date.now(); updateLoc(); } function updateLoc(){ var t = (Date.now() - startTime); var cX = targetX-startX; //change in X var cY = targetY-startY; //change in Y var amountX = ease(t,startX,cX,duration); var amountY = ease(t,startY,cY,duration); newX=Math.floor(amountX); newY=Math.floor(amountY); camera.style.left = Math.floor(newX)+"px"; camera.style.top = Math.floor(newY)+"px"; output.innerHTML+=newX+","+newY+"___"; if (Date.now() - startTime >= duration){ clearTimeout(timer); } else { timer = setTimeout(updateLoc,0); } } //t = time, b = startvalue, c = change in value function ease(t, b, c,duration) { t /= duration/2; if (t < 1) return c/2*t*t + b; t--; return -c/2 * (t*(t-2) - 1) + b; }; </script> 

 <canvas id="background" width="500" height="500"> </canvas><br/> <div id="output"></div><div id="camera" style="background-color:green;top:250px;left:150px;position:absolute;height:30px;width:30px;"></div> <script type="text/javascript"> 

这是相当粗鲁的，我的抵消是错误的，但在晚餐后病态继续修补，看看我是否可以得到它。 这是我的代码希望它适合你。

Answer 2

好吧，在玩了你的代码之后我就开始了。 现在，只要您点击，相机就会跟随：

   function animate(e){
    clearTimeout(timer);

    var duration  = 2000; //2 seconds

    var startX    = camera.x;
    var startY    = camera.y;

    var targetX   = e.offsetX - element.width/2  + camera.x;
    var targetY   = e.offsetY - element.height/2 + camera.y;

    var startTime = Date.now();

    //t = time, b = startvalue, c = change in value
     function ease(t, b, c,duration) {
         t /= duration/2;
         if (t < 1) return c/2*t*t + b;
         t--;
         return -c/2 * (t*(t-2) - 1) + b;
     };

    function update(){
        var t   = (Date.now() - startTime);
        var cX  = -targetX; //change in X
        var cY  = -targetY; //change in Y

        camera.x = ease(t,startX,cX,duration);
        camera.y = ease(t,startY,cY,duration);

        if (Date.now() - startTime > duration){
            clearTimeout(timer);
        } else {
            timer = setTimeout(update,10);              
        }
    }    
    update();   
}

我希望它有所帮助。 干杯!