Création d'animations avec MotionLayout pour Android

Ce tutoriel montre comment animer facilement les widgets dans votre application Android à l'aide de MotionLayout, une amélioration significative par rapport aux méthodes précédentes et plus encombrantes. MotionLayout, faisant partie de ConstraintLayout 2.0 et supérieur, simplifie la création de transitions personnalisées.

Pour commencer, assurez-vous que votre mise en page utilise ConstraintLayout version 2.0.0 ou supérieure. Le moyen le plus simple d'intégrer MotionLayout est de changer votre vue de mise en page dans Android Studio de "Code" à "concevoir" ou "Split" View. Cela révèle le panneau d'arborescence des composants, où vous pouvez ajouter un élément MotionLayout. Nous ajouterons un bouton intitulé "Jump" sous A TextView - Cliquez sur ce bouton déclenchera l'animation.

Le noyau de l'animation est défini dans un fichier MotionScene (par exemple, activity_main_scene.xml). Ce fichier XML utilise des balises ConstraintSet pour définir les états de démarrage et de fin du widget. Voici un exemple simplifié:

<?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" />
    </Transition>

    <ConstraintSet android:id="@+id/start">
        <Constraint android:id="@+id/textView">
            <CustomAttribute motion:attributeName="textColor" motion:customColorValue="@color/black" />
        </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" />
            <CustomAttribute motion:attributeName="textColor" motion:customColorValue="@color/teal_700" />
        </Constraint>
    </ConstraintSet>

</MotionScene>

Cet MotionScene définit une transition qui évolue le TextView pour deux fois sa taille et modifie sa couleur lorsque le bouton est cliqué. La balise OnClick déclenche la transition. Les balises ConstraintSet spécifient les états initiaux ("start") et final ("end").

Dans le code Kotlin de votre activité, vous devrez déclencher l'animation. Cela se fait en faisant référence au MotionLayout et en appelant transitionToEnd():

fun start(v: View) {
    val motionContainer = findViewById<MotionLayout>(R.id.motion_container)
    motionContainer.transitionToEnd()
}

Pour des animations plus complexes, envisagez d'utiliser l'éditeur de mouvement d'Android Studio pour la conception visuelle. Cela vous permet de créer et de prévisualiser des animations sans écrire manuellement tout le XML. Vous pouvez également ajouter TransitionListener pour exécuter du code à différentes étapes de l'animation.

Cette approche offre un contrôle granulaire sur vos animations, permettant des transitions sophistiquées et une gestion des événements dans le cycle de vie de l'animation. N'oubliez pas de remplacer les URL de l'image par l'image par des chemins d'image réels.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!