javascript - 使用 velocity.js 为可拖动元素设置动画

Question

我正在使用 velocity.js 为用户拖动的可拖动 SVG 元素设置动画。但是，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){ 设置超时(函数移动(){

    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

拖动并不是真正的动画类型，因此使用 Velocity 是一个主要的矫枉过正。由于您已经拥有存储 x 和 y 坐标的代码，因此您需要做的就是使用 requestAnimationFrame() 更新元素的转换以转换为每个帧上的这些坐标。就是这样 (: