Animations et Transitions
Donnez une nouvelle dimension à vos applications
Windows Phone

Samuel Blanchard
Windows Phone M...
Présentation de la session
Comment faire une killer app ?
•
•

Données pertinentes
Design adapté

•

Animation !

#mstechd...
Agenda
•
•
•
•

Animations avec XAML
Animations par le code
Animations par behavior
Transitions

#mstechdays

Code/Dévelop...
ANIMATIONS
En avant les histoires !

#mstechdays

Code/Développement
Animation en Xaml

Premier pas dans l’animation : déclaration du Storyboard
<Border x:Name="LeRectangle"
Background="Blue"...
Animation en Xaml

Premier pas dans l’animation : exécution du Storyboard
private void LeBouton_Click(object sender, Route...
A chaque animation sa solution
<DoubleAnimation
Storyboard.TargetName="MyAnimatedRectangle"
Storyboard.TargetProperty="Opa...
Key Frames ?

#mstechdays

Code/Développement
Key Frames

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

<Storyboard x:Name="LeStoryboard">
<ColorAnimationUsi...
#mstechdays

Code/Développement
Easing Functions & KeySpline
C’est un peu trop linéaire tout ca ?

#mstechdays

Code/Développement
Animation par le Code
Ou comment faire compliqué …  …
•

INDUSTRIALISER !

•
•

Génération d’un storyboard d’opacité
clas...
Démo App de Compatibilité (Part 1)
• Storyboard

#mstechdays

Code/Développement
Tilt Effect
…

Behavior = étendre le comportement d’un
control
TiltEffect du Toolkit

#mstechdays

Code/Développement
TRANSITIONS
Entre deux

#mstechdays

Code/Développement
Transitions
Utilisation du Windows Phone Toolkit
private void InitializePhoneApplication() {
...
//RootFrame = new PhoneAp...
Transitions
Utilisation du Windows Phone Toolkit

•
•
•
•
•

Turnstile (mode livre)
Swivel (mode pivot)
Slide
Rotate
Roll
...
Transition manuelle

#mstechdays

Code/Développement
La navigation dans les pages
• Commande de navigation (page)
– NavigationService.Navigate(new Uri(« MainPage.xaml »,
UriKi...
Plan de la navigation d’une page

Pas de navigation

OnNavigatedFrom

Nouvelle page chargée

Commande

#mstechdays

Comman...
Frame
•
•
•
•

Gère la navigation des pages
PhoneApplicationFrame
Les pages sont affichées dans le contrôle
Un contrôle un...
Navigation dans la frame
Navigated

FRAME

Navigating

PAGE

Pas de
navigation

OnNavigating
From

Navigation

Commande

#...
Construire sa frame : UserControl + Frame
– UserControl contenant une Frame

– Les + :
• Facile à implémenter
• Template d...
Installation de la nouvelle frame
– Dans App.xaml.cs

• Installation de la Frame : InitializePhoneApplication
– FrameAnima...
Déroulement de la transition
Navigating
1 – Annulation de la
navigation
2 – Animation de sortie (la
frame est cachée)

Nav...
Démo App de Compatibilité (Part 2)
• Transition

#mstechdays

Code/Développement
Plus loin : Frame Custom Control
– Control héritant de PhoneApplicationFrame
– Les + :
• Même que UserControl
• Possibilit...
Démo Frame
• Limbo
• Purple Cherry X

#mstechdays

Code/Développement
Conclusion

#mstechdays

Code/Développement
Questions ?

#mstechdays

Code/Développement
Donnez votre avis !
Depuis votre smartphone sur :
http://notes.mstechdays.fr
De nombreux lots à gagner toutes les heures !...
Digital is
business
Transitions et Animations – Donnez une nouvelle dimension à vos applications Windows Phone !
Upcoming SlideShare
Loading in …5
×

Transitions et Animations – Donnez une nouvelle dimension à vos applications Windows Phone !

2,751 views

Published on

Améliorer l’impact et l’expérience utilisateur de vos applications en travaillant sur les animations de vos contrôles et la transition de vos pages. En quelques astuces et conseils, Samuel et Jean-Sébastien vous apporteront les clés pour rendre vos applications uniques !

Speakers : Jean-Sébastien Dupuy (Microsoft), Samuel Blanchard (Naviso)

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,751
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transitions et Animations – Donnez une nouvelle dimension à vos applications Windows Phone !

  1. 1. Animations et Transitions Donnez une nouvelle dimension à vos applications Windows Phone Samuel Blanchard Windows Phone MVP - Naviso @samoteph Jean-Sébastien Dupuy Technical Evangelist – Microsoft France @dupuyjs Code/Développement
  2. 2. Présentation de la session Comment faire une killer app ? • • Données pertinentes Design adapté • Animation ! #mstechdays Code/Développement
  3. 3. Agenda • • • • Animations avec XAML Animations par le code Animations par behavior Transitions #mstechdays Code/Développement
  4. 4. ANIMATIONS En avant les histoires ! #mstechdays Code/Développement
  5. 5. Animation en Xaml Premier pas dans l’animation : déclaration du Storyboard <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> #mstechdays Code/Développement
  6. 6. Animation en Xaml Premier pas dans l’animation : exécution du Storyboard private void LeBouton_Click(object sender, RoutedEventArgs e) { LeStoryboard.Begin(); } <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> #mstechdays Code/Développement
  7. 7. A chaque animation sa solution <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" /> <PointAnimation Storyboard.TargetProperty="Center" Storyboard.TargetName="MyAnimatedEllipseGeometry" Duration="0:0:5" From="100,300" To="400,100" RepeatBehavior="Forever" /> #mstechdays Code/Développement
  8. 8. Key Frames ? #mstechdays Code/Développement
  9. 9. Key Frames Version un peu plus avancée : définition d’une séquence <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> #mstechdays Code/Développement
  10. 10. #mstechdays Code/Développement
  11. 11. Easing Functions & KeySpline C’est un peu trop linéaire tout ca ? #mstechdays Code/Développement
  12. 12. Animation par le Code Ou comment faire compliqué …  … • INDUSTRIALISER ! • • Génération d’un storyboard d’opacité class Storyboard + DoubleAnimation • • Begin et Completed await FadeInAsync #mstechdays Code/Développement
  13. 13. Démo App de Compatibilité (Part 1) • Storyboard #mstechdays Code/Développement
  14. 14. Tilt Effect … Behavior = étendre le comportement d’un control TiltEffect du Toolkit #mstechdays Code/Développement
  15. 15. TRANSITIONS Entre deux #mstechdays Code/Développement
  16. 16. Transitions Utilisation du Windows Phone Toolkit private 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> #mstechdays Code/Développement
  17. 17. Transitions Utilisation du Windows Phone Toolkit • • • • • Turnstile (mode livre) Swivel (mode pivot) Slide Rotate Roll #mstechdays Code/Développement
  18. 18. Transition manuelle #mstechdays Code/Développement
  19. 19. 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 #mstechdays Code/Développement
  20. 20. Plan de la navigation d’une page Pas de navigation OnNavigatedFrom Nouvelle page chargée Commande #mstechdays Commande App OnNavigatedTo Système Code/Développement
  21. 21. Frame • • • • 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 #mstechdays Code/Développement
  22. 22. Navigation dans la frame Navigated FRAME Navigating PAGE Pas de navigation OnNavigating From Navigation Commande #mstechdays Nouvelle page Annulation ? chargée OnNavigated To Commande App OnNavigatedFrom Système Code/Développement
  23. 23. Construire sa frame : UserControl + Frame – 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 #mstechdays Code/Développement
  24. 24. Installation de la nouvelle frame – 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; #mstechdays Code/Développement
  25. 25. Déroulement de la transition Navigating 1 – Annulation de la navigation 2 – Animation de sortie (la frame est cachée) Navigated Nouvelle page chargée (mais cachée) 1 – Animation d’entrée (la frame est affichée) 3 –relance de la navigation #mstechdays Code/Développement
  26. 26. Démo App de Compatibilité (Part 2) • Transition #mstechdays Code/Développement
  27. 27. 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 #mstechdays Code/Développement
  28. 28. Démo Frame • Limbo • Purple Cherry X #mstechdays Code/Développement
  29. 29. Conclusion #mstechdays Code/Développement
  30. 30. Questions ? #mstechdays Code/Développement
  31. 31. Donnez votre avis ! 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 ! #mstechdays Code/Développement
  32. 32. Digital is business

×