session techdays 2014 - animations et transitions dans windows phone
DESCRIPTION
Slides de notre session sur l'animation et les transitions dans Windows Phone. Animateur : Jean Sébastien Dupuy & Samuel BlanchardTRANSCRIPT
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