HTML - PHP - MySQL - SVG

KERNI's SEITE

Animated path

Veröffentlicht am

Animated path

 

Damit das Beispiel funktioniert muss die Bibliotheck Snap eingebunden sein. Snap kann auf snapsvg.io heruntergeladen werden.

 

In diesem Beispiel möchte ich einen Pfad animieren. Dabei gilt zu beachten: Die Pfade müssen über die gleiche Anzahl von Knoten verfügen. Warum das so ist möchte ich im ersten Beispiel veranschaulichen.

 

Animated path mit unterschiedlicher Anzahl Knoten

 

Die Animation wird zwar ausgeführt aber läuft nicht wie erwartet ab.

 

 

<svg height="200px" width="100%">
<defs>
  <lineargradient id="lG1930">
    <stop id="s1920" offset="0" style="stop-color:#300000;stop-opacity:1;"></stop>
    <stop id="s1921" offset="1" style="stop-color:#f40000;stop-opacity:1;"></stop>
  </lineargradient>
  <lineargradient gradienttransform="matrix(1,0,0,1,-4,-7)" gradientunits="userSpaceOnUse" id="lG1940" x1="149" x2="78" xlink:href="#lG1930" y1="13" y2="187">
  </lineargradient>
</defs>
<path d="M 22,22 180,22 180,180 22,180 Z" id="path1" style="fill:url(#lG1940);stroke-width:0"></path>
</svg>

 

ani1();
 
start1 = setInterval(ani1,4000);
 
function ani1(){
 
setTimeout(function(){
   let s = Snap("#path1");
   s.animate({d:"M 101,22 124.55319,75.253742 180,82.350624 139.1099,122.36015 149.82468,180 101,151.47352 52.175318,180 62.8901,122.36015 22,82.350624 77.446772,75.253742 Z"},1000);},1000);
setTimeout(function(){
   let s = Snap("#path1");
   s.animate({d:"M 22,22 180,22 180,180 22,180 Z"},1000);},3000);
}

 

 

Animated path mit gleicher Anzahl Knoten

 

Hier die gleiche Animation. Diesmal haben die beiden Formen die gleiche Anzahl Knoten. Damit die Animation wie gewünscht funktioniert ist es auch erforderlich, dass die Knoten in der richtigen Reihenfolge notiert werden. Um sich die Arbeit etwas zu erleichertn ist es ratsam einen SVG Editor zu verwenden. Ich kann Inkscape als freie Software empfehlen. Ich Arbeite selber seit Jahren damit.
Als erstes habe ich das Rechteck gezeichnet. Darüber habe ich einen Stern gelegt. Die Pfade des Rechtecks um ein paar Knoten erweitern. Nun das Rechteck mit den erweiterten Knoten in das Script einfügen. Jetzt die Knoten des Rechtecks auf die Positionen des Sterns ziehen. Die Einrastfunktion in Inkscape sollte dabei helfen die Knoten richtig zu plazieren. Der Pfad des so entstandenen Sterns kann jetzt ebenfalls in das Script eingefügt werden. Wenn alles geklappt hat sollte die Animation so aussehen.

 

 

<svg height="200px" width="100%">
<defs>
  <lineargradient id="lG1930">
    <stop id="s1920" offset="0" style="stop-color:#300000;stop-opacity:1;"></stop>
    <stop id="s1921" offset="1" style="stop-color:#f40000;stop-opacity:1;"></stop>
  </lineargradient>
  <lineargradient gradienttransform="matrix(1,0,0,1,-4,-7)" gradientunits="userSpaceOnUse" id="lG1940" x1="149" x2="78" xlink:href="#lG1930" y1="13" y2="187"></lineargradient>
</defs>
<path d="M 22,22 V 82.072266 136.80273 180 h 79 79 V 136.80273 82.072266 22 h -79 z" id="path2" style="fill:url(#lG1940);stroke-width:0"></path>
</svg>

 

Und das Script dazu

ani2();
 
start2 = setInterval(ani2,4000);
 
function ani2(){
 
setTimeout(function(){
   let s = Snap("#path2");
   s.animate({d:"M 77.517084,75.230305 22,82.072266 62.960412,122.33671 52.24563,179.97656 101.07032,151.45008 149.89499,179.97656 139.18021,122.33671 180,82.072266 124.6235,75.230305 101,22 Z"},1000);},1000);
setTimeout(function(){
   let s = Snap("#path2");
   s.animate({d:"M 22,22 V 82.072266 136.80273 180 h 79 79 V 136.80273 82.072266 22 h -79 z"},1000);},3000);
}