Raphael Javascript 애니메이션 시퀀스 애니메이션하기

Question

JavaScript를 사용하여 객체 배열을 생성했습니다. 객체의 속성 중 하나는 Raphael 모양입니다.

$.each(arr, function() {});을 사용하여 모양을 그렸습니다. 그러나 나는 그 (것)들을 fadeIn에 신속히 연속해서 넣고 싶습니다. 따라서 arr[1].hexagon은 fadeIn이 될 것이며 arr[2]이됩니다. 나는 .animate()을 객체에 붙임으로써 모두 fadeIn을 얻을 수 있었지만 JavaScript를 시간 측정하는 방법을 알 수는 없습니다.

더 일반적으로, Raphael 또는 jQuery를 사용하여 시퀀스 및 시간을 제어하기위한 팁이 있습니까?

Answer 1

이 라파엘 또는 jQuery를 사용하지만, 자바 스크립트에서 배열을 통해 반복 지연의 단지 방법입니다하지 않습니다

var doSomethingWithValue = function(v) { 
    // your call to animate the object, or do anything really. 
    console.log(v); 
} 

var timer = function(a, n) {  
    var delay = 1000; // a second, probably change this to same duration as the fadeIn() 
    doSomethingWithValue(a[n]); // do work 
    n += 1; 
    if (n == a.length) { 
     // if we're at the end, return 
     return; 
    } else { 
     // repeat after delay 
     setTimeout(function() {timer(a, n)}, delay); 
    } 
} 

var arr = [1,2,3]; 
// kick things off starting at first entry 
timer(arr, 0); 

당신을 위해 그 일을합니까?

Answer 2

은이 코드를 사용하려고 :

for(var i=0;i < numofObj;i++){

Obj[i].animate({any animate you choose  },1000,function(){ 
Obj[i+1].animate({any animate you choose},1000); 

});

다음 OBJ 애니메이션에만 이전 끝을 만들 것입니다

...

Answer 3

나는이 문제를 해결하는 데 필요한, 그러나에 의존하고 싶지 않았다 setTimeout (브라우저가 최소화 될 때 타이머가 비정상적으로 작동 할 수 있으며 Raphael을 올바르게 사용하지 않는 것처럼 보입니다).

그래서 trampolines에서 영감을 얻어 애니메이션 대기열을 만들었습니다.

일반적인 전략은 익명의 함수를 큐에 넣고 함수의 어딘가에서 animations.next을 호출하거나 직접 호출하여 애니메이션을 트리거하는 것입니다.

animations = function() { 
    var animationQueue = [] 
    , obj = {} 

    obj.push = function(fn) { 
    animationQueue.push(fn) 
    } 

    obj.next = function() { 
    if (animationQueue.length !== 0) { 
     animationQueue.shift().call() 
    } 
    } 

    return obj 
}() 

그럼 당신은 몇 번 이런 일을 수행 할 수 있습니다

animations.push(function() { 
    paper.circle(x, y, 2) 
    .attr('fill', '#fff') 
    .animate({r: radius}, animationSpeed, animations.next) 
}) 

마지막으로, 당신이하고있는 무엇이든의 끝 부분에 체인을 시작 animations.next()를 호출합니다.

Answer 4

raphael Element.animate 메소드에서 제공하는 콜백을 사용해야합니다.

window.onload = function() { 
el.animate({theAnimation}, 1000, nextAnim); 
} 

function nextAnim(){ 
el2.animate({theAnimation2}, 1000); 
} 

애니메이션이 끝나면 콜백은 지정된 함수를 호출합니다. 필요한만큼 반복 할 수 있습니다.