Animierter Farbkreis mit Mouseover Ereignis


Warning: Undefined variable $twittervia in /homepages/7/d261385243/htdocs/wpblog/wp-content/plugins/shariff-sharing/shariff-wp.php on line 135

Warning: Undefined variable $content2 in /homepages/7/d261385243/htdocs/wpblog/wp-content/plugins/shariff-sharing/shariff-wp.php on line 114

Den Farbkreis mit seinen 13 Teilstücken habe ich in Illustration gezeichnet, coloriert und als SVG exportiert.

See the Pen SVG animated sliced color circle with mouseover event by Norbert Mesch (@itsnorbat) on CodePen.

Animation des Kreissegments

Jedes Kreiselement ist mit einem animateTransform-Element versehen worden um das Kreissegment wenige Pixel aus dem Kreis heraus zu animieren. Das Ereignis wird mittels mouseover ausgelöst.

<animateTransform attributeName="transform" type="translate" from="0 0" to="-5 -20" begin="mouseover" dur="0.3s" repeatCount="1" fill=""/>

Rotation

Die Rotation des Kreises wurde ebenfalls mit einem animateTransform-Element (type=“rotate“) realisiert.

<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360,200,200" to="0,200,200" begin="0s" dur="13s" repeatCount="indefinite"/></g>

SVG Webmuster rund


Warning: Undefined variable $twittervia in /homepages/7/d261385243/htdocs/wpblog/wp-content/plugins/shariff-sharing/shariff-wp.php on line 135

Warning: Undefined variable $content2 in /homepages/7/d261385243/htdocs/wpblog/wp-content/plugins/shariff-sharing/shariff-wp.php on line 114

Dieses Webmuster habe ich mit Affinity Designer erstellt und als SVG exportiert. In der SVG-Datei habe ich Zeichnung als Muster (Pattern) definiert. Mittels der Slider kannst du das Muster rotieren, sklalieren und die Linien (strokes) ein- bzw. ausblenden. Die Verbindung zwischen den Reglern und der Grafik ist mit JavaScript realisiert.

Beispiel auf codepen.io

See the Pen SVG seamless rounded weawing pattern by Norbert Mesch (@itsnorbat) on CodePen.

SVG Pfad Animation und Transformation


Warning: Undefined variable $image in /homepages/7/d261385243/htdocs/wpblog/wp-content/plugins/shariff-sharing/shariff-wp.php on line 105

Warning: Undefined variable $twittervia in /homepages/7/d261385243/htdocs/wpblog/wp-content/plugins/shariff-sharing/shariff-wp.php on line 135

Warning: Undefined variable $content2 in /homepages/7/d261385243/htdocs/wpblog/wp-content/plugins/shariff-sharing/shariff-wp.php on line 114

SVG AnimationIn diesem Beispiel siehst du eine Kombination von Transformationen und Pfad Animationen mit SMIL.

Fragen zur Wiederholung von Animationssequenzen

Ich suche noch nach einer Lösung, wie sich Browser übergreifend Animationssequenzen wiederholen lassen. Leider gibt es meines Wissens kein Ereignis, das ausgelöst wird, sobald die letzte Animation ihr Ende erreicht hat.

Die Pfade habe ich mit Affinity Designer erstellt und als SVG ohne Hintergrund exportiert.

See the Pen SVG animation sequence – tribute to Keith Haring by Norbert Mesch (@itsnorbat) on CodePen.


Um die Animation zu wiederholen klicke bitte auf RERUN unten rechts im Pen.

Fotos auf G+ Juli 2015


Warning: Undefined variable $twittervia in /homepages/7/d261385243/htdocs/wpblog/wp-content/plugins/shariff-sharing/shariff-wp.php on line 135

Warning: Undefined variable $content2 in /homepages/7/d261385243/htdocs/wpblog/wp-content/plugins/shariff-sharing/shariff-wp.php on line 114

SVG Animierte Pfade


Warning: Undefined variable $image in /homepages/7/d261385243/htdocs/wpblog/wp-content/plugins/shariff-sharing/shariff-wp.php on line 105

Warning: Undefined variable $twittervia in /homepages/7/d261385243/htdocs/wpblog/wp-content/plugins/shariff-sharing/shariff-wp.php on line 135

Warning: Undefined variable $content2 in /homepages/7/d261385243/htdocs/wpblog/wp-content/plugins/shariff-sharing/shariff-wp.php on line 114

SVG_circle-morphing_onlyMit dem <animate>-Element kannst du z.B. das d oder points attribute. In diesem Beispiel habe ich einen Kreis mit Affinity Designer gezeichnet und dem Kreis vier weitere Ankerpunkte hinzugefügt. Wichtig ist, dass der Pfad jederzeit die gleiche Anzahl der Ankerpunkte aufweist.

 

Pfadbearbeitung in Affinity Designer

Die Pfade habe ich aus Affinity Designer als SVG-Dateien exportiert. Wie das funktioniert habe ich im Artikel Selektiver SVG-Export mit Affinity Designer beschrieben. Die Animation vom Kreis zur Kreuz- oder Kleeblattform erfolgt mit nur einem zusätzlichen Element namens <animate>.

Pfadanimation mit dem <animate>-Element

Das Attribut begin definiert den Anfang der Animation. AttributeName=“d“ legt das zu animierende Attribut des <path>-Elementes fest. Hier könnte bei Polygonen mit dem Attribut points gearbeitet werden. Mittels dur=“0.5s“ wird die Dauer der gesamten Animation festgelegt, hier 0,5 Sekunden. Im Attribut to=“…“ wird der Pfad der geänderten Form eingefügt. Der Wert freeze des letzten Attributes fill=““ sorgt dafür, dass die Animation am Ende die letzte Form behält und nicht zum Kreis, der ersten Form, zurück springt. Das <animate>-Element berechnet nun nach Aufruf der Datei im Browser die einzelnen Zwischenpositionen der Ankerpunkte von der Ursprungsform zur nächsten Form.

<animate id="ani1" begin="1s" attributeName="d" dur="0.5s" to="M300,40c200.123,60.251 20.098,240.098 20,240c-0.098,-0.098 180.284,-180.144 240,20c-60.247,200.638 -239.851,19.851 -240,20c-0.149,0.149 180.181,179.753 -20,240c-200.144,-60.247 -19.26,-239.232 -19.96,-239.931c-0.699,-0.699 -179.441,180.535 -240.04,-20.069c60.368,-200.102 239.627,-19.561 240,-19.935c0.373,-0.373 -180.148,-179.365 20,-240.065Z" fill="freeze"/>

In der hier dargestellten Animation habe ich drei Pfade animiert und zusätzlich noch mit dem <animateTransform>-Element rotieren lassen.
SVG_circle-morphingHinweis: Wenn du dir die Grafik in einem eigenen Tab anzeigen lässt oder herunter lädst, kannst du dir den Quelltext der gesamten Animation ansehen.

Browserkompatibilität

Wie leider viel zu oft wird diese Form der SVG-/SMIL-Animation nicht von allen Browseranbietern unterstützt. In Chrome und Firefox läuft die Animation wie erwartet. Safari unterstützt nicht die Wiederholungen die im begin-Attribut mit mehreren Argumenten definiert werden.

begin="1s;ani2.end+1s" // do not work in Safari

Der Internet Explorer unterstützt ab Version 9 SVGen (das obige Beispiel funktioniert dort allerdings nicht). Der neue Browser Edge unter Windows 10 ebenfalls. Ich hatte allerdings noch keine Möglichkeit die Funktionen ausführlich zu testen. Weitere Informationen findest du hier: https://msdn.microsoft.com/en-us/library/gg193979(v=vs.85).aspx

 

SVG Pencil Animation mit animateMotion


Warning: Undefined variable $image in /homepages/7/d261385243/htdocs/wpblog/wp-content/plugins/shariff-sharing/shariff-wp.php on line 105

Warning: Undefined variable $twittervia in /homepages/7/d261385243/htdocs/wpblog/wp-content/plugins/shariff-sharing/shariff-wp.php on line 135

Warning: Undefined variable $content2 in /homepages/7/d261385243/htdocs/wpblog/wp-content/plugins/shariff-sharing/shariff-wp.php on line 114

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.

Chrome Incognito Modus beim Start – Mac OS X


Warning: Undefined variable $image in /homepages/7/d261385243/htdocs/wpblog/wp-content/plugins/shariff-sharing/shariff-wp.php on line 105

Warning: Undefined variable $twittervia in /homepages/7/d261385243/htdocs/wpblog/wp-content/plugins/shariff-sharing/shariff-wp.php on line 135

Warning: Undefined variable $content2 in /homepages/7/d261385243/htdocs/wpblog/wp-content/plugins/shariff-sharing/shariff-wp.php on line 114

Google_Chrome_icon_regular_incognitoSicher kennst du den Incognito Modus des Google Chrome Browsers. Mich stört es auf dem Mac immer wieder, dass ich in den Einstellungen nirgends konfigurieren kann, dass der Browser immer im Incognito Modus startet.

Ich erkläre dir hier eine mögliche Lösung, wie du mit AppleScript den Browser direkt im Incognito Modus öffnen kannst.

Incognito Modus in Google Chrome
Incognito Modus in Google Chrome

Apple Skript-Editor

Im Skript-Editor gibst du einfach folgende Zeile ein: „Chrome Incognito Modus beim Start – Mac OS X“ weiterlesen