velocity.js를 사용하여 드래그 가능한 요소 애니메이트

Question

드래그 가능한 SVG 요소를 velocity.js로 드래그하여 사용자가 드래그 할 때 애니메이션을 사용하고 있습니다. 그러나 velocity.js는 이전 mousemove 좌표를 &의 모든 mousemove 좌표를 통해 애니메이트합니다. 필자가 원하는 것은 velocity.js가 좌표를 대기열에 넣지 않고 함수가 전달한 최신 좌표로 애니메이션을 적용하는 것입니다.

는 확인이 jsFiddle

document.addEventListener("mousedown",mouseDown); 
document.addEventListener("mouseup",endMove); 
var click=false; 

var clickX, clickY; 

var moveX=0, moveY=0; 

var lastMoveX=0, lastMoveY=0; 


function mouseDown(evt){ 

    evt.preventDefault(); 
    var element=(typeof (window.event) !=='undefined') ? evt.srcElement:evt.target; 
    if(element.id==="mycirc") 
    { 
    click=true; 
    clickX = evt.clientX; 
    clickY = evt.clientY; 
    } 
document.addEventListener("mousemove",moveboth);   
return false; 
} 
function movexaxis(evt) 
{ 
    var clx=evt.clientX-clickX; 
    moveX = lastMoveX + clx; 
    return moveX; 
    } 


function moveyaxis(evt) 
{ 
     var cly=evt.clientY-clickY; 
     moveY = lastMoveY + cly; 
     return moveY; 
    } 

기능 moveboth (EVT) { 에서는 setTimeout (기능 이동() {

evt.preventDefault(); 

    var a=document.getElementById("mycirc"); 

    if(click){ 
     movexaxis(evt); 
     moveyaxis(evt); 
     Velocity(a,{translateX: moveX},{duration:"0ms"}, {queue:false}); 
     Velocity(a,{translateY: moveY },{duration:"0ms"},{queue:false}); 
     Velocity(a,"stop"); 
     } 
    },34); 
} 
function endMove(evt){ 
    click=false; 
    lastMoveX = moveX; 
    lastMoveY = moveY;  
} 

Answer 1

드래그 그렇게 속도를 사용하여, 정말 애니메이션의 유형이 아닌 주요이다 너는 x와 y 좌표를 저장하는 코드를 이미 가지고 있기 때문에,해야 할 일은 requestAnimationFrame()을 사용하여 요소의 변환을 업데이트하여 각 프레임에서이 좌표로 변환하는 것이다. 그리고 그 것이다 (: