스냅 svg Snap.animation() 함수

Question

많은 변화 단계가있는 애니메이션을 만들려고합니다. Snap.animation()이이를 허용합니까, 아니면 css3 애니메이션을 사용해야합니까? 문서가 여전히 누락 된 것처럼 느낍니다.

Answer 1

가장 좋은 방법은 모든 코드를 코딩 할 필요없이 애니메이션을 차례로 가져 오는 시퀀싱 기능 또는 플러그인을 만드는 것입니다. 예를 들어 이들을 배열로 전달할 수 있습니다. 이전에 수행 한 코드는 다음과 같습니다. 배열

, 당신

EL .. 그 목적 건네 요소가

애니메이션에 작용 : 수행 애니메이션

(예를 포함하는 오브젝트를 애니메이션 속성) 지속 시간 : 기간

완화 : 이징

startFunc : 선택적 콜백 각 '프레임'에 대한 실행합니다.

지연과 같은 것을 원한다면 공백 프레임을 포함시킬 수도 있습니다 (동일한 값으로 속성을 애니메이션하거나 존재하지 않거나 중요하지 않은 프레임을 포함 할 수 있음). 당신이 시퀀스 애니메이션을 의미하는 경우

function nextFrame (frameArray, whichFrame) { 
    if(whichFrame >= frameArray.length) { return } 

    if(typeof frameArray[ whichFrame ].startFunc === 'function') { 
     frameArray[ whichFrame ].startFunc.call(frameArray[ whichFrame ].el) 
    }; 

    frameArray[ whichFrame ].el.animate( frameArray[ whichFrame ].animation, 
        frameArray[ whichFrame ].dur, 
        frameArray[ whichFrame ].easing, 
        nextFrame.bind(null, frameArray, whichFrame + 1) 
    ); 

} 


// Example of use 

var r = s.rect(100,100,100,100,20,20).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'red' }); 
var c = s.circle(50,50,50).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'blue' }); 

var g = s.group(r,c); 

var myFrames = [ 
    { el: g, animation: { transform: 'r360,150,150' }, dur: 1000, easing: mina.bounce }, 
    { el: r, animation: { transform: 't100,-100s2,3', fill: 'green' }, dur: 1000, easing: mina.bounce }, 
    { el: r, animation: { transform: 't100,100' }, dur: 1000, easing: mina.bounce, startFunc: sayHello }, 
    { el: g, animation: { transform: 's2,1' }, dur: 1000, easing: mina.bounce }, 
    { el: r, animation: { transform: 's1,2' }, dur: 1000, easing: mina.bounce }, 
    { el: c, animation: { transform: 's1,1' }, dur: 1000, easing: mina.bounce }]; 

nextFrame(myFrames, 0); 

function sayHello() { 
    alert('hello, this is me ==> ' + this); 
} 

example