Animationen

ReactXP unterstützt eine leistungsstarke Animationsabstraktion. Einzelne Stilelemente (z. B. Transformationen, Opazität oder Hintergrundfarbe) können animiert werden.

Animierbare Komponenten

Vier grundlegende RX-Klassen können animierbare Stile haben

• Animated.View

• Animated.Image

• Animated.Text

• Animated.TextInput

Diese Komponententypen sollten anstelle der normalen View, Image, Text oder TextInput in der Render-Methode verwendet werden. Im Allgemeinen können Stileigenschaften, die als numerische Werte oder Farben ausgedrückt werden, animiert werden. Eigenschaften mit Textwerten (z. B. flexDirection oder fontWeight) können nicht animiert werden.

Animierte Werte

Das folgende Beispiel zeigt, wie animierte Werte mit einem Anfangswert erstellt werden. Animierte Werte werden typischerweise als Instanzvariablen innerhalb einer Komponentenkasse gespeichert. Sie können auch in der Zustandsstruktur gespeichert werden.

let animatedOpacityValue = RX.Animated.createValue(1.0);
let animatedScaleValue = RX.Animated.createValue(1.0);

Für animierte Farbwerte ist es möglich, interpolierte Werte zu erstellen, die von einem numerischen Bereich auf einen Farbbereich abgebildet werden. In diesem Beispiel wechselt der Wert sanft von Weiß zu Rot zu Schwarz, wenn der Wert von 0 auf 1 ansteigt.

let animatedColorValue = RX.Animated.createValue(0.0);
let interpolatedValue = RX.Animated.interpolate(animatedColorValue,
    [0.0, 0.5, 1.0], ['white', 'red', 'black']);

Animierte Stile

Sobald ein animierter Wert erstellt ist, kann er mit einem animierten Stil verknüpft werden.

Einige animierte Stilwerte sind aufwendiger als andere. Einige beeinflussen das Layout von Elementen (z. B. Breite, Höhe, oben, links), sodass die Layout-Engine bei jeder Animationsphase aufgerufen werden muss. Es ist schneller, diese zu vermeiden und sich auf Stile zu beschränken, die das Layout nicht beeinflussen (z. B. Opazität und Transformationen).

Dieses Beispiel zeigt, wie ein Stylesheet mehrere animierte Werte enthalten kann.

let animatedStyle = RX.Styles.createAnimatedViewStyle({
    opacity: animatedOpacityValue,
    transform: [{
        scale: animatedScaleValue
    }]
});

Animierte Stylesheets können mit anderen statischen Stilen kombiniert werden.

render() {
    <RX.Animated.View style={ [_styles.staticStyle, animatedStyle] } />
}

Einfache Timing-Animationen

Um eine Animation zu beschreiben, geben Sie den Endwert des animierten Wertes und eine Dauer (in Millisekunden) an. Eine optionale Easing-Funktion ermöglicht eine Vielzahl von Animationskurven, einschließlich linearer, schrittweiser und kubischer Bézier-Kurven.

Sobald eine Animation definiert ist, startet ein Aufruf der start()-Methode die Animation. Die start-Methode nimmt einen optionalen Parameter entgegen, eine Callback-Funktion, die ausgeführt wird, wenn die Animation abgeschlossen ist.

let opacityAnimation = RX.Animated.timing(animatedScaleValue,
    { toValue: 0.0, duration: 250, easing: RX.Animated.Easing.InOut() }
);

opacityAnimation.start(() => this._doSomethingWhenAnimationCompletes());

Komposit-Animationen

Manchmal ist es nützlich, mehrere Animationen parallel oder sequenziell auszuführen. Dies wird einfach durch Aufrufen von RX.Animated.parallel() oder RX.Animated.sequence() erreicht. Komposit-Animationen können verschachtelt werden, um anspruchsvolle Sequenzen zu erstellen.

let compositeAnimation = RX.Animated.parallel([
    RX.Animated.timing(animatedScaleValue,
        { toValue: 0.0, duration: 250, easing: RX.Animated.Easing.InOut() }
    ),
    RX.Animated.timing(animatedOpacityValue,
        { toValue: 1.1, duration: 250, easing: RX.Animated.Easing.Linear() }
    )
]);

compositeAnimation.start();

Animierten Wert direkt setzen

Der Wert eines animierten Wertes kann direkt durch Aufrufen der Methode setValue gesetzt werden. Wenn diese Methode aufgerufen wird, während der Wert animiert wird, ist das Verhalten undefiniert. Das direkte Setzen des Wertes eines animierten Wertes ist schneller als die Verwendung eines nicht animierten Stilattributs und das erneute Rendern der Komponente mit einem neuen Attributwert.

let animatedOpacityValue = RX.Animated.createValue(1.0);

animatedOpacityValue.setValue(0.0);

Web-Einschränkungen

ReactXP-Animations-APIs im Web werden mithilfe von DOM-Stilübergängen implementiert, im Gegensatz zur Verwendung von JavaScript-Code zur Steuerung der Animation. Dies führt zu einer wesentlich besseren Leistung und (in den meisten Fällen) fehlerfreien Animationen, schränkt jedoch die Verwendung der Animations-APIs ein.

• Alle aktiven animierten Werte, die einem bestimmten Element zugeordnet sind, müssen die gleichen Timing-Parameter (Dauer, Easing-Funktion, Verzögerung, Schleife) haben und zur gleichen Zeit gestartet werden.
• Jeder animierte Wert kann nur einem aktiv laufenden animierten Attribut zugeordnet sein.
• Interpolierte Werte, die mit startTransition verwendet werden, sind auf nur zwei Werte beschränkt – einen Start- und einen Endwert – und müssen in aufsteigender Reihenfolge angegeben werden.
• Interpolierte Werte, die nicht mit startTransition verwendet werden, müssen numerische outputValues haben, da wir selbst zwischen ihnen interpolieren.
• Bei interpolierten Werten müssen der Start- und Endwert einer Übergangsanimation den beiden Interpolationsschlüsseln entsprechen.
• Wenn eine Animation gestoppt wird, spiegelt der Wert nicht die Zwischenposition bei Transformationen und interpolierten Werten wider.