用velocity.js动画SVG元素

Question

这里是jsfiddle的链接。在附带的jsfiddle中，我使用velocity.js .however创建了一个可拖的SVG元素，沿着x轴和y轴拖动是非常快的.please建议。我很困惑这个错误是我的还是velocity.js的。

http://jsfiddle.net/KashifMKH/v1xx9nd1/6/

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"
             });
             Velocity(a, {
                 translateY: moveY
             }, {
                 duration: "0ms"
             });
             Velocity(a, "stop");
         }
     });
 }

 function endMove(evt) {
     click = false;
     lastMoveX = moveX;
     lastMoveY = moveY;
 }

Answer 1

实际上，您已经将持续时间设置为0ms，它不能创建任何动画。设置为500ms或类似的，它将开始顺利地动画。有关要设置的参数的更多信息，请参见http://julian.com/research/velocity/#arguments (比如宽松政策和其他内容)。希望这能有所帮助。

Answer 2

作为将来的参考-这不应该是使用的速度。这是试图设置从鼠标位置，但速度是为了执行平滑的动画，所以将设置后的第一个动画帧的位置-这意味着它可以(并将)出现不稳定的时候。0的持续时间在下一个帧之前仍然不会生效。

直接设置值以防止这种情况发生：

​

function moveboth(evt) {
     setTimeout(function move() {

         evt.preventDefault();

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

         if (click) {
             movexaxis(evt);
             moveyaxis(evt);
             a.style.transform = "translate(" + moveX + "," + moveY + ")";
         }
     });
 }

​