Hintergrund : Ich verwende Snap.svg, um einen Kreis zu rendern, und animiere dann seinen Radius beim Hover. Ich habe dieses Stück mit dem Code unten arbeiten.

Problem : Ich versuche, einen Schleifen-Impulseffekt zu erzielen, sobald circleRadar aktiviert ist. Dies würde eine kontinuierliche Animation zwischen dem anfänglichen r und dem neuen {{X2 beinhalten }} von 70. Während in den Dokumenten von snap.animate (von, bis, ...) hier die Rede ist scheint vielversprechend, ich kann nicht herausfinden, wie ich das im Kontext meines Codes implementieren würde. Gibt es jemanden, der mit Snap ein bisschen besser vertraut ist und helfen kann? Vielen Dank!

Code :

//create the circle
circleRadar = s.circle(195, 345, 20);

//initial styling  
circleRadar.attr({
  fill: "#3f8403",
  opacity: 0.3
});

//animation
function testRadar(){
  circleRadar.animate({
    opacity: '1',  
  r: 70
  }, 1000, mina.elastic);
}

//trigger
circleRadar.hover(testRadar);
4
Marcatectura 26 Nov. 2013 im 04:31

3 Antworten

Beste Antwort

Ich vermute, dass es irgendwo auf Snap eine Wiederholungsfunktion gibt, aber ich konnte sie nicht sehen. Wenn dies der Fall ist, wäre dies wahrscheinlich der richtige Weg. Wenn dies nicht der Fall ist, können Sie zwei Animationen erstellen und zwischen diesen wechseln. So...

var animating = true;

//animation
function animOn(){
  if( animating ) {
    circleRadar.animate({
      opacity: '1',  
        r: 70,
        fill: 'none'
    }, 1000, mina.elastic, animOut);
  };
}

function animOut() {
  circleRadar.animate({
      opacity: '0.3',  
      r: 20,
      fill: 'none'
   }, 1000, mina.elastic, animOn);
};

circleRadar.hover(function() { animating=true; animOn() },      
    function() { animating=false });

Hier gibt es eine Geige http://jsfiddle.net/TWBNE/29/ (ich vermute, dass dies der Fall ist Wenn Sie Anpassungen vornehmen müssen, kann das Wiederholen von Animationen manchmal etwas umständlich sein, abhängig von Mausbewegungen usw., wenn Sie beispielsweise die mittlere Animation verlassen. Daher möchten Sie möglicherweise keinen Neustart zulassen, bis die Animation abgeschlossen ist. Eine andere Alternative könnte darin bestehen, zwei Animationen zu erstellen, die das Attribut 'begin' verwenden und es am 'end' der anderen ID starten.

Bearbeiten: Möglicherweise möchten Sie die Speichernutzung überprüfen, wenn die Animationen wahrscheinlich sehr lange verbleiben. Einige Snap-Versionen haben eine schlechtere Speichernutzung, und auch diese Methode führt keine Funktionen aus, sodass ich nicht 100% bin, wenn dies den Speicheraufrufstapel erhöhen würde. Wenn es sehr schnelle Animationen sind, kann es auffälliger sein.

7
Ian 9 Juli 2015 im 18:44

Ich denke, das Animationssystem von snap.svg ist zu jung und hat diese Funktion nicht. Aktuelle Version ist 0.0.1! :) :)

Ich denke, ein Weg für fortgeschrittene Animationen besteht darin, sie mit der Greensock Animation Platform zu verbinden, dem fortschrittlichsten Animationsframework, das ich für das Web kenne. Schauen Sie sich diesen Thread an: http://forums.greensock.com/topic/8604-snapsvg /

Andernfalls können Sie Ihre Animation nach Abschluss erneut aufrufen.

3
OndrejRohon 26 Nov. 2013 im 12:48

Sie können eine rekursive Funktion erstellen, um eine unendliche Animation zu erstellen. Hier ist ein Beispiel

var sunRays = sun.select('#rays');

// Sun events
raysAnimation();

// Infinite animation for the sun rays
function raysAnimation(){
    sunRays.stop().animate(
        { transform: 'r90,256,256'}, // Basic rotation around a point.
        10000, // Nice slow turning rays
        function(){ 
            sunRays.attr({ transform: 'rotate(0 256 256)'}); //reset
            raysAnimation(); // Repeat this animation so it appears infinite.
        }
    );

}
3
sKhan 30 Jän. 2016 im 20:24