Анимировать элемент SVG со скоростью.js

Вот ссылка jsfiddle. В прикрепленном jsfiddle я создал перемещаемый элемент SVG с использованием velocity.js. Однако перетаскивание вдоль обеих осей x и y очень рывкое .please advice. Я запутался, является ли ошибка с моей стороны или velocity.js.Анимировать элемент SVG со скоростью.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; 
}

источник

2014-12-30 Muhammad kashif Hanif

возможного дубликат [Анимируйте перемещаемый элемент, используя velocity.js] (http://stackoverflow.com/questions/27704974/ animate-draggable-element-using-velocity-js) – ydaniv

Ну, вы на самом деле установить длительность в 0ms, который не может создавать любой анимации. Установите его на 500ms или аналогичный, и он начнет анимацию плавно. См. http://julian.com/research/velocity/#arguments для получения дополнительной информации об установленных параметрах (например, о смягчении и других материалах). Надеюсь это поможет.

источник

2014-12-30 09:47:14 helloanselm

его уже очень медленное движение .i сделали это .it не сглаживает анимацию .it создаст задержку. Это наша проблема. Мне нужно двигаться быстрее. обратите внимание, что когда вы двигаетесь быстро, круг будет оставаться за курсором и медленно двигаться, чтобы достичь точки мыши. i hav e, чтобы решить эту проблему. –

Хорошо. Тогда вам не нужно ничего из Velocity. В вашем случае нет ничего, что можно было бы оживить, и проблема, которую вы видите, скорее всего, является методом JavaScript, который недостаточно эффективен для мгновенного выполнения, который отображается как задержка. – helloanselm

Для справок в будущем - это не должно использовать скорость. Это пытается установить позицию с помощью мыши, но 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-14 14:09:27 Rycochet

Анимировать элемент SVG со скоростью.js

ответ

Смежные вопросы