Javascript 使用velocity.js设置可拖动元素的动画

我正在使用velocity.js为用户拖动的可拖动SVG元素设置动画。但是，velocity.js会将先前的mousemove坐标排成队列，并通过所有后续的mousemove坐标设置动画。我想要的是velocity.js不是将坐标排队，而是根据函数传递的最新坐标设置动画

检查这个

函数移动（evt）{ setTimeout（函数移动（）{

---

拖动并不是一种真正的动画，所以使用速度是一种主要的过度使用。因为您已经有了存储x和y坐标的代码，所以您需要做的就是使用

requestAnimationFrame（）

更新元素的变换，以在每一帧上转换为这些坐标。就是这样（：

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;
     }

    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;     
}