Outils pour utilisateurs

Outils du site


lang:android:animation

Ceci est une ancienne révision du document !


Généralités

Fonctionnalités

Interpolation

Liste des interpolations avec leur courbe : Android Animation Interpolators Archive du 2014 le 29/05/2023

Il existe :

  • AccelerateDecelerateInterpolator,
  • AccelerateInterpolator,
  • AnticipateInterpolator,
  • AnticipateOvershootInterpolator,
  • BounceInterpolator,
  • CycleInterpolator,
  • DecelerateInterpolator,
  • LinearInterpolator,
  • OvershootInterpolator,
  • PathInterpolator.

Comparaison Animation / Animator

Pour faire des animations, il est possible d'utiliser des classes Animation et des Animator.

Différence entre les deux, en mettant en avant Animator.

+ Plus récent.

+ Composant graphique utilisable pendant l'animation.

+ Permet de synchroniser plusieurs animations sur plusieurs composants graphiques.

+ L'implémentation des listener se fait sur la base d'une classe abstraite et non d'une interface ce qui évite de devoir définir tous les événements.

+ Permet d'enchainer des animations complexes dans la ressource XML.

+ Peuvent s'utiliser pour créer des animated-vector.

- Ne peut s'appliquer qu'à un seul composant graphique à la fois. Sinon, il faut multiplier les instances Animator.

- Nécessite plus de ressource.

- Ne permet pas de déplacer d'un pourcentage de la taille du composant depuis la ressource XML. Nécessite Java.

- Nécessite plus de ligne de code.

- Ne peut pas être créé depuis du code Java (sauf animation très simple). Nécessite d'avoir une ressource XML.

- Animation difficilement personnalisable en Java.

Globalement, Animator est mieux.

What is the difference between an Animator and an Animation? Archive du 29/01/2025 le 29/05/2023

Animation

Ressources

Les ressources XML se mettent dans le dossier res/anim.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
  android:duration="500"
  android:interpolator="@android:anim/accelerate_interpolator"
  >
  <alpha
    android:fromAlpha="0"
    android:toAlpha="1" />
  <translate
    android:fromYDelta="+50%"
    android:toYDelta="0%" />
</set>

Exemples

Animation animation = AnimationUtils.loadAnimation(context, R.anim.animation);
animation.setAnimationListener(new Animation.AnimationListener() {
  @Override
  public void onAnimationStart(Animation animation) {}
 
  @Override
  public void onAnimationEnd(Animation animation) {}
 
  @Override
  public void onAnimationRepeat(Animation animation) {}
});
 
Button button = myView.findViewById(R.id.button);
button.startAnimation(buttonIn);

Ici, animation est un AnimatorSet qui contient 2 animations (AlphaAnimation et TranslateAnimation).

Animator

Ressources

  • Plusieurs animations simples à la suite
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
  android:ordering="sequentially">
  <!-- wait -->
  <objectAnimator android:duration="2350">
    <propertyValuesHolder
      android:propertyName="alpha"
      android:valueFrom="0f"
      android:valueTo="0f"
      android:valueType="floatType" />
  </objectAnimator>
  <objectAnimator
    android:duration="750"
    android:interpolator="@android:anim/accelerate_interpolator">
    <propertyValuesHolder
      android:propertyName="translationY"
      android:valueFrom="250dp"
      android:valueTo="0dp" />
    <propertyValuesHolder
      android:propertyName="translationX"
      android:valueFrom="40dp"
      android:valueTo="0dp" />
    <propertyValuesHolder
      android:propertyName="alpha"
      android:valueFrom="0f"
      android:valueTo="1f"
      android:valueType="floatType" />
  </objectAnimator>
</set>
  • Faire zoomer une image svg

Attention, il faut que les deux images svg soient compatibles (mêmes nombres de points).

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
  <objectAnimator
    android:duration="1000"
    android:interpolator="@android:anim/bounce_interpolator"
    android:propertyName="pathData"
    android:valueFrom="M 0 125 A 10 10 90 0 1 250 125 A 10 10 90 0 1 0 125 z"
    android:valueTo="M 40 125 A 10 10 90 0 1 210 125 A 10 10 90 0 1 40 125 z"
    android:valueType="pathType" />
</set>
  • Image animée

L'animator.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
  <objectAnimator
    android:duration="2000"
    android:propertyName="fillAlpha"
    android:startOffset="0"
    android:valueFrom="0.3f"
    android:valueTo="1.0f"
    android:valueType="floatType" />
</set>

L'image.

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
  android:width="100dp"
  android:height="200dp"
  android:viewportWidth="180"
  android:viewportHeight="360">
 
  <path
    android:name="path"
    android:fillAlpha="0.3"
    android:fillColor="@color/md_theme_dark_onBackground"
    android:pathData="M 80 37.5 A 1 1 10 0 1 100 37.5 A 1 1 10 0 1 80 37.5 z" />
 
</vector>

L'image animée.

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
  android:drawable="@drawable/image">
 
  <target
    android:name="path"
    android:animation="@animator/animator" />
</animated-vector>

Exemples

  • Minimaliste
Animator animator = AnimatorInflater.loadAnimator(context, R.animator.animator);
Button button = myView.findViewById(R.id.button);
animator.setTarget(button);
  • Modifier une valeur d'un champ.

Il n'existe pas de méthode générique. Il faudra que l'animation XML soit parfaitement cohérente avec le code Java.

((ValueAnimator)((AnimatorSet) animator).getChildAnimations().get(0)).getValues()[0].setFloatValues(0.1f);
  • Piloter plusieurs animations
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.playTogether(anim1, anim2);
animatorSet.addListener(new AnimatorListenerAdapter() {
  @Override
  public void onAnimationEnd(Animator animation) {
    callback.run();
  }
});
animatorSet.start();

Attention, si une animation a un StartDelay et pas les autres, il faudra faire attention à l'ordre (lequel?) dans la méthode playTogether.

Note that an Animator with a startDelay will not actually start until that delay elapses, which means that if the first animator in the list supplied to this constructor has a startDelay, none of the other animators will start until that first animator's startDelay has elapsed.AnimatorSet Archive du 08/03/2023 le 29/05/2023

lang/android/animation.1685352556.txt.gz · Dernière modification : 2023/05/29 11:29 de root