Javascript動畫easing

Question

我有一個功能，它可以輕鬆地移動我的畫布。問題是如何畫布動畫不起作用。它只是滾動得太遠，而且看起來太快。

這是我的功能，攝像頭移動到用戶點擊畫布上的位置：

function moveCamera(e,parent){ 
    clearInterval(parent.scroll); 

var mouseData  = mousePos(evt,parent); //get x:y relative to element   
var initial   = {'x':el.width/2,'y':el.height/2}, 
    target   = {'x':mouseData.x,'y':mouseData.y},    
    deltaX   = target.x-initial.x, 
    deltaY   = target.y-initial.y, 
    timeStart  = Date.now(), 
    timeLength  = 800, 
    x,y,deltaTime; 

function update(){ 
    function fraction(t){ 
     x    = (target.x - initial.x) - (t*deltaX), 
     y    = (target.y - initial.y) - (t*deltaY); 
     camera.x  -= x; 
     camera.y  -= y; 
    } 
    function easing(x) { 
     return 0.5 + 0.5 * Math.sin((x - 0.5) * Math.PI); 
    } 

    deltaTime = (Date.now() - timeStart)/timeLength; 
    if (deltaTime > 1) { 
     fraction(1); 
    } else { 
     fraction(easing(deltaTime)); 
    } 
} 
parent.scroll = setInterval(update, 10);   
} 

我已經attatched問題的的jsfiddle證明：http://jsfiddle.net/p5xjmLay/只需點擊畫布滾動到上那個位置，你會發現它有點瘋狂。

我想知道如何解決這個問題，使相機的偏移量每次都正確地改變？

Answer 1

我改變了一點點你的版本，它似乎是工作，請試試這個：

var el  = document.getElementById('canvas'), 
    initial   = {'x':el.width/2,'y':el.height/2}, 
    ctx  = el.getContext('2d'), 
    camera = {'x':el.width/2,'y':el.height/2}, 
    box  = {'x':0,'y':0}; 
    var x,y,deltaTime; 

    el.addEventListener('mousedown',function(e){moveCamera(e,this);},false); 

function moveCamera(e,parent){ 
     clearInterval(parent.scroll); 

    var mouseData  = mousePos(e,parent);      
     target   = {'x':mouseData.x,'y':mouseData.y},    
     deltaX   = target.x-initial.x, 
     deltaY   = target.y-initial.y, 
     timeStart  = Date.now(), 
     timeLength  = 800; 


    function update(){ 
     function fraction(t){ 
      x    = target.x - (initial.x + (t*deltaX)), 
      y    = target.y - (initial.y + (t*deltaY)); 

      if (Math.abs(camera.x + x - target.x) > Math.abs(camera.x - target.x)) { 
       camera.x = target.x; 
       initial.x = target.x; 
      } else { 
       camera.x  += x;     
      } 

      if (Math.abs(camera.y + y - target.y) > Math.abs(camera.y - target.y)) { 
       camera.y = target.y; 
       initial.y = target.y; 
      } else { 
       camera.y  += y;     
      }    

     } 
     function easing(x) { 
      return 0.5 + 0.5 * Math.sin((x - 0.5) * Math.PI); 
     } 

     deltaTime = (Date.now() - timeStart)/timeLength; 
     if (deltaTime > 1) { 
      fraction(1); 
     } else { 
      fraction(easing(deltaTime)); 
     } 
     draw(); 
    } 
    parent.scroll = setInterval(update, 200);  
} 

function mousePos(evt,el){ 
     var offsetX = 0, 
      offsetY = 0;   
     do{ 
      offsetX += el.offsetLeft - el.scrollLeft; 
      offsetY += el.offsetTop - el.scrollTop; 
     }while(el = el.offsetParent){ 
      return {'x':evt.pageX - offsetX, 'y':evt.pageY - offsetY}  
     }  
} 

function draw(){ 

    ctx.clearRect(0,0,el.width,el.height); 

    ctx.save(); 
    ctx.translate(camera.x,camera.y);  

    ctx.beginPath(); 
    ctx.rect(box.x-25, box.y-25,50,50); 
    ctx.fillStyle = 'red'; 
    ctx.fill(); 

    ctx.restore();   
} 
draw();