Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

Flex Effect: Animation Easing Personalisée (easingFunction) et exemple

Pour tous les effets Tween (blur, move, fade, glow, ...), vous pouvez contrôler l'easing (assouplissement) qui lui est appliqué. Le terme easing correspond à la vitesse à laquelle l'effet est appliqué. La valeur par défaut du type d'easing est Linear, ce qui veut dire que l'effet est appliqué à une cadence fixe du début à la fin. Cependant, vous pouvez appliquer des effets dans un style non linéaire. Vous pouvez appliquer un easing personalisé en utilisant la propriété easingFunction.

La propriété easingFunction vous permet d'assigner une référence vers une fonction qui va accepter 4 paramètres numériques (temps de lecture, valeur initiale, nombre de changements de valeurs et durée de l'effet) et qui retourne la nouvelle valeur à utiliser. L'effet appele ensuite la fonction automatiquement chaque fois qu'il a besoin de mettre à jour la valeur de la propriété pour le composant cible. Bien que vous pouviez créer vos propres easing functions, vous trouverez surement plus simple d'essayer une des nombreuses fonctions d'easing qui sont inclues dans le package mx.effects.easing du Framework Flex.

Le package mx.effects.easing inclut un assortiment de classes telles que Cubic, Elastic, Exponential, Quadratic et bien d'autres. Chaque classe a une méthode static appellée easeIn, easeOut et easeInOut. Vous pouvez référencez ces fonctions à utiliser avec les effets. Voici un exemple simple qui applique un easing elastic easeOut à un effet Fade:

<mx:Fade id="fadeEffect" easingFunction="{mx.effects.easing.Elastic.easeOut}"/>

Vous trouverez ci-dessous un SWF présentant tous les effets Flex ainsi que leur easingFunction.

Cette application Flex est diffusée par bloginblack.de, et souffre encore de quelques bugs

Flex Source Code Download: Télécharger le code source complet de l'application