Contrairement à ce que pensent un bon nombre de développeurs, Expression Blend n’est pas fait que pour les designers ! Si vous l’ouvrez, et commencez à éditer une page, vous retrouverez le même affichage que sur Visual Studio : c’est à dire l’aperçu et le code.

Si on prend quelques heures pour s’y habituer et apprendre à l’utiliser, il peut s’avérer bien utile et vous rendre très productif !

Cet article parle de la quatrième bonne raison de l’utiliser : Les animations . Grâce à cette fonctionnalité, animez facilement et rapidement vos applications sans mettre les mains dans le code. Une fonctionnalité a portée de tous, pour un effet “in motion” dans toutes vos applications ! Grâce aux animations vous pouvez créer des transitions d’écran impressionnantes, des animations bluffantes et fournir des aides visuelles utiles à votre utilisateur. 

Programme

Semaine 0 : Introduction

Semaine 1 : La Puissance du designer

Semaine 2 : TFS intégré à Blend

Semaine 3 : Visualiser vos fichiers de ressources

<Storyboard x:Name="StoryboardLoading">
 <PointAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)" Storyboard.TargetName="path">
 <EasingPointKeyFrame KeyTime="0:0:1" Value="0.112,0.16"/>
 <EasingPointKeyFrame KeyTime="0:0:1.6" Value="0.114,0.156"/>
 </PointAnimationUsingKeyFrames>
 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="path">
 <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0">
 <EasingDoubleKeyFrame.EasingFunction>
 <QuarticEase EasingMode="EaseInOut"/>
 </EasingDoubleKeyFrame.EasingFunction>
 </EasingDoubleKeyFrame>
 <EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="-120.507">
 <EasingDoubleKeyFrame.EasingFunction>
 <QuarticEase EasingMode="EaseInOut"/>
 </EasingDoubleKeyFrame.EasingFunction>
 </EasingDoubleKeyFrame>
 </DoubleAnimationUsingKeyFrames>
 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="path1">
 <EasingDoubleKeyFrame KeyTime="0" Value="0">
 <EasingDoubleKeyFrame.EasingFunction>
 <CircleEase EasingMode="EaseOut"/>
 </EasingDoubleKeyFrame.EasingFunction>
 </EasingDoubleKeyFrame>
 <EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="1">
 <EasingDoubleKeyFrame.EasingFunction>
 <CircleEase EasingMode="EaseOut"/>
 </EasingDoubleKeyFrame.EasingFunction>
 </EasingDoubleKeyFrame>
 </DoubleAnimationUsingKeyFrames>
 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="path2">
 <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
 <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.5"/>
 </DoubleAnimationUsingKeyFrames>
 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="path3">
 <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0"/>
 <EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0.75"/>
 </DoubleAnimationUsingKeyFrames>
 </Storyboard>
    

– Le panneau “Object and Timeline” dans lequel vous allez définir vos images clés ou key frame selon la timeline. Sur l’image ci-contre, les cercles représentent ces keys frame. Ils définissent le début et la fin d’une animation pour un élément visuel sélectionné à gauche dans l’arbre visuel de la page.

Lorsque dans un storyboard vous changez une propriété de votre élément visuel, Blend va automatiquement créer une key frame à l’instant t ou se trouve le curseur.

Vous pouvez vous-même créer une key frame en appuyant sur le bouton “+”.

Comme pour une animation From/To/By, une animation d’image clé anime la valeur d’une propriété cible. Elle crée une transition parmi ses valeurs cibles sur la durée. Une animation d’image clé unique peut créer des transitions parmi n’importe quel nombre de valeurs cibles. Les valeurs cibles d’une animation d’image clé sont décrites à l’aide d’objets d’images clés.

Vous pouvez ainsi dans votre storyboard, définir autant d’image clé que nécessaire afin de faire varier les propriétés de vos éléments visuels que vous souhaitez changer pour créer l’animation.

Exemple d’animations

1) Effet “fade” : opacité

Nous voulons créer une animation de chargement d’une application Windows Phone. Pour cela, nous souhaitons faire apparaître des rectangles avec un effet “fade”. Si vous voulez avoir un aperçu réel de l’animation, je vous invite à installer l’application sur votre Windows Phone ( https://www.windowsphone.com/fr-fr/store/app/tile-up/38061b14-61ee-4ed6-972c-07e60c27891c  ).

Pour cela, nous allons jouer sur l’opacité des rectangle et la faire varier au cours du temps comme ci-dessous :

3) Effet “flip”

Afin de créer un effet “flip”, une tuile qui se retourne par exemple, on va utiliser une animation de type “scale”. Pour cela, il faut créer deux Grid, une appelée “Front” et une autre appelée “Back”. Nous allons créer un premier storyboard qui va faire changer le scale et l’opacité comme ci-dessous de la première grid “Front” :

Ensuite il vous faudra faire la même chose sur la grid “Back” et enfin créer un deuxième Storyboard qui effectue la même chose mais en sens inverse (en partant de la grid “Back” visible vers la grid “Front” visible).

Voici le code xaml, généré par Blend :

<Storyboard x:Name="Storyboard_BacktoFront">
 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Back">
 <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
 </DoubleAnimationUsingKeyFrames>
 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="Front">
 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
 <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
 </DoubleAnimationUsingKeyFrames>
 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Front">
 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
 <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
 </DoubleAnimationUsingKeyFrames>
 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="Front">
 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
 <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
 </DoubleAnimationUsingKeyFrames>
 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="Back">
 <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
 <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
 </DoubleAnimationUsingKeyFrames>
 </Storyboard>
 <Storyboard x:Name="Storyboard_FronttoBack">
 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Back">
 <SplineDoubleKeyFrame KeyTime="0" Value="0"/>
 <SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
 <SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
 </DoubleAnimationUsingKeyFrames>
 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="Front">
 <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
 <SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
 </DoubleAnimationUsingKeyFrames>
 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Front">
 <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
 <SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
 </DoubleAnimationUsingKeyFrames>
 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="Front">
 <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
 <SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
 </DoubleAnimationUsingKeyFrames>
 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="Back">
 <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
 <SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
 <SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
 </DoubleAnimationUsingKeyFrames>
 </Storyboard>

4) Animer une image dans une tuile

Pour reproduire une tuile animée avec une image qui bouge à l’intérieur, comme la tuile “Photos” de votre Windows Phone, rien de plus simple avec Blend :

Créez un contrôle contenant votre image et définissez lui la taille que vous souhaitez avec sa propriété “Stretch” en “UniformToFill”. Ensuite vous n’avez plus qu’à créer un Storyboard dans lequel vous allez créer une animation de translation selon l’axe que vous souhaitez :

Ici on a créé une animation qui dure 14 secondes et qui déplace l’image sur l’axe des X. Ensuite il vous suffira de sélectionner le nom du Storyboard et dans ses propriétés de cocher la case “AutoReverse” afin que celui-ci lise l’animation à l’inverse dès les 14 secondes écoulées puis de sélectionner le “RepeatBehavior” en “Forever” pour que votre animation tourne en boucle.

Voici le code xaml, généré par Blend :

<Storyboard x:Name="StoryboardMoveImage" RepeatBehavior="Forever" AutoReverse="True">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="image">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
 <EasingDoubleKeyFrame KeyTime="0:0:14.3" Value="-155"/>
 </DoubleAnimationUsingKeyFrames>
</Storyboard>

Vous pouvez également appliquer sur votre animation de translation, une easing fonction afin de définir un effet d’accélération sur l’animation selon différentes formules mathématiques (définies ci-dessous dans l’article).

Visual State

Autre moyen pour animer vos interfaces, est d’utiliser les Visual State afin de définir des états et animations pour vos contrôles. En effet, les contrôles peuvent posséder plusieurs états visuels, ce que l’on appelle les Visual States en fonction des interactions avec l’utilisateur.

Prenons l’exemple des boutons : ils définissent un certain nombre d’états qu’ils soient survolés ou non par la souris, un peu comme on peut le faire avec les feuilles de style CSS définissant un état pour les liens dans une page web.

Comment modifier les états d’un contrôle ?

Pour modifier les différents états de votre contrôle, cela se passe au niveau du Template de ce dernier (par ex.: clique droit sur votre bouton puis “Edit Template”). Ensuite, dans le panneau “Visual State”, les différents états de votre contrôle apparaissent :

Le fonctionnement des Visual State est le même que les Storyboards. En sélectionnant un état vous passez en mode édition comme si votre état était lui-même un storyboard.

Exemple avec un contrôle de type bouton :

Lorsque vous éditez le template d’un bouton, dans le panneau “States” ses différents états apparaîssent alors. Vous pouvez les éditer de la même façon qu’un storyboard afin de créer des animations en fonction des différents états du contrôle :

Si vous regardez le code xaml généré, vous verez alors que pour chaque état, un storyboard est alors créé :

<Style x:Key="ButtonStyle" TargetType="Button">
 <Setter Property="Background" Value="Transparent"/>
 <Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
 <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
 <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
 <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
 <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
 <Setter Property="Padding" Value="12,8,12,8"/>
 <Setter Property="Template">
 <Setter.Value>
 <ControlTemplate TargetType="Button">
 <Grid Background="Transparent">
 <VisualStateManager.VisualStateGroups>
 <VisualStateGroup x:Name="CommonStates">
 <VisualState x:Name="Normal"/>
 <VisualState x:Name="MouseOver"/>
 <VisualState x:Name="Pressed">
 <Storyboard>
 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
 <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/>
 </ObjectAnimationUsingKeyFrames>
 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
 <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
 </ObjectAnimationUsingKeyFrames>
 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
 <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Null}"/>
 </ObjectAnimationUsingKeyFrames>
 </Storyboard>
 </VisualState>
 <VisualState x:Name="Disabled">
 <Storyboard>
 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
 <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
 </ObjectAnimationUsingKeyFrames>
 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
 <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Null}"/>
 </ObjectAnimationUsingKeyFrames>
 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
 <DiscreteObjectKeyFrame KeyTime="0">
 <DiscreteObjectKeyFrame.Value>
 <SolidColorBrush Color="#FF3646E4"/>
 </DiscreteObjectKeyFrame.Value>
 </DiscreteObjectKeyFrame>
 </ObjectAnimationUsingKeyFrames>
 <DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ButtonBackground" d:IsOptimized="True"/>
 </Storyboard>
 </VisualState>
 </VisualStateGroup>
 <VisualStateGroup x:Name="FocusStates"/>
 </VisualStateManager.VisualStateGroups>
 <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0">
 <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
 </Border>
 </Grid>
 </ControlTemplate>
 </Setter.Value>
 </Setter>
 </Style>

Astuce : Le mode animation

Si vous avez beaucoup d’animations à créer et souhaitez passer dans une vue plus confortable pour la création de vos storyboard. Sachez qu’il existe un espace de travail spécial animations, pour cela dans Blend utilisez le menu “Windows” puis “Workspaces” et sélectionnez “Animation” comme ceci :

Easing functions

Les fonctions d’accélération vous permettent d’appliquer des formules mathématiques personnalisées à vos animations. Par exemple, vous pouvez souhaiter qu’un objet rebondisse de façon réaliste ou se comporte comme s’il se trouvait sur un ressort.

Voici les easing functions que vous pouvez utiliser pour vos animations :

• BackEase  : rétracte légèrement le mouvement d’une animation avant qu’elle ne commence à s’animer sur la trajectoire indiquée.
• BounceEase  : crée un effet rebondissant.
• CircleEase  : crée une animation qui accélère et/ou ralentit à l’aide d’une fonction circulaire.
• CubicEase  : crée une animation qui accélère et/ou ralentit à l’aide de la formule f(t) = t3.
• ElasticEase  : crée une animation qui ressemble à un ressort oscillant jusqu’à s’arrêter.
• ExponentialEase  : crée une animation qui accélère et/ou ralentit à l’aide d’une formule exponentielle.
• PowerEase  : crée une animation qui accélère et/ou ralentit à l’aide de la formule f(t) = tp où p est égal à la propriété Power.
• QuadraticEase  : crée une animation qui accélère et/ou ralentit à l’aide de la formule f(t) = t2.
• QuarticEase  : crée une animation qui accélère et/ou ralentit à l’aide de la formule f(t) = t4.
• QuinticEase  : crée une animation qui accélère et/ou ralentit à l’aide de la formule f(t) = t5.
• SineEase  : crée une animation qui accélère et/ou ralentit à l’aide d’une formule de sinus.

Comment les appliquer ?

Dans le panneau “Objects and timeline” en mode storyboard, sélectionnez une animation (RenderTransform par exemple) et sur la droite dans le panneau des propriétés  vous pourrez alors lui appliquer une easing function :

Conclusion

Si vous voulez en savoir plus et tout comprendre sur le code généré par vos animations, consultez la documentation sur msdn : https://msdn.microsoft.com/fr-fr/library/ms752312.aspx#animationtypes

Comme vous l’aurez certainement compris, les animations sont une bonne raison d’utiliser Blend étant donné que Visual Studio ne propose pas cette fonctionnalité. Fonctionnalité qui vous permettra de faire des animations originales et assez poussées en seulement quelques minutes. A utiliser avec modération bien sur et avec subtilité pour éviter que vos animations se transforment en “lag” pour l’utilisateur 😉

Rendez-vous prochainement pour la suite de la série avec un article sur les Styles et Templates avec Blend…