Animations

Depuis android HoneyComb, il est possible d’effectuer des animations depuis votre activité, en utilisant les animations les ObjectAnimator.

Un ObjectAnimator a besoin d’une Vue, puis agit sur une propriété :

  • “alpha”
  • “translationX”
  • “translationY”
  • “scaleX”
  • “scaleY”

Puis une suite de valeurs par lesquels passeront votre animation

ObjectAnimator.ofFloat(VIEW, PROPRIETE, VALEURS).start();

Par défaut, la durée des animations est de 300ms, il est possible de la modifier avec la méthode .setDuration(DURATION)

Nous pouvons par exemple avoir

ObjectAnimator.ofFloat(imageView, "alpha", 1, 0.1f, 1).setDuration(1500).start();

Regardez comme il est simple d’animer nos vues :

//TranslationX
ObjectAnimator.ofFloat(image, "translationX", 0, 100, 0).setDuration(800).start();
//translationY 

ObjectAnimator.ofFloat(image, "translationY", 0, -100, 200, 0).setDuration(800).start();

//Scale
ObjectAnimator.ofFloat(image, "scaleX", 1, 10, 1).setDuration(1500).start();
ObjectAnimator.ofFloat(image, "scaleY", 1, 0.5f, 1).setDuration(1500).start();

Modifier la vitesse de l’animation

Par défaut la vitesse de l’animation est linéaire, c’est à dire qu’elle reste constante tout au long de l’effet.
Vous pouvez la modifier pour ajouter des effets d’accélération par exemple. Cela se fait en définissant un Interpolator à notre animation.

Le SDK android fournit plusieurs interpolators, dont :

  • LinearInterpolator : constant
  • AccelerateInterpolator : accélère
  • DecelerateInterpolator : ralentit
  • AccelerateDecelerateInterpolator : accélère au début, puis ralentit
  • BounceInterpolator : ajoute un effet de rebond

Exemple

ObjectAnimator animator = ObjectAnimator.ofFloat(image, "translationX", 0, 100, 0).setDuration(800);
animator.setInterpolator(new BounceInterpolator());
animator.start();

Combiner des animations

Afin de coordonner vos animations, vous pouvez utiliser l’objet AnimatorSet

Together

Si vous souhaitez que plusieurs animations s’éxécutent en même temps : animatorSet.playTogether

AnimatorSet animatorSet = new AnimatorSet();
animatorSet.playTogether(
                ObjectAnimator.ofFloat(image, "translationX", 0, 100, -100, 0),
                ObjectAnimator.ofFloat(image, "translationY", 0, 100, -100, 0),
                ObjectAnimator.ofFloat(image, "alpha", 1, 0.5f, 1)
);
animatorSet.setDuration(1000);
animatorSet.setInterpolator(new AccelerateInterpolator());
animatorSet.start();

Sequentially

Si vous souhaitez que plusieurs animations s’éxécutent les unes à la suite des autres : animatorSet.playTogether

AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.playSequentially(
                ObjectAnimator.ofFloat(image, "translationX", 0, 100, -100, 0),
                ObjectAnimator.ofFloat(image, "translationY", 0, 100, -100, 0),
                ObjectAnimator.ofFloat(image, "alpha", 1, 0.5f, 1)
        );
        animatorSet.setDuration(1000);
        animatorSet.setInterpolator(new AccelerateInterpolator());
        animatorSet.start();

Les sources de ce tuto sont disponibles sur github

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *