Session Techdays 2014 - Animations et transitions dans Windows Phone

50 %
50 %
Information about Session Techdays 2014 - Animations et transitions dans Windows Phone
Technology

Published on February 15, 2014

Author: SamuelBlanchard

Source: slideshare.net

Description

Slides de notre session sur l'animation et les transitions dans Windows Phone. Animateur : Jean Sébastien Dupuy & Samuel Blanchard

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

Présentation de la session Comment faire une killer app ? • • Données pertinentes Design adapté • Animation ! #mstechdays Code/Développement

Agenda • • • • Animations avec XAML Animations par le code Animations par behavior Transitions #mstechdays Code/Développement

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" 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

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

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

Key Frames ? #mstechdays Code/Développement

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

#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é -> FadeIn / FadeOut class Storyboard + DoubleAnimation • • Begin et Completed await FadeInAsync #mstechdays Code/Développement

Démo App de Compatibilité (Part 1) • Storyboard • Qui veut jouer ? #mstechdays Code/Développement

Tilt Effect … Behavior = étendre le comportement d’un control TiltEffect du Toolkit #mstechdays Code/Développement

TRANSITIONS Entre deux histoires #mstechdays Code/Développement

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

Transitions Utilisation du Windows Phone Toolkit • • • • • Turnstile (mode livre) Swivel (mode pivot) Slide Rotate Roll #mstechdays Code/Développement

Transition manuelle #mstechdays Code/Développement

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) #mstechdays Code/Développement

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

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 (page) – Navigating (NavigatingCancelEventArgs e) – Navigated #mstechdays Code/Développement

Navigation dans la frame FRAME Navigating Navigated Pas de navigation PAGE OnNavigatedFrom Nouvelle page chargée Commande #mstechdays Commande App OnNavigated To Système Code/Développement

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

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

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

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é de gérer des animations à deux pages • Plus de pb de RootVisual – Les - : • Plus complexe à mettre en place #mstechdays Code/Développement

Démo Frame • Limbo • Purple Cherry X #mstechdays Code/Développement

Conclusion #mstechdays Code/Développement

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

Questions ? #mstechdays Code/Développement

Digital is business

Exemple de graphs #mstechdays Code/Développement

Titre et 2 colonnes • Colonne 1 #mstechdays • Colonne 2 Code/Développement

Titre comparaison Elément 1 Elément 2 • Paramètre 1 • Paramètre 2 • Paramètre 1 • Paramètre 2 #mstechdays Code/Développement

Slide avec code Lorem 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. #mstechdays Code/Développement

NOM DÉMO Sous titre démo #mstechdays Code/Développement

TITRE VIDÉO Sous titre #mstechdays Code/Développement

Digital is business

#mstechdays presentations

Add a comment

Related presentations

Related pages

TechDays 2014 : Transitions et Animations - microsoft.com

... en travaillant sur les animations de vos contrôles et la transition de ... TechDays 2014 : Transitions et Animations ... applications Windows Phone !
Read more

Blog de Samuel Blanchard | BeginInvoke

Utiliser des librairies C++/CX dans Windows Phone, ... Windows Phone 8 pour grosse feignasse; Session Techdays 2014 : Animations et Transitions dans ...
Read more

SOAT Blog » [Techdays 2014] La validation UX du Store

La transition entre le splash et l’écran ... pour les applications Windows Phone. ... mstechdays/programmes/2014/fiche-session.aspx?ID=76c0cff3 ...
Read more

TechDays 2013– la vidéo de la session DirectAccess avec ...

... venez découvrir dans cette session les ... Server 2012 et Windows 8” des Microsoft TechDays 2013 que j ... de transition et ...
Read more

Suivez l'actualité Openness en temps réel sur ...

TechDays 2014: l’open source s ... de salons et présence; Animation et trials Windows Azure ... Hadoop sur Windows Server et Windows Azure. Dans cette ...
Read more

Apport de l'ergonomie et du design dans les apps d ...

... à intégrer une recherche d'ergo et de design dans leur ... Transitions et Animations ... à vos applications Windows Phone !
Read more

Blog de Samuel Blanchard | Sonic’s Jewels

Utiliser des librairies C++/CX dans Windows Phone, ... Windows Phone 8 pour grosse feignasse; Session Techdays 2014 : Animations et Transitions dans ...
Read more

Venez découvrir le parcours Web aux Techdays 2012 avec du ...

... de développement de Windows 8 Metro. Ces 3 sessions seront jouées ... Grid Layout et Animations ... Techdays 2012 et à bientôt au ...
Read more