Question

我正在使用velocity.js为可拖动的SVG元素设置动画，因为它被用户拖动。但是，velocity.js排队前一个mousemove坐标＆amp;通过所有后续的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;
     }

function moveboth（evt）{ setTimeout（function move（）{

    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()更新元素的变换以转换为每帧上的这些坐标。就是这样（：

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

1 个答案: