de trident

Trident animation library

package org.pushingpixels.trident von Kirill Grouchnikov dient zum Erstellen von Animationen in Java.

Stichworte:

• timeline : Szenario mit Zeitskala für die Animation mit Beginn und Ende im Intervall [0..1]
• timeline duration : Dauer der Animation in msec
• timeline pulse / point : ein Ereignis während der Animation auf der Zeitskala
• timeline play : führt die Annimation aus von vom Beginn bis zum Ende
• timeline state : status der timeline
• timeline property : ein Objekt xxx mit public setter void setXxx(float point)

Die Anzahl der Ereignisse/pulse ist propotional zu Dauer/duration. Sowohl die Anzahl wie auch der Abstand zwischen zwei Ereignisse hängt von der Systemauslastung ab und sind dadurch nicht verhersagbar.

Beispiel: Animation über 500 Millisekunden liefert 13 pulse

pulseno 0: 0.0 -> 0.0
pulseno 1: 0.0 -> 0.0
pulseno 2: 0.0 -> 0.082
pulseno 3: 0.082 -> 0.176
pulseno 4: 0.176 -> 0.268
pulseno 5: 0.268 -> 0.36
pulseno 6: 0.36 -> 0.454
pulseno 7: 0.454 -> 0.548
pulseno 8: 0.548 -> 0.64199996
pulseno 9: 0.64199996 -> 0.738
pulseno 10: 0.738 -> 0.83199996
pulseno 11: 0.83199996 -> 0.928
pulseno 12: 0.928 -> 1.0

Es werde Licht

Nehmen wir an wir wollen eine App zum Lichteinschalten erstellen. Zunächst ganz einfach:

• Bildschirm ist dunkel
• App wird gestartet : Bildschirm ist hell, man sieht in den Raum

Das ist ohne Animatiion.

Animation XPanelDemo

Mit Animation geht das Einschalten langsamer. Wie beim Dimmer:

• Der Raum, wo wir das "Licht einschalten" ist ein beliebiges Foto
• Dh. unsere app blendet das Foto ein oder auch aus
• wir impementieren die Animation mittels JXPanel, denn dort gibt es das Alpha Support Feature
• Die Animation soll 2 Sekunden dauern, timeline duration = 2000
• Initial is der Bildschirm/JXPanel voll transparent xpanel.Alpha==0f (man kann ihn nicht sehen)
• Dagegen bedeutet xpanel.Alpha==1f der Inhalt von JXPanel (das Foto) ist voll sichtbar
• Ein Dimmerprogramm, das per Regler für alpa bedient wird, gibt es als Test PaintPickerDemo
• wir wollen aber einen animierten Dimmer
• so ein Programm existiert als XPanelDemo in SwingSet3-Demos

timeline property

Als timeline property nutzen wir xpanel.alpha für das wir noch eine setter Methode setAlphaProp benötigen. Ganz nebenbei annimieren wir dabei noch einen Schieberegler.

Timeline timeline;
private JXPanel xpanel;
private JSlider alphaSlider;
 ...
public void setAlphaProp(float newValue) {
    xpanel.setAlpha(newValue);
    alphaSlider.setValue((int)(newValue*255+0.5));
}
 ...
timeline.addPropertyToInterpolate("alphaProp", 0.0f, 1.0f);

Einblenden und Ausblenden

Das Einblenden fade in wird mit timeline.play(); implementiert.

Auch das Ausblenden lässt sich einfach implementieren. Die Ereignisse der Animation werden rückwärts generiert. Wir müssen nur sicherstellen, dass anfangs Alpha auf 1 gesetzt wird:

setAlphaProp(1f);
timeline.playReverse(); // fade out

timeline state

Beim timeline play bzw. playReverse werden mehrere timeline state durchlaufen

                   +------------------+
                   v                  |                 
IDLE --play---------> PLAYING_FORWARD --> DONE --notifying listeners--> IDLE
     \-playReverse--> PLAYING_REVERSE -/ 
                   ^                  |
                   +------------------+

PLAYING_FORWARD und PLAYING_REVERSE werden aktive states genannt. Es gibt noch inaktive Status, auf die ich hier nicht eingehe:

• READY
• SUSPENDED
• CANCELLED

Animation in MapKitDemo

Ein anderes Beispiel findet man bei der Anzeige eines Wanderwegs in der Demo zum JXMapKit. Die ganze Animation dauert 4,5 Sekunden. Beim initialen Laden wird nur ein Teil der Animation gezeigt.