1

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

2 回答 2

1

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

于 2014-12-30T09:47:14.470 回答
0

供将来参考 - 这不应该使用 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 + ")";
         }
     });
 }

于 2017-02-14T14:09:27.187 回答