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

Question

以下是jsfiddle的链接。在附加的jsfiddle中，我使用velocity.js创建了一个可拖动的SVG元素。然后沿x轴和y轴拖动是非常生涩的。请给我一个混淆错误是我的部分还是velocity.js < / strong>

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

供将来参考 - 这不应该使用Velocity。这是尝试从鼠标设置位置，但Velocity意味着执行平滑的动画，因此将在设置值后设置第一个动画帧上的位置 - 这意味着它有时（并且将会）显得不稳定。 0的持续时间在下一帧之前仍然不会生效。

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

＆＃13;

＆＃13;

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 + ")";
         }
     });
 }

＆＃13;

＆＃13;

＆＃13;