Bouclez une animation avec Snap.svg

Contexte : J'utilise Snap.svg pour rendre un cercle, puis animer son rayon sur le vol stationnaire. J'ai travaillé cette pièce avec le code ci-dessous.

Problème : j'essaie d'obtenir un effet de "impulsion" en boucle une fois que circleRadar est circleRadar , ce qui impliquerait une animation continue entre le r initial et le nouveau r de 70. Alors que le docs 'mention de snap.animate (from, to, …) ici semble prometteur, je ne peux pas comprendre comment je le mettrai en œuvre dans le contexte de mon code. Quelqu'un est-il un peu plus familier avec Snap qui peut vous aider? Merci!

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);

Je soupçonne qu'il peut y avoir une fonction répétée quelque part sur Snap, mais je ne pouvais pas le voir, alors s'il y a, ce serait probablement le chemin à parcourir. En l'absence de cela, vous pourriez avoir 2 animations et passer entre elles. Alors…

 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 });

Il y a un violon ici http://jsfiddle.net/TWBNE/29/ (je soupçonne que ce qui précède peut avoir besoin de peaufiner, les animations répétées peuvent parfois être un peu fiddly en fonction de mousemovements, etc. si vous déménagez en milieu d'animation par exemple. Vous voudrez peut-être Ne pas autoriser un redémarrage jusqu'à ce que l'animation soit terminée). Une autre alternative pourrait être de faire 2 animations qui utilisent l'attribut 'begin' et de le lancer sur 'end' des autres id.

Modifier: Vous voudrez peut-être vérifier l'utilisation de la mémoire si les animations sont susceptibles d'être laissées pendant très longtemps. Certaines versions Snap ont une utilisation de mémoire pire, et cette méthode ne complète pas les fonctions, donc je ne suis pas à 100% si cela augmenterait la pile d'appel de mémoire. Si ses animations très rapides, cela peut être plus remarquable.

Je pense que le système d'animation de snap.svg est trop jeune et n'a pas cette fonction. La version actuelle est 0.0.1! 🙂

Je pense que le chemin à suivre pour l'animation avancée est de le connecter à Greensock Animation Platform, c'est le cadre d'animation le plus avancé que je connaisse pour le Web. Jetez un coup d'oeil sur ce fil: http://forums.greensock.com/topic/8604-snapsvg/

Sinon, vous pouvez vous rappeler l'animation à nouveau.

Vous pouvez créer une fonction récursive pour produire une animation infinie, voici un exemple

 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. } ); }