使用velocity.js 为SVG 元素制作动画答案

【问题标题】：Animate an SVG element with velocity.js使用velocity.js 为SVG 元素制作动画
【发布时间】：2014-12-30 08:40:14
【问题描述】：

这里是 jsfiddle 的链接。在附加的 jsfiddle 中，我使用velocity.js 创建了一个可拖动的 SVG 元素。但是沿 x 轴和 y 轴拖动非常生涩。请建议。我很困惑是我的错误还是速度。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;
 }

【问题讨论】：

Animate draggable element using velocity.js的可能重复

标签： javascript animation svg draggable velocity.js

【解决方案1】：

好吧，您实际上已将持续时间设置为 0ms，它无法创建任何动画。将其设置为500ms 或类似的，它将开始流畅地制作动画。请参阅http://julian.com/research/velocity/#arguments 以获取有关要设置的参数的更多信息（如缓动和其他内容）。希望这会有所帮助。

【讨论】：

它的移动已经很慢了。我已经这样做了。它不会平滑动画。它会产生延迟。这是我们的问题。我必须移动得更快。你注意到当你移动时快，圆圈将留在光标后面并缓慢移动以到达鼠标点。我也必须解决这个问题。
好的。那么你就不需要任何 Velocity 了。在您的情况下没有任何动画，您看到的问题可能是 JavaScript 方法的性能不足以立即执行，这显示为延迟。

【解决方案2】：

供将来参考 - 这不应该使用 Velocity。这是尝试从鼠标设置位置，但 Velocity 旨在执行流畅的动画，因此将在设置值后的第一个动画帧上设置位置 - 这意味着它有时会（并且将会）出现生涩。 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 + ")";
         }
     });
 }

【讨论】：