Tutoriel sur l’animation Android

Tutoriel d'animation Android et exemples.

De manière générale, une animation est un support dynamique dans lequel des images ou des objets sont manipulés pour apparaître comme des images en mouvement.

C'est ce que l'on peut lire sur [Wikipedia] (https://en.wikipedia.org/wiki/Animation). Webopedia, quant à elle, définit une animation comme une simulation de mouvement créée par l'affichage d'une série d'images ou de cadres.

Ce n'est pas l'art de faire bouger les dessins, mais l'art de dessiner le mouvement, selon Science World British Columbia.

Android nous fournit une multitude d'API que nous pouvons utiliser pour animer divers objets de la vue. Ainsi, chaque fois que l'interface utilisateur change en réponse à une action de l'utilisateur, nous devons nous efforcer d'animer les transitions de la mise en page. Les animations sont importantes car elles fournissent aux utilisateurs un retour d'information sur leurs actions. Cela les aide à rester orientés vers l'interface utilisateur.

Pour animer facilement les changements entre deux hiérarchies de vues, nous pouvons utiliser le cadre Android Transitions. Ce cadre anime les vues au moment de l'exécution. Pour ce faire, il modifie certaines des valeurs de propriété de ces vues au fil du temps. Nous disposons d'animations intégrées pour les effets courants. En outre, grâce à ce cadre, nous pouvons créer des animations personnalisées et des rappels du cycle de vie des transitions.

Nous pouvons obtenir des repères visuels par le biais d'animations. Celles-ci peuvent alors informer les utilisateurs de ce qui se passe dans notre application. En particulier lorsque l'interface utilisateur change d'état, par exemple lorsqu'un nouveau contenu est chargé ou que de nouvelles actions sont disponibles.

Android nous fournit plusieurs API d'animation.

(a). Animations Bitmap

Android fournit des API d'animation dessinables. Dans la plupart des cas, ces API sont définies de manière statique avec une ressource dessinable. Cependant, nous pouvons également les définir au moment de l'exécution. Ces APIs d'animation nous permettent d'animer des bitmaps.

!Animation de bitmaps sous Android](https://developer.android.com/training/animation/videos/drawable-animation.gif)

Trouvez plus de détails ici.

(b). Visibilité de l'interface utilisateur et animations de mouvement

Il arrive souvent que vous ayez besoin de manipuler la visibilité ou la position des vues dans une mise en page. Dans ce cas, vous devez inclure des animations subtiles pour aider l'utilisateur à comprendre comment l'interface utilisateur change.

Par exemple, vous pouvez

1. déplacer.
2. révéler.
3. cacher des vues. Pour cela, vous pouvez utiliser le système d'animation des propriétés fourni par le paquet android.animation. Ce paquet est disponible dans Android 3.0 (API level 11) et plus.
   Ces APIs fonctionnent en mettant à jour les propriétés de nos objets View sur une période de temps. Ainsi, les vues sont continuellement redessinées lorsque les propriétés changent.

Trouvez plus de documentation [ici] (https://developer.android.com/training/animation/layout.html).

(c). Mouvement basé sur la physique

Vous pouvez créer des animations en appliquant la physique du monde réel, ce qui donne à ces animations un aspect naturel. Par exemple, elles doivent conserver leur élan lorsque leur cible change, et effectuer des transitions fluides lors de tout changement.

La bibliothèque de support Android nous fournit les API permettant de créer ces animations. Ces API appliquent effectivement les lois de la physique pour contrôler la façon dont vos animations se produisent.

(d). Animations de mise en page

Le cadre de transition nous permet de créer des animations lorsque nous changeons la disposition dans l'activité actuelle du fragment. Cependant, cela ne s'applique qu'à Android 4.4(API Level 19) et plus.

Pour ce faire, vous devez spécifier la disposition de départ et de fin, et le type d'animation que vous souhaitez utiliser. Le système va alors déterminer et exécuter une animation entre les deux dispositions. Vous pouvez l'utiliser pour échanger l'interface utilisateur entière ou pour déplacer/remplacer seulement quelques vues.

(e). Animation d'activités

Vous pouvez également créer des animations qui font la transition entre les activités. Ceci n'est applicable qu'à Android 5.0 (API level 21) et plus. Encore une fois, cela est basé sur le même cadre de transition décrit ci-dessus pour animer les changements de disposition. Cependant, dans ce cas, il nous permet de créer des animations entre des mises en page dans des activités distinctes.

Nous pouvons appliquer des animations simples telles que le glissement latéral ou le fondu de la nouvelle activité. Nous pouvons également créer des animations qui font la transition entre les vues partagées dans chaque activité.

Vous appelez startActivity(), mais vous lui passez un ensemble d'options fournies par ActivityOptions.makeSceneTransitionAnimation(). Ce paquet d'options peut inclure les vues qui sont partagées entre les activités afin que le cadre de transition puisse les connecter pendant l'animation.

ObjectAnimator

Tutoriel et exemples d'ObjectAnimator pour Android.

ObjectAnimator est une classe qui autorise les propriétés sur les objets cibles. Cette classe dérive de android.animation.ValueAnimator.

Ce ValueAnimator est responsable de la mise à disposition d'un moteur de timing simple pour exécuter des animations qui calculent des valeurs animées et les fixent sur les objets cibles.

A travers les constructeurs de notre ObjectAnimator, nous passons l'objet cible qui doit être animé. Nous passons également le nom de la propriété à animer.

Définition de l'API ObjectAnimator

La classe ObjectAnimator dérive de la classe ValueAnimator. Les deux résident dans le paquet android.animation :

public final class ObjectAnimator
extends ValueAnimator

Voici son tee d'héritage :

java.lang.Object
   ↳    android.animation.Animator
       ↳    android.animation.ValueAnimator
           ↳    android.animation.ObjectAnimator

Réglage des animations

Vous pouvez définir les animations à la fois dans le code et dans la ressource statique xml. Voici un exemple de réglage à l'aide de xml :

<objectAnimator
    android_duration="1000"
    android_valueTo="200"
    android_valueType="floatType"
    android_propertyName="y"
    android_repeatCount="1"
    android_repeatMode="reverse"/>

Pour voir comment régler dans le code, passez aux exemples ci-dessous.

Exemples rapides d'ObjectAnimator

1. Comment faire apparaître et disparaître une vue en fondu en utilisant ObjectAnimator.

Notre objectif est de créer des méthodes qui nous permettent de faire un fondu entrant et un fondu sortant.

Tout d'abord, créons une interface AnimationListener :

public interface AnimationListener {

    /**
     * We need to make our View visible
     * before fade in animation starts
     */
    interface OnAnimationStartListener{
        void onAnimationStart();
    }

    /**
     * We need to make View invisible
     * after fade out animation ends.
     */
    interface OnAnimationEndListener{
        void onAnimationEnd();
    }

}

Vous pouvez voir que c'est une interface avec deux signatures de méthodes : onAnimationStart() et onAnimationEnd().

Puis voici la méthode qui fait un fondu dans une vue :

    /**
     * View will appear on screen with
     * fade in animation. Notifies onAnimationStartListener
     * when fade in animation is about to start.
     *
     * @param view
     * @param duration
     * @param onAnimationStartListener
     */
    public static void animateFadeIn(View view, long duration, final AnimationListener.OnAnimationStartListener onAnimationStartListener) {
        ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(view, "alpha", 0f, 1f);
        objectAnimator.setDuration(duration);
        objectAnimator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
                if (onAnimationStartListener != null)
                    onAnimationStartListener.onAnimationStart();
            }

            @Override
            public void onAnimationEnd(Animator animation) {

            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
        objectAnimator.start();
    }

Nous avons initialisé le ObjectAnimator en invoquant la méthode statique ofFloat().
Nous avons ensuite fixé la durée, un long que nous avons reçu via notre méthode comme paramètre. Pour définir la durée, nous avons utilisé la méthode setDuration().

Nous avons ensuite ajouté notre AnimatorListener, où nous invoquons notre méthode personnalisée AnimationListener.onAnimationStart() à l'intérieur de la méthode onAnimationStart() de la classe android.animation.Animator.

Et qu'en est-il du fondu enchaîné ?

Là encore, nous utilisons la classe ObjectAnimator. La différence est que cette fois-ci, nous invoquons la méthode onAnimationEnd() de notre interface personnalisée AnimationListener et nous le faisons à l'intérieur de Animator.OnAnimationEnd() du paquet android.animation.

/**
     * View will disappear from screen with
     * fade out animation. Notifies onAnimationEndListener
     * when fade out animation is ended.
     *
     * @param view
     * @param duration
     * @param onAnimationEndListener
     */
    public static void animateFadeOut(View view, long duration, final AnimationListener.OnAnimationEndListener onAnimationEndListener) {
        ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(view, "alpha", 1, 0);
        objectAnimator.setDuration(duration);
        objectAnimator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {
                if (onAnimationEndListener != null)
                    onAnimationEndListener.onAnimationEnd();
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
        objectAnimator.start();
    }