SVG Animation oder wie die Bilder laufen lernten

SVG-Animationen werden immer beliebter. Kürzlich las ich im Smashing Magazine einen Beitrag von Heydon Pickering – Creating Cel Animations with SVG, der mich zu dieser kleinen SVG Animation inspiriert hat.

See the Pen awjjVo by Susanne (@sue007) on CodePen.

Worum geht es: Animation von Zeichnungen, ähnlich einer GIF-Animation, aber hier mit einer Vektordatei im SVG-Format. Das Vektorformat eröffnet neue Möglichkeiten für Animationen. Es können einzelne Teile der Grafik in unterschiedlicher Abfolge bewegt werden.

Der Begriff ‚Cel‘ rührt von einer alten Technik zur Trickfilmanimation her, wo Teile einer Figur auf einer dünnen durchsichtigen Folie, dem Storyboard entsprechend und auf einem statischen Hintergrund, in immer neuen Positionen aufgeklebt und fotografiert wurden, was am Ende in schneller Abfolge abgespielt zu ‚bewegten Bildern‘ sprich Film wurde.

Aus der SVG-Datei können komplexe Pfade, die den einzelnen Schritten der Animation entsprechen, übereinander gelegt und in einer Gruppe g zusammengefasst werden.

<g class="animation-name">
<path d="[path coords for first cel]"></path> 
<path d="[path coords for second cel]"></path> 
<path d="[path coords for third cel]"></path> 
</g>

.shapes > * { 
  opacity: 0; 
  animation-duration: 0.75s; 
  animation-iteration-count: infinite; 
  animation-timing-function: steps(1);
}

Mit der CSS-Eigenschaft opacity können Elemente ein- oder ausgeblendet werden. Die Schritte werden mathematisch ‚getimt‘ (Das hat Heydon gut erklärt.)

@keyframes shape-1 { 
  0% { 
    opacity: 1; 
  } 
  33.33333% { 
    opacity: 0; 
  } 
}  

.shapes > :nth-child(1) { 
  animation-name: shapes-1; 
}  

@keyframes shapes-2 { 
  33.33333% { 
    opacity: 1; 
  } 
  66.66667% { 
    opacity: 0; 
  } 
}  

.shapes > :nth-child(2) { 
  animation-name: shapes-2; 
}  

@keyframes shapes-3 { 
  66.66667% { 
    opacity: 1; 
  } 
  100% { 
    opacity: 0; 
  } 
}  

.shapes > :nth-child(3) {  
  animation-name: shapes-3; 
}

Der Artikel geht dann noch einen Schritt weiter, und zeigt wie das Ganze automatisiert und und verfeinert werden kann mittels SASS. (Das bekommen wir später ;-))

Diese 3 nützliche Tools werden genannt:

• Inkskape
  Inkskape ist eine open-source Software zur Erstellung professioneller 2-D Vektorgrafiken. Mehr als eine Alternative zu Adobe Illustrator.
• SVGOMG
  Ein Tool zur Optimierung von SVG-Dateien
• Online-Version von AutoPrefixer