Erstellen von Animationen mit MotionLayout für Android

Dieses Tutorial zeigt, wie Widgets in Ihrer Android -App mit MotionLayout leicht animieren können, eine signifikante Verbesserung gegenüber früheren, umständlichen Methoden. MotionLayout, Teil von ConstraintLayout 2.0 und höher, vereinfacht das Erstellen benutzerdefinierter Übergänge.

Stellen Sie zunächst sicher, dass Ihr Layout ConstraintLayout Version 2.0.0 oder höher verwendet. Der einfachste Weg, um MotionLayout zu integrieren, besteht darin, Ihre Layoutansicht in Android Studio von "Code" auf "Design" oder "Split" -Ansicht zu wechseln. Dies zeigt das Komponentenbaumbereich, in dem Sie ein MotionLayout Element hinzufügen können. Wir fügen eine Schaltfläche mit dem Bezeichnung "Sprung" unter A TextView hinzu - Klicken auf diese Schaltfläche löst die Animation aus.

Der Kern der Animation ist in einer MotionScene -Datei definiert (z. B. activity_main_scene.xml). Diese XML -Datei verwendet ConstraintSet Tags, um die Start- und Endzustände des Widgets zu definieren. Hier ist ein vereinfachtes Beispiel:

<code class="language-xml"><?xml version="1.0" encoding="utf-8"?>
<motionscene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto">

    <transition motion:constraintsetend="@+id/end" motion:constraintsetstart="@+id/start" motion:duration="200" motion:motioninterpolator="easeIn">
        <onclick motion:targetid="@+id/button" motion:clickaction="transitionToEnd"></onclick>
    </transition>

    <constraintset android:id="@+id/start">
        <constraint android:id="@+id/textView">
            <customattribute motion:attributename="textColor" motion:customcolorvalue="@color/black"></customattribute>
        </constraint>
    </constraintset>

    <constraintset android:id="@+id/end">
        <constraint android:id="@+id/textView" android:scalex="2" android:scaley="2">
            <layout android:layout_marginbottom="40sp" android:layout_width="wrap_content" android:layout_height="wrap_content" motion:layout_constraintbottom_totopof="@id/button"></layout>
            <customattribute motion:attributename="textColor" motion:customcolorvalue="@color/teal_700"></customattribute>
        </constraint>
    </constraintset>

</motionscene></code>

Dieses MotionScene definiert einen Übergang, der die TextView bis zum doppelten Größe skaliert und seine Farbe ändert, wenn die Schaltfläche klickt. Das OnClick Tag löst den Übergang aus. Die ConstraintSet Tags geben die initial ("start") und endgültige ("Ende") an.

Im Kotlin -Code Ihrer Aktivität müssen Sie die Animation auslösen. Dies erfolgt durch Verweisen auf die MotionLayout und rufe transitionToEnd():

auf

<code class="language-kotlin">fun start(v: View) {
    val motionContainer = findViewById<motionlayout>(R.id.motion_container)
    motionContainer.transitionToEnd()
}</motionlayout></code>

Für komplexere Animationen sollten Sie den Motion -Editor von Android Studios für visuelles Design verwenden. Auf diese Weise können Sie Animationen erstellen und Vorschau haben, ohne alle XML manuell zu schreiben. Sie können auch TransitionListener hinzufügen, um Code in verschiedenen Phasen der Animation auszuführen.

Dieser Ansatz bietet eine detaillierte Kontrolle über Ihre Animationen, die anspruchsvolle Übergänge und Ereignisbehandlungen innerhalb des Animationslebenszyklus ermöglichen. Denken Sie daran, Platzhalter -Bild -URLs durch tatsächliche Bildpfade zu ersetzen.

Das obige ist der detaillierte Inhalt vonErstellen von Animationen mit MotionLayout für Android. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!