Code/Développement

Animations et Transitions

Samuel BlanchardWindows Phone MVP - Naviso

@samoteph

Donnez une nouvelle dimension à vos applications Windows Phone

Jean-Sébastien DupuyTechnical Evangelist – Microsoft France

@dupuyjs

Code/Développement#mstechdays

Présentation de la session

Comment faire une killer app ?

• Données pertinentes• Design adapté

• Animation !

Code/Développement#mstechdays

• Animations avec XAML• Animations par le code• Animations par behavior• Transitions

Agenda

Code/Développement#mstechdays

ANIMATIONS

En avant les histoires !

Code/Développement#mstechdays

Animation en Xaml

<Border x:Name="LeRectangle" Background="Blue" BorderBrush="White" BorderThickness="2"> <Border.Resources> <Storyboard x:Name="LeStoryboard"> <DoubleAnimation Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LeRectangle" From="0.0" To="1.0" Duration="0:0:0.500" RepeatBehavior="Forever"/> </Storyboard> </Border.Resources></Border>

Premier pas dans l’animation : déclaration du Storyboard

Code/Développement#mstechdays

Animation en Xamlprivate void LeBouton_Click(object sender, RoutedEventArgs e){ LeStoryboard.Begin();}

Premier pas dans l’animation : exécution du Storyboard

<EventTrigger x:Name="LeTrigger" RoutedEvent="Border.Loaded"> <BeginStoryboard> <Storyboard x:Name="LeStoryboard"> <DoubleAnimation Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LeRectangle" From="0.0" To="1.0" Duration="0:0:1" RepeatBehavior="Forever"/> </Storyboard> </BeginStoryboard> </EventTrigger>

Code/Développement#mstechdays

A chaque animation sa solution

<PointAnimation Storyboard.TargetProperty="Center" Storyboard.TargetName="MyAnimatedEllipseGeometry" Duration="0:0:5" From="100,300" To="400,100" RepeatBehavior="Forever" />

<DoubleAnimation Storyboard.TargetName="MyAnimatedRectangle" Storyboard.TargetProperty="Opacity«  From="1.0" To="0.0" Duration="0:0:5" AutoReverse="True" />

<ColorAnimation BeginTime="00:00:00"  Storyboard.TargetName="myStackPanel" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" From="Red" To="Green" Duration="0:0:4" />

Code/Développement#mstechdays

Key Frames ?

Code/Développement#mstechdays

Key Frames

<Storyboard x:Name="LeStoryboard"> <ColorAnimationUsingKeyFrames Storyboard.TargetName="LeBackgroundBrush" Storyboard.TargetProperty="Color"> <DiscreteColorKeyFrame KeyTime="0:0:2" Value="BlueViolet"/> <LinearColorKeyFrame KeyTime="0:0:4" Value="Green"/> <LinearColorKeyFrame KeyTime="0:0:6" Value="Yellow"/> </ColorAnimationUsingKeyFrames></Storyboard>

Version un peu plus avancée : définition d’une séquence

Code/Développement#mstechdays

Code/Développement#mstechdays

Easing Functions & KeySplineC’est un peu trop linéaire tout ca ?

Code/Développement#mstechdays

Animation par le CodeOu comment faire compliqué … …

• INDUSTRIALISER !

• Génération d’un storyboard d’opacité -> FadeIn / FadeOut• class Storyboard + DoubleAnimation

• Begin et Completed• await FadeInAsync

Code/Développement#mstechdays

Démo App de Compatibilité (Part 1)

• Storyboard

• Qui veut jouer ?

Code/Développement#mstechdays

Tilt Effect…

Behavior = étendre le comportement d’un controlTiltEffect du Toolkit

Code/Développement#mstechdays

TRANSITIONS

Entre deux histoires

Code/Développement#mstechdays

Transitionsprivate void InitializePhoneApplication() { ... //RootFrame = new PhoneApplicationFrame(); RootFrame = new TransitionFrame(); ... }

<toolkit:TransitionService.NavigationInTransition> <toolkit:NavigationInTransition> <toolkit:NavigationInTransition.Backward> <toolkit:SwivelTransition Mode="BackwardIn"/> </toolkit:NavigationInTransition.Backward> <toolkit:NavigationInTransition.Forward> <toolkit:SwivelTransition Mode="ForwardIn"/> </toolkit:NavigationInTransition.Forward> </toolkit:NavigationInTransition></toolkit:TransitionService.NavigationInTransition>

Utilisation du Windows Phone Toolkit

Code/Développement#mstechdays

• Turnstile (mode livre)• Swivel (mode pivot)• Slide• Rotate• Roll

TransitionsUtilisation du Windows Phone Toolkit

Code/Développement#mstechdays

Transition manuelle

Code/Développement#mstechdays

La navigation dans les pages

• Commande de navigation (page)– NavigationService.Navigate(new Uri(« MainPage.xaml »,

UriKind.Relative));– NavigationService.GoBack();

• méthode navigation (page)– OnNavigatedTo(NavigationEventArgs e) – OnNavigatingFrom(NavigatingCancelEventArgs e)– OnNavigatedFrom(NavigationEventArgs e)

Code/Développement#mstechdays

Plan de la navigation d’une page

OnNavigatingFrom

Annulation ?

Navigation

OnNavigatedFrom

Nouvelle page chargée

OnNavigatedTo

Pas de navigation

Commande

App

Commande

Système

Code/Développement#mstechdays

• Gère la navigation des pages• PhoneApplicationFrame• Les pages sont affichées dans le contrôle• Un contrôle unique dans l’app (2 = plantage)

• Evénements navigation (page)– Navigating (NavigatingCancelEventArgs e)– Navigated

Frame

Code/Développement#mstechdays

Navigation dans la frame

PAGE

FRAM

E Navigating Navigated

OnNavigatingF

rom

Annulation ?

Navigation

OnNavigatedFrom

Nouvelle page chargée

OnNavigatedTo

Commande

App

Commande

Système

Pas de navigation

Code/Développement#mstechdays

– UserControl contenant une Frame

– Les + :• Facile à implémenter• Template de page • Animation de fond• Transition possible

– Les - :• Problème avec certains contrôles

– Jumplist des LongListSelectors

Construire sa frame : UserControl + Frame

Code/Développement#mstechdays

– Dans App.xaml.cs

• Installation de la Frame : InitializePhoneApplication– FrameAnimated = new FrameAnimated();– RootFrame = FrameAnimated.Frame;

• Installation de l’élément visible : CompleteInitializePhoneApplication– if (RootVisual != FrameAnimated)– RootVisual = FrameAnimated;

Installation de la nouvelle frame

Code/Développement#mstechdays

Déroulement de la transition

Navigating

1 – Annulation de la navigation

2 – Animation de sortie (la frame est cachée)

3 –relance de la navigation

Navigated

1 – Animation d’entrée (la frame est affichée)

Nouvelle page chargée(mais cachée)

Code/Développement#mstechdays

Démo App de Compatibilité (Part 2)

• Transition

Code/Développement#mstechdays

Plus loin : Frame Custom Control

– Control héritant de PhoneApplicationFrame

– Les + :• Même que UserControl• Possibilité de gérer des animations à deux pages• Plus de pb de RootVisual

– Les - :• Plus complexe à mettre en place

Code/Développement#mstechdays

Démo Frame

• Limbo• Purple Cherry X

Code/Développement#mstechdays

Conclusion

Code/Développement#mstechdays

Depuis votre smartphone sur :http://notes.mstechdays.fr

De nombreux lots à gagner toutes les heures !!!Claviers, souris et jeux Microsoft…

Merci de nous aider à améliorer les Techdays !

Donnez votre avis !

Code/Développement#mstechdays

Questions ?

© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Digital is business

Code/Développement#mstechdays

Exemple de graphs

Code/Développement#mstechdays

• Colonne 1 • Colonne 2

Titre et 2 colonnes

Code/Développement#mstechdays

Elément 1

• Paramètre 1• Paramètre 2

Elément 2

• Paramètre 1• Paramètre 2

Titre comparaison

Code/Développement#mstechdays

Slide avec codeLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

démo

Code/Développement#mstechdays

NOM DÉMO

Sous titre démo

Vidéo

Code/Développement#mstechdays

TITRE VIDÉO

Sous titre

© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Digital is business