Expression Blend, les 10 bonnes raisons de l’utiliser : #4 \\ Les animations

#4blend_animations 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

Semaine 4 : Les animations

Semaine 5 : Les styles & templates

Semaine 6 : DataSample

Semaine 7 : Behaviors

Semaine 8 : Stechflow

Semaine 9 : Import de fichiers Illustrator / Photoshop

Semaine 10 : Spécificités Windows Phone / Windows 8

Semaine 11 : Conclusion / Les différentes versions de Blend

Introduction

Les animations sont une notion importante afin de créer des interfaces utilisateur encore plus attrayantes et plus esthétiques. En animant simplement la couleur d’arrière-plan ou en appliquant une transformation à un élément de votre interface, vous pouvez créer des transitions d’écran impressionnantes ou fournir des aides visuelles utiles appelées “feedback”. Le feedback est devenu indispensable à l’aire des interfaces “fast, fluid and in-motion” afin de signaler à l’utilisateur que son action a bien été prise en compte. Le “tilt effect” qui donne l’effet d’enfoncer le bouton lorsque vous aller cliquer dessus est un exemple de feedback.

Utiliser Blend pour créer des animations est certainement la fonctionnalité qui vous fera gagner plus de temps !

Une fois ce code généré par Blend, il est facilement compréhensible car le langage XAML utilise une syntaxe XML même pour les transformations (translation, rotation, etc.) :

<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>
    

Ainsi avec l’aide de Blend, plus besoin d’être développeur pour créer des animations mais de simplement maîtriser Blend pour générer des animations en tous genres, ce que nous allons voir dans cet article.

Le code xaml présenté ci-dessus, elle le résultat de la création d’une animation de splash screen réalisée en 3 min et présenté ci-dessous (Exemple avec une animation simple). 

Comment ça marche ?

Storyboard

Le moyen le plus classique pour animer un contenu dans votre page ou user control, est d’utiliser un storyboard. On l’utilise par exemple pour créer des animations pour des splash screen par exemple (écran de chargement des applications).

Comment créer un Storyboard ?

Utiliser le panneau “Objects and Timeline” comme ci-dessous :

Blend_storyboardpane

En cliquant sur les flèches “>>”, les storyboards existants apparaîtront, sinon pour créer un nouveau storyboard, utilisez le bouton “+” et donnez-lui un nom.

Vous allez ensuite passer dans le mode édition dans lequel 3 zones principales vont vous intéresser pour la création de votre animation selon l’image ci-dessous :

Blend_storyboard

Blend_storytimezone – 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.

C’est ici que vous avez la possibilité de lire votre storyboard afin de voir directement l’aperçu de votre animation.

– Le designer qui va être encadré en rouge  avec le texte “Storyboarding timeline recording is on”. Ce qui signifie que dans ce mode, les changements que vous apportez à votre interface vont créer des keys frame, ce sont des états définis pour vos animations.

C’est ici que votre aperçu sera visible lorsque vous ferez lecture.

– Le panneau des propriétés “Properties” est important ici pour appliquer des Easing Functions, qui sont des fonctions d’accélération vous permettent d’appliquer des formules mathématiques personnalisées à vos animations.

C’est ici que vous modifiez les propriétés qui vont changer au coutre aperçu sera visible lorsque vous ferez lecture.

Focus sur les “key frame”

Blend_storytimezoneLorsque 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 ( http://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 :

Blend_opacity_animation

2) Effet de rotation par rapport à un centre précis

Pour terminer l’animation de chargement, on souhaite animer un texte (point d’exclamation) en fait tourner celui-ci par rapport à un centre précis.

Ici, même principe sauf que l’on va appliquer une transformation, plus précisément une rotation sur notre texte puis définir une rotation selon un point qui sera le centre de la rotation :

Blend_animation_rotation

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” :

Blend_animation_flip

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 :

Blend_animation_imagemove

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 :

Blend_visualstate

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 :

Blend_animation_buttontemplate

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 :

Blend_workspace

Cela vous permettra de disposer d’un plus grand espace de travail pour votre “timeline”:

Blend_workspaceAnimation

Bien comprendre les animations

Pour mieux comprendre le code généré par Blend voici quelques informations concernant les types d’animations, les transformations que vous pouvez appliquer à vos éléments visuels avec les effets easing functions ainsi que les propriétés que vous pouvez animer.

Type d’animations

Le tableau suivant montre plusieurs types d’animations courants et certaines propriétés avec lesquelles ils sont utilisés.

Type de propriété Animation de base (From/To/By) correspondante Animation d’image clé correspondante Animation de tracé correspondante Exemple d’utilisation
Color ColorAnimation ColorAnimationUsingKeyFrames Aucun Animer le  Color  d’un  SolidColorBrush  ou d’un  GradientStop .
Double DoubleAnimation DoubleAnimationUsingKeyFrames DoubleAnimationUsingPath Animer le  Width  d’un  DockPanel  ou le Height  d’un  Button .
Point PointAnimation PointAnimationUsingKeyFrames PointAnimationUsingPath Animer la position  Center  d’un EllipseGeometry .
String Aucun StringAnimationUsingKeyFrames Aucun Animer le  Text  d’un  TextBlock  ou le Content  d’un  Button .

Transformations

Voici avec Blend toutes les types de transformations que vous pouvez appliquer sur quasiment toutes les propriétés de vos éléments visuels :

– RenderTransform (translation, rotation, scale, screw, center point, flip).

– Projections (rotation, center of rotation, offset, global offset).

Blend_animations_transformations

Easing functions

Blend_animation_easing

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 :

Blend_animation_easingdemo

Conclusion

Si vous voulez en savoir plus et tout comprendre sur le code généré par vos animations, consultez la documentation sur msdn : http://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…

Nombre de vue : 125

COMMENTAIRES 3 commentaires

  1. Fontaine dit :

    Bonjour,

    Merci pour ces articles bien ficelés.
    Pensez-vous mettre les autres chapitres bientôt?

  2. Nathalie BELVAL dit :

    Bonjour,

    Merci de votre intérêt pour mes articles. La suite arrive très bientôt normalement courant août 🙂

    A bientôt

  3. Benjamin dit :

    Bonjour,

    Pas de nouveau pour la suite ? 🙂

AJOUTER UN COMMENTAIRE