Seite 2: Animation

Inhaltsverzeichnis

Animation

Die Attribute der grafischen Elemente lassen sich auch mit Hilfe von Variablen steuern. Um im obigen Beispiel den Text in seinem Rahmen auf und ab zu bewegen, benötigt die Stage zunächst zwei Größenangaben

width:250
height:250 

nach der Eigenschaft "title".

Die neue Zeile

var ypos=30;

vor der Deklaration der Stage setzt den Anfangswert der vertikalen Position auf 30 Pixel.

y: bind ypos

ersetzt

y: 30

Damit die Änderung bei der Ausführung des Skriptes sichtbar wird, braucht das Beispiel noch den entsprechenden Animationscode, der am Anfang der Datei hinzufügt wird:

import javafx.animation.Interpolator;
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;

Am Ende sorgt folgender neuer Abschnitt für die Ausführung:

Timeline {
     keyFrames: [
	 KeyFrame {
	     time: 0s
	     values: ypos => 25 tween Interpolator.EASEBOTH },
	 KeyFrame {
	     time: 2s
	     values: ypos => 210 tween Interpolator.EASEBOTH },
     ]
     autoReverse: true
     repeatCount: Timeline.INDEFINITE
}.play();

Die so erschaffene Animation basiert auf Keyframes. Jedes Keyframe legt den Status der Stage in einem definierten Intervall fest. Beim Start der Bewegung (0s) hat ypos den Wert 25, nach zwei Sekunden 210. "tween Interpolator.EASEBOTH" sagt JavaFX, was in den restlichen 1,99 Sekunden passieren soll. "autoReverse" veranlasst die Rückwärtsbewegung, sobald das letzte Keyframe erreicht ist. "repeatCount" legt fest, wie lange die Aktion laufen soll, in diesem Fall solange, bis das Programm gestoppt wird. ".play" setzt die Animation in Gang.

Das Code-Beispiel demonstriert einige Eigenheiten der neuen Skriptsprache, darunter die Möglichkeit, Zeitdauer als eine Kombination einer Zahl und einer Zeitangabe anzugeben. "1ms" steht dann für eine Millisekunde. Interessant ist auch das Konzept der Bindings, das den Inhalt von Variablen vom Wert anderer Variablen abhängig macht.

var x=10;
var y=20;
var z=bind x+y;

"z" ist hier mit dem Ergebis von "x+y" verknüpft. Sobald sich einer dieser beiden Werte ändert, wird auch der Inhalt von z aktualisiert. Fügt man dem Wort bind ein "lazy" hinzu, wird z jedesmal, wenn die Variable ausgewertet wird, neu berechnet.