Animationen anpassen

Viele der Animations-APIs akzeptieren häufig Parameter zum Anpassen der verhalten.

Animationen mit dem Parameter AnimationSpec anpassen

Mit den meisten Animations-APIs können Entwickler die Animationsspezifikationen durch eine Optionaler Parameter AnimationSpec.

val alpha: Float by animateFloatAsState(
    targetValue = if (enabled) 1f else 0.5f,
    // Configure the animation duration and easing.
    animationSpec = tween(durationMillis = 300, easing = FastOutSlowInEasing)
)
AnimationSnippets.kt

Es gibt verschiedene Arten von AnimationSpec, um verschiedene Arten von Animation.

Mit spring physikbasierte Animationen erstellen

spring erstellt zwischen Start- und Endwerten eine physikbasierte Animation. Es Für sind zwei Parameter erforderlich: dampingRatio und stiffness.

dampingRatio definiert, wie schnell die Feder sein soll. Der Standardwert ist Spring.DampingRatioNoBouncy

Abbildung 1: Verschiedene Federdämpfungsverhältnisse festlegen.

stiffness definiert, wie schnell sich die Feder in Richtung des Endwerts bewegen soll. Die Der Standardwert ist Spring.StiffnessMedium.

Abbildung 2: Unterschiedliche Federsteifheit einstellen

val value by animateFloatAsState(
    targetValue = 1f,
    animationSpec = spring(
        dampingRatio = Spring.DampingRatioHighBouncy,
        stiffness = Spring.StiffnessMedium
    )
)
AnimationSnippets.kt

spring kann Unterbrechungen besser verarbeiten als je nach Dauer AnimationSpec-Typs, weil dadurch die Kontinuität der Geschwindigkeit gewährleistet wird, Zielwertänderungen inmitten von Animationen. spring wird als Standard verwendet AnimationSpec von vielen Animations-APIs wie animate*AsState und updateTransition

Wenn wir beispielsweise eine spring-Konfiguration auf die folgende Animation anwenden, die durch eine Berührung des Nutzers ausgelöst wird, und die Animation während des Fortschritts unterbrechen, sehen Sie, dass die Verwendung von tween nicht so reibungslos reagiert wie die Verwendung von spring.

Abbildung 3: Festlegen von tween vs. spring-Spezifikationen für Animationen und Unterbrechung der Animation.

Mit tween mit einer Easing-Kurve zwischen Start- und Endwerten animieren

tween animiert zwischen Start- und Endwerten über den angegebenen durationMillis mit einer Easing-Kurve. tween ist die Abkürzung für das Wort dazwischen, da es zwischen zwei Werten steht.

Sie können auch delayMillis angeben, um den Start der Animation zu verschieben.

val value by animateFloatAsState(
    targetValue = 1f,
    animationSpec = tween(
        durationMillis = 300,
        delayMillis = 50,
        easing = LinearOutSlowInEasing
    )
)
AnimationSnippets.kt

Weitere Informationen finden Sie unter Easing.

Mit keyframes zu bestimmten Werten zu bestimmten Zeiten animieren

keyframes animiert basierend auf den Snapshot-Werten, die in verschiedenen Zeitstempel in der Dauer der Animation. Die Animation kann jederzeit zwischen zwei Keyframe-Werten interpoliert. Für jede dieser Keyframes haben, kann Easing zur Bestimmung der Interpolationskurve angegeben werden.

Optional können die Werte bei 0 ms und zum Zeitpunkt der Dauer angegeben werden. Wenn Sie werden diese Werte nicht angegeben, sondern werden standardmäßig auf die Start- und Endwerte der Animationen.

val value by animateFloatAsState(
    targetValue = 1f,
    animationSpec = keyframes {
        durationMillis = 375
        0.0f at 0 with LinearOutSlowInEasing // for 0-15 ms
        0.2f at 15 with FastOutLinearInEasing // for 15-75 ms
        0.4f at 75 // ms
        0.4f at 225 // ms
    }
)
AnimationSnippets.kt

Animation mit repeatable wiederholen

repeatable führt eine auf der Dauer basierende Animation aus (z. B. tween oder keyframes) wiederholt, bis die angegebene Iterationsanzahl erreicht ist. Sie können die Parameter repeatMode, der angibt, ob die Animation bis zum Ende beginnend am Anfang (RepeatMode.Restart) oder am Ende (RepeatMode.Reverse)

val value by animateFloatAsState(
    targetValue = 1f,
    animationSpec = repeatable(
        iterations = 3,
        animation = tween(durationMillis = 300),
        repeatMode = RepeatMode.Reverse
    )
)
AnimationSnippets.kt

Mit infiniteRepeatable unendlich eine Animation wiederholen

infiniteRepeatable ist wie repeatable, aber dies wird unbegrenzt wiederholt von Iterationen.

val value by animateFloatAsState(
    targetValue = 1f,
    animationSpec = infiniteRepeatable(
        animation = tween(durationMillis = 300),
        repeatMode = RepeatMode.Reverse
    )
)
AnimationSnippets.kt

In Tests mit ComposeTestRule, Animationen mit infiniteRepeatable werden nicht ausgeführt. Die Komponente wird mit dem Anfangswert jedes animierten Werts gerendert.

Mit snap sofort an Endwert andocken

snap ist eine spezielle AnimationSpec, die den Wert sofort auf den Wert Endwert. Sie können delayMillis angeben, um den Start des Ereignisses Animation.

val value by animateFloatAsState(
    targetValue = 1f,
    animationSpec = snap(delayMillis = 50)
)
AnimationSnippets.kt

Benutzerdefinierte Easing-Funktion festlegen

Für zeitbasierte AnimationSpec-Vorgänge (z. B. tween oder keyframes) wird Folgendes verwendet: Easing, um den Bruch einer Animation anzupassen. So kann der Animationswert und verlangsamen, anstatt sich konstant zu bewegen. Bruch ist ein zwischen 0 (Start) und 1,0 (Ende), der den aktuellen Punkt im Animation.

Easing ist eine Funktion, die einen Bruchwert zwischen 0 und 1,0 gibt eine Gleitkommazahl zurück. Der zurückgegebene Wert kann außerhalb der Begrenzung liegen, um Folgendes darzustellen: über- oder unterlappen. Ein benutzerdefiniertes Easing kann wie im folgenden Code erstellt werden.

val CustomEasing = Easing { fraction -> fraction * fraction }

@Composable
fun EasingUsage() {
    val value by animateFloatAsState(
        targetValue = 1f,
        animationSpec = tween(
            durationMillis = 300,
            easing = CustomEasing
        )
    )
    // ……
}
AnimationSnippets.kt

Compose bietet mehrere integrierte Easing-Funktionen, die die meisten Anwendungsfälle abdecken. Weitere Informationen findest du unter Speed – Material Design. Informationen darüber, was Easing je nach Szenario verwendet werden soll.

  • FastOutSlowInEasing
  • LinearOutSlowInEasing
  • FastOutLinearEasing
  • LinearEasing
  • CubicBezierEasing
  • Mehr anzeigen

Benutzerdefinierte Datentypen durch Konvertierung in und aus AnimationVector animieren

Die meisten APIs für das Erstellen von Animationen unterstützen Float, Color, Dp und andere grundlegende Daten werden als Animationswerte angezeigt. Manchmal müssen jedoch Animationen und anderen Datentypen, einschließlich benutzerdefinierter Datentypen. Während der Animation werden wird als AnimationVector dargestellt. Der Wert wird in ein AnimationVector und umgekehrt durch eine entsprechende TwoWayConverter, sodass kann das Animationssystem gleichmäßig mit ihnen umgehen. Ein Int ist beispielsweise dargestellt als AnimationVector1D mit einem einzelnen Gleitkommawert. TwoWayConverter für Int sieht so aus:

val IntToVector: TwoWayConverter<Int, AnimationVector1D> =
    TwoWayConverter({ AnimationVector1D(it.toFloat()) }, { it.value.toInt() })
AnimationSnippets.kt

Color ist im Wesentlichen eine Gruppe von vier Werten: Rot, Grün, Blau und Alpha. Color wird in eine AnimationVector4D umgewandelt, die vier Gleitkommawerte enthält. In So wird jeder in Animationen verwendete Datentyp entweder AnimationVector1D, AnimationVector2D, AnimationVector3D oder AnimationVector4D abhängig von seiner Dimensionalität. So können verschiedene Komponenten des Objekts werden unabhängig voneinander animiert, jede mit ihrer eigenen Geschwindigkeitsverfolgung. Integrierte Converter für grundlegende Datentypen sind verfügbar mithilfe von Konvertern wie Color.VectorConverter oder Dp.VectorConverter.

Wenn Sie einen neuen Datentyp als Animationswert unterstützen möchten, können Sie eine eigene TwoWayConverter erstellen und der API zur Verfügung stellen. Zum Beispiel haben Sie können Sie mit animateValueAsState Ihren benutzerdefinierten Datentyp so animieren:

data class MySize(val width: Dp, val height: Dp)

@Composable
fun MyAnimation(targetSize: MySize) {
    val animSize: MySize by animateValueAsState(
        targetSize,
        TwoWayConverter(
            convertToVector = { size: MySize ->
                // Extract a float value from each of the `Dp` fields.
                AnimationVector2D(size.width.value, size.height.value)
            },
            convertFromVector = { vector: AnimationVector2D ->
                MySize(vector.v1.dp, vector.v2.dp)
            }
        )
    )
}
AnimationSnippets.kt

Die folgende Liste enthält einige integrierte VectorConverters:

Zurück
Animierte Vektorbilder
Weiter
Animationen testen