Post on 04-Dec-2014
description
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é• class Storyboard + DoubleAnimation
• Begin et Completed• await FadeInAsync
Code/Développement#mstechdays
Démo App de Compatibilité (Part 1)
• Storyboard
Code/Développement#mstechdays
Tilt Effect…
Behavior = étendre le comportement d’un controlTiltEffect du Toolkit
Code/Développement#mstechdays
TRANSITIONS
Entre deux
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 – OnNavigatingFrom– OnNavigatedFrom
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– Navigating– 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
Questions ?
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 !
© 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