velocity.js로 SVG 요소 애니메이션하기

Question

다음은 jsfiddle의 링크입니다. 첨부 된 jsfiddle에서 velocity.js를 사용하여 드래그 가능한 SVG 요소를 만들었습니다. x 및 y 축을 따라 드래그하는 것은 매우 불규칙합니다. 충고는 내 부분 또는 속도에 실수인지 여부를 혼동합니다.

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는 부드러운 애니메이션을 수행하기위한 것이므로 값이 설정된 후 첫 번째 애니메이션 프레임에서 위치를 설정합니다. 즉, 때때로 흔들림이 나타날 수 있습니다. 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 + ")"; 
 
     } 
 
    }); 
 
}