중지 후 velocity.js 애니메이션 루프를 다시 시작하십시오.

Question

속도 애니메이션이 중지 된 후에 다시 시작하는 방법이 있는지 알아 내려고하고 있습니다.

동일한 속성으로 새 애니메이션을 다시 적용하지 않고도 속도 만있는 방법이 있습니까? 당신이 의미하는 것은 pause()/resume() 기능의 경우

var box = $('.box'); 
box.velocity({rotateZ:'360deg'}, {duration:1000, loop:true}); 

// That's a dummy to explain what I'm trying to do 
setTimeout(function{ 
    box.velocity('stop'); 

    setTimeout(function(){ 
    box.velocity('START ORIGIN ANIMATION AGAIN'); 
    }); 
}, 2000); 

Answer 1

물론 가능합니다! http://jsfiddle.net/uy6578an/

내가 시작하고 아미 노화를 다시 시작하고 아무 문제가 작동하지 않습니다 경우이 같은 것을 사용, 그것은 실행중인 보려면 여기를 살펴 :

function Start() { 

    var box = $('.box'); 

    DoRotation(); 

    $('#GoBtn').click(function() { 

     box.velocity('stop').velocity({rotateZ:'0deg'}, {duration:1}); 

     setTimeout(DoRotation, 1000); 

    }); 

    function DoRotation() { 

     box.velocity({rotateZ:'360deg'}, {duration:1000, loop:true}); 
    } 
} 

$(Start); 

그리고 여기에 행동에 그것을 보여주기 위해 jsFiddle입니다 타이머 : https://www.youtube.com/watch?v=bKEW02J3usA

Answer 2

, 다음 아니, 그것은 현재 속도 구현 아니에요.

애니메이션을 수동으로 다시 시작해야하며 강제 중지 기능을 사용하여 마지막으로 중지 한 위치에서 다시 시작해야합니다.

Answer 3

언급 한 바와 같이 일시 중지/다시 시작 기능이 없습니다.

그러나 Velocity.js와 기능을 확장하여 Tweene을 살펴볼 수 있습니다.

Tweene 문서 인용하기 Tweene를 사용하면 트윈 및 타임 라인 모두에 대해 지원되는 모든 라이브러리에 대해 play(), pause(), resume(), reverse() 및 restart() 메서드를 사용할 수 있습니다.

Answer 4

setInterval() 메서드를 사용하면 쉽게 수행 할 수 있습니다.

var box = $('.box'); 
setInterval(function() { 
    box.velocity({translateY: '-100%'}, 5000); 
    box.velocity('reverse', {duration: 1}); 
}, 5000); 

Answer 5

알고 있습니다. 질문에 대한 답변이 조금 늦었습니다. Velocity.js는 1.4 버전 이후 Pause/Resume (요소 또는 전역) 기능을 추가합니다.

다음과 같은 기능을 사용할 수 있습니다.

$element.velocity('pause'); 

or 

$element.velocity('resume'); 

도움이되기를 바랍니다.