Snap svg Snap.animation() Funktion

Question

Ich versuche, eine Animation mit vielen Phasen der Änderungen zu erstellen, ermöglicht Snap.animation() dies zu tun, oder ich muss CSS3-Animation verwenden? fühle mich wie die docs immer noch etwas fehlt

Answer 1

Der beste Weg ist, erstellen Sie eine Sequenzfunktion oder Plugin, die Ihre Animationen der Reihe nach, ohne dass jeder Code zu programmieren. Sie können diese zum Beispiel als Array übergeben. Hier ist ein Code, den ich vorher gemacht habe.

im Array Sie es ein Objekt übergeben ..

el: das Element auf

Animation wirken: Die Animation durchzuführen (zB enthaltend ein Objektattribute zu animieren)

dur: Die Dauer

Lockerung: Die Lockerung

startFunc: Ein optionaler Rückruf für jeden 'Rahmen' laufen.

Hinweis, Sie könnten wahrscheinlich einige leere Frames einfügen (animieren Sie ein Attribut auf den gleichen Wert oder einen, der nicht existiert oder unwichtig ist), wenn Sie Dinge wie Verzögerungen wünschen.

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