Guillaume André

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

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*