Session Techdays 2014 - Animations et transitions dans Windows Phone
-
Upload
samuel-blanchard -
Category
Technology
-
view
2.171 -
download
3
description
Transcript of Session Techdays 2014 - Animations et transitions dans Windows Phone
![Page 1: Session Techdays 2014 - Animations et transitions dans Windows Phone](https://reader035.fdocuments.us/reader035/viewer/2022070316/556173c7d8b42a171a8b49cb/html5/thumbnails/1.jpg)
![Page 2: Session Techdays 2014 - Animations et transitions dans Windows Phone](https://reader035.fdocuments.us/reader035/viewer/2022070316/556173c7d8b42a171a8b49cb/html5/thumbnails/2.jpg)
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
![Page 3: Session Techdays 2014 - Animations et transitions dans Windows Phone](https://reader035.fdocuments.us/reader035/viewer/2022070316/556173c7d8b42a171a8b49cb/html5/thumbnails/3.jpg)
Code/Développement#mstechdays
Présentation de la session
Comment faire une killer app ?
• Données pertinentes• Design adapté
• Animation !
![Page 4: Session Techdays 2014 - Animations et transitions dans Windows Phone](https://reader035.fdocuments.us/reader035/viewer/2022070316/556173c7d8b42a171a8b49cb/html5/thumbnails/4.jpg)
Code/Développement#mstechdays
• Animations avec XAML• Animations par le code• Animations par behavior• Transitions
Agenda
![Page 5: Session Techdays 2014 - Animations et transitions dans Windows Phone](https://reader035.fdocuments.us/reader035/viewer/2022070316/556173c7d8b42a171a8b49cb/html5/thumbnails/5.jpg)
Code/Développement#mstechdays
ANIMATIONS
En avant les histoires !
![Page 6: Session Techdays 2014 - Animations et transitions dans Windows Phone](https://reader035.fdocuments.us/reader035/viewer/2022070316/556173c7d8b42a171a8b49cb/html5/thumbnails/6.jpg)
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
![Page 7: Session Techdays 2014 - Animations et transitions dans Windows Phone](https://reader035.fdocuments.us/reader035/viewer/2022070316/556173c7d8b42a171a8b49cb/html5/thumbnails/7.jpg)
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>
![Page 8: Session Techdays 2014 - Animations et transitions dans Windows Phone](https://reader035.fdocuments.us/reader035/viewer/2022070316/556173c7d8b42a171a8b49cb/html5/thumbnails/8.jpg)
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" />
![Page 9: Session Techdays 2014 - Animations et transitions dans Windows Phone](https://reader035.fdocuments.us/reader035/viewer/2022070316/556173c7d8b42a171a8b49cb/html5/thumbnails/9.jpg)
Code/Développement#mstechdays
Key Frames ?
![Page 10: Session Techdays 2014 - Animations et transitions dans Windows Phone](https://reader035.fdocuments.us/reader035/viewer/2022070316/556173c7d8b42a171a8b49cb/html5/thumbnails/10.jpg)
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
![Page 11: Session Techdays 2014 - Animations et transitions dans Windows Phone](https://reader035.fdocuments.us/reader035/viewer/2022070316/556173c7d8b42a171a8b49cb/html5/thumbnails/11.jpg)
Code/Développement#mstechdays
![Page 12: Session Techdays 2014 - Animations et transitions dans Windows Phone](https://reader035.fdocuments.us/reader035/viewer/2022070316/556173c7d8b42a171a8b49cb/html5/thumbnails/12.jpg)
Code/Développement#mstechdays
Easing Functions & KeySplineC’est un peu trop linéaire tout ca ?
![Page 13: Session Techdays 2014 - Animations et transitions dans Windows Phone](https://reader035.fdocuments.us/reader035/viewer/2022070316/556173c7d8b42a171a8b49cb/html5/thumbnails/13.jpg)
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
![Page 14: Session Techdays 2014 - Animations et transitions dans Windows Phone](https://reader035.fdocuments.us/reader035/viewer/2022070316/556173c7d8b42a171a8b49cb/html5/thumbnails/14.jpg)
Code/Développement#mstechdays
Démo App de Compatibilité (Part 1)
• Storyboard
• Qui veut jouer ?
![Page 15: Session Techdays 2014 - Animations et transitions dans Windows Phone](https://reader035.fdocuments.us/reader035/viewer/2022070316/556173c7d8b42a171a8b49cb/html5/thumbnails/15.jpg)
Code/Développement#mstechdays
Tilt Effect…
Behavior = étendre le comportement d’un controlTiltEffect du Toolkit
![Page 16: Session Techdays 2014 - Animations et transitions dans Windows Phone](https://reader035.fdocuments.us/reader035/viewer/2022070316/556173c7d8b42a171a8b49cb/html5/thumbnails/16.jpg)
Code/Développement#mstechdays
TRANSITIONS
Entre deux histoires
![Page 17: Session Techdays 2014 - Animations et transitions dans Windows Phone](https://reader035.fdocuments.us/reader035/viewer/2022070316/556173c7d8b42a171a8b49cb/html5/thumbnails/17.jpg)
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
![Page 18: Session Techdays 2014 - Animations et transitions dans Windows Phone](https://reader035.fdocuments.us/reader035/viewer/2022070316/556173c7d8b42a171a8b49cb/html5/thumbnails/18.jpg)
Code/Développement#mstechdays
• Turnstile (mode livre)• Swivel (mode pivot)• Slide• Rotate• Roll
TransitionsUtilisation du Windows Phone Toolkit
![Page 19: Session Techdays 2014 - Animations et transitions dans Windows Phone](https://reader035.fdocuments.us/reader035/viewer/2022070316/556173c7d8b42a171a8b49cb/html5/thumbnails/19.jpg)
Code/Développement#mstechdays
Transition manuelle
![Page 20: Session Techdays 2014 - Animations et transitions dans Windows Phone](https://reader035.fdocuments.us/reader035/viewer/2022070316/556173c7d8b42a171a8b49cb/html5/thumbnails/20.jpg)
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)
![Page 21: Session Techdays 2014 - Animations et transitions dans Windows Phone](https://reader035.fdocuments.us/reader035/viewer/2022070316/556173c7d8b42a171a8b49cb/html5/thumbnails/21.jpg)
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
![Page 22: Session Techdays 2014 - Animations et transitions dans Windows Phone](https://reader035.fdocuments.us/reader035/viewer/2022070316/556173c7d8b42a171a8b49cb/html5/thumbnails/22.jpg)
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
![Page 23: Session Techdays 2014 - Animations et transitions dans Windows Phone](https://reader035.fdocuments.us/reader035/viewer/2022070316/556173c7d8b42a171a8b49cb/html5/thumbnails/23.jpg)
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
![Page 24: Session Techdays 2014 - Animations et transitions dans Windows Phone](https://reader035.fdocuments.us/reader035/viewer/2022070316/556173c7d8b42a171a8b49cb/html5/thumbnails/24.jpg)
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
![Page 25: Session Techdays 2014 - Animations et transitions dans Windows Phone](https://reader035.fdocuments.us/reader035/viewer/2022070316/556173c7d8b42a171a8b49cb/html5/thumbnails/25.jpg)
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
![Page 26: Session Techdays 2014 - Animations et transitions dans Windows Phone](https://reader035.fdocuments.us/reader035/viewer/2022070316/556173c7d8b42a171a8b49cb/html5/thumbnails/26.jpg)
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)
![Page 27: Session Techdays 2014 - Animations et transitions dans Windows Phone](https://reader035.fdocuments.us/reader035/viewer/2022070316/556173c7d8b42a171a8b49cb/html5/thumbnails/27.jpg)
Code/Développement#mstechdays
Démo App de Compatibilité (Part 2)
• Transition
![Page 28: Session Techdays 2014 - Animations et transitions dans Windows Phone](https://reader035.fdocuments.us/reader035/viewer/2022070316/556173c7d8b42a171a8b49cb/html5/thumbnails/28.jpg)
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
![Page 29: Session Techdays 2014 - Animations et transitions dans Windows Phone](https://reader035.fdocuments.us/reader035/viewer/2022070316/556173c7d8b42a171a8b49cb/html5/thumbnails/29.jpg)
Code/Développement#mstechdays
Démo Frame
• Limbo• Purple Cherry X
![Page 30: Session Techdays 2014 - Animations et transitions dans Windows Phone](https://reader035.fdocuments.us/reader035/viewer/2022070316/556173c7d8b42a171a8b49cb/html5/thumbnails/30.jpg)
Code/Développement#mstechdays
Conclusion
![Page 31: Session Techdays 2014 - Animations et transitions dans Windows Phone](https://reader035.fdocuments.us/reader035/viewer/2022070316/556173c7d8b42a171a8b49cb/html5/thumbnails/31.jpg)
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 !
![Page 32: Session Techdays 2014 - Animations et transitions dans Windows Phone](https://reader035.fdocuments.us/reader035/viewer/2022070316/556173c7d8b42a171a8b49cb/html5/thumbnails/32.jpg)
Code/Développement#mstechdays
Questions ?
![Page 33: Session Techdays 2014 - Animations et transitions dans Windows Phone](https://reader035.fdocuments.us/reader035/viewer/2022070316/556173c7d8b42a171a8b49cb/html5/thumbnails/33.jpg)
© 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
![Page 34: Session Techdays 2014 - Animations et transitions dans Windows Phone](https://reader035.fdocuments.us/reader035/viewer/2022070316/556173c7d8b42a171a8b49cb/html5/thumbnails/34.jpg)
Code/Développement#mstechdays
Exemple de graphs
![Page 35: Session Techdays 2014 - Animations et transitions dans Windows Phone](https://reader035.fdocuments.us/reader035/viewer/2022070316/556173c7d8b42a171a8b49cb/html5/thumbnails/35.jpg)
Code/Développement#mstechdays
• Colonne 1 • Colonne 2
Titre et 2 colonnes
![Page 36: Session Techdays 2014 - Animations et transitions dans Windows Phone](https://reader035.fdocuments.us/reader035/viewer/2022070316/556173c7d8b42a171a8b49cb/html5/thumbnails/36.jpg)
Code/Développement#mstechdays
Elément 1
• Paramètre 1• Paramètre 2
Elément 2
• Paramètre 1• Paramètre 2
Titre comparaison
![Page 37: Session Techdays 2014 - Animations et transitions dans Windows Phone](https://reader035.fdocuments.us/reader035/viewer/2022070316/556173c7d8b42a171a8b49cb/html5/thumbnails/37.jpg)
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.
![Page 38: Session Techdays 2014 - Animations et transitions dans Windows Phone](https://reader035.fdocuments.us/reader035/viewer/2022070316/556173c7d8b42a171a8b49cb/html5/thumbnails/38.jpg)
démo
Code/Développement#mstechdays
NOM DÉMO
Sous titre démo
![Page 39: Session Techdays 2014 - Animations et transitions dans Windows Phone](https://reader035.fdocuments.us/reader035/viewer/2022070316/556173c7d8b42a171a8b49cb/html5/thumbnails/39.jpg)
Vidéo
Code/Développement#mstechdays
TITRE VIDÉO
Sous titre
![Page 40: Session Techdays 2014 - Animations et transitions dans Windows Phone](https://reader035.fdocuments.us/reader035/viewer/2022070316/556173c7d8b42a171a8b49cb/html5/thumbnails/40.jpg)
© 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