Silverlight 3 introduit les Easing Animation. Ce sont ni plus ni moins que des animations avec des décélarations et accélérations. En Silverlight 2 il était nécessaire d’utiliser des AnimationUsingKeyFrames et des KeySplines. A présent il suffit de choisir un type d’animation prédéfini pour appliquer une animation à n’importe quel objet et obtenir des effets graphiques plutôt intéressants.
Silverlight 3 Animation Easing en vidéo
View on Vimeo.
Quelques explications
Côté XAML :
         <DoubleAnimation From=”0″ To=”300″ Duration=”0:0:3″ Storyboard.TargetName=”monElement” Storyboard.TargetProperty=”(Canvas.Left)”>
           <DoubleAnimation.EasingFunction>
             <BackEase EasingMode=”EaseOut” Amplitude=”1″></BackEase>
           </DoubleAnimation.EasingFunction>
         </DoubleAnimation>
Chaque “Easing Animation” a ses propres propriétés afin de pouvoir la personnaliser à souhait, cependant toutes les “Easing Animation” ont la propriété EasingMode en communs. Cette propriété permet de renseigner lorsque le “Easing” s’applique, à savoir, à la fin, au début ou à la fin et au début de l’animation: EaseIn, EaseOut, EaseInOut.
Voici les types d’animation prédéfinis :Â
- BackEase
- BounceEase
- CircleEase
- CubicEase
- ElasticEase
- ExponentialEase
- PowerEase
- QuadraticEase
- QuarticEase
- QuinticEase
- SineEase
Comme le montre la vidéo, il est possible d’animer n’importe quelle propriété. Il est donc tout à fait envisageable d’animer une propriété 3D d’un élément XAML via le path XAML suivant :
(UIElement.Projection).(PlaneProjection.RotationX)
Ce path est à insérer dans la propriété Storyboard.TargetProperty de l’animation.
*Cet exemple a été conçu avec Silverlight 3 Béta 1*