Veröffentlicht am

SVG Pencil Animation mit animateMotion

In diesem Beispiel siehst du einige Animationsmöglichkeiten in SVG. Zur Animation habe ich folgende Elemente verwendet:

  • SMIL <animateMotion>-Element für den Animationspfad
  • CSS mit Keyframes für die weiße Schrift

Den Quelltext der animierten SVG-Datei kannst du dir mit einem rechten Mausklick auf das Bild (Seitenquelltext anzeigen) ansehen.

SVGPencilAnimation_1024Klicke bitte auf das Bild um die SVG-Animation in einem neuen Tab zu öffnen.

Um die Keyframe-Animation und die SMIL-Animation synchron zu starten, habe ich mit Hilfe von JavaScript der weißen Schrift beim Klick auf die Schaltfläche start writing… eine CSS-Class hinzugefügt.

<script type="text/javascript">
<![CDATA[
 function clickme(evt) {
 var element = document.getElementById("schrift");
 element.classList.add("animatedfont");
 }
]]></script>
<style>

Beispiel auf codepen.io

See the Pen SVG writing pen animation with by Norbert Mesch (@itsnorbat) on CodePen.

Veröffentlicht am

Impressionist

Hier findest du demnächst eine Einführung in das JavaScript Präsentationsframework impress.js. Das Framework wurde in der c’t Ausgabe 22/2012 kurz vorgestellt.

Das Framework nutzt die Möglichkeiten von Transformationen und Transitionen moderner Browser mit CSS3.

Du kannst dir den Quellcode bei github herunterladen.

Erste Gehversuche kannst du dir hier ansehen.

Startposition der Präsentation bestimmen

Und hier kannst du dir durch einen Klick auf die Grafik einen ganz bestimmten Schritt der Präsentation ansehen (…htm#/overview).

Presentation3x3

Automatisch laufende Präsentation

Ziemlich bald nach dem Studieren des Code-Beispiels hat mich interessiert, wie ich die Präsentation automatisch abspielen kann. Dazu findest du hier ein weiteres Beispiel. Im eingebetteten Script ist lediglich folgender Quelltext zu ergänzen.

Die Methode setInterval ruft hier die Funktion next() in einem festgelegten Zeitintervall von 5000 Millisekunden = 5 Sekunden auf.

setInterval ('impress().next()', 5000);