Ein Herz genommen

Zeile 15 initialisiert die Rafaël-Zeichenfläche, Zeile 17 zeichnet den kleinen Kreis (Abbildung 6). Zum Zeichnen kommen stets Methoden des Zeichenflächenobjekts »paper« zum Einsatz. Die Zeilen 19 bis 22 erzeugt das Herz aus mehreren Bézierkurven-Segmenten. Die Pfad-Definition folgt dabei dem SVG-Standard, der sich nicht gerade durch gute Lesbarkeit auszeichnet.

Abbildung 6: Rafaël kommt auch mit dem Uralt-Browser Internet Explorer 6 zurecht. Ohne dass der Entwickler davon etwas bemerkt, setzt Rafaël Zeichenbefehle und Animationen dann mit der Microsoft-spezifischen Zeichensprache VML um.

In der Praxis stört das kaum: Die Zahlen- und Zeichenfolge lässt sich leicht mit Inkscape erzeugen. Wer dort die Herzform mit dem Bézierkurven-Werkzeug zeichnet, den Pfad markiert und »Bearbeiten | XML-Editor« auswählt, muss nur noch den Inhalt des ersten Attributs »d« als Parameter für »path()« kopieren.

Die Zeilen 24 und 25 setzen die Pfad-Attribute »fill« und »stroke« (Füllung und Umriss) auf »#ff0« , den hexadezimalen Farbcode für Rot. Zeilen 27 und 29 schreiben Text in die Herzform und färben ihn gelb. Interessant wird es bei den Animationsfunktionen (Zeilen 36 bis 51), die die folgenden zwei Zeilen zur Initialisierung einmal aufrufen.

Immer in Bewegung

Die Anweisung »animateCircle()« ab Zeile 36 sorgt dafür, dass der kleine Ball sich pausenlos entlang der Kante der Herzform bewegt. Dazu kommt die Rafaël-Methode »animateAlong()« zum Einsatz. Sie erhält als Parameter mit »(path, 2000, false)« den bereits gezeichneten Pfad, die Animationsdauer und »false« , um die Rotation des animierten Objekts abzuschalten, die auf den Kreis keine sichtbaren Auswirkungen hätte. Zeile 40 setzt einen Javascript-Timeout, der die Funktion nach Ende der Animation erneut aufruft.

Die Funktion »colorChange()« zählt die fünf Elemente des Array »color« durch und weist der Füllfarbe des Kreises ihren Wert zu, und »setTimeout()« in Zeile 50 sorgt dann dafür, dass die Funktion in zufälligen Zeitintervallen immer wieder abläuft.

Bleibt noch der Klick-Handler für das Herz. Er nutzt die Event-Handler-Abstraktion von Jquery, damit er auch im Internet Explorer 6 funktioniert. Rafaël entfaltet seine Zeichenkünste selbst in diesem Browser-Urahn ohne Einschränkung (Abbildung 6). Bei einem Mausklick auf das Herz weist er diesem einen Skalierungsfaktor zu, der um den Betrag »0.1« um den ursprünglichen Wert »1« pendelt.

Der Code zeigt, dass Rafaël viele SVG-Attribute nicht nur auf einen Schlag verändert, sondern auch gleitend animiert. Es kommt die »animate()« -Methode zum Einsatz, die ein Objekt aus Attribut-Wertepaaren, die Animationsdauer sowie den Animationstyp als Parameter erwartet. »bounce« bewirkt, auf die Skalierung angewandt, einen Wackelpudding-Effekt.