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

50 %
50 %
Information about Transitions et Animations – Donnez une nouvelle dimension à vos...
Technology

Published on February 19, 2014

Author: Developpeurs

Source: slideshare.net

Description

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)

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

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 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 – OnNavigatingFrom – OnNavigatedFrom #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 – Navigating – Navigated #mstechdays Code/Développement

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

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

Questions ? #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

Digital is business

#mstechdays presentations

Add a comment

Related presentations

Related pages

Transitions et Animations -- Donnez une nouvelle dimension ...

... sur les animations de vos contrôles et la transition ... Animations -- Donnez une nouvelle dimension à ... Windows Phone 7 Application in ...
Read more

Transitions et Animations — Donnez une nouvelle dimension ...

Transitions et Animations — Donnez une nouvelle dimension à vos applications Home windows Phone !
Read more

Windows Phone Transitions Video Tutorial - YouTube

Windows Phone Transitions Video ... Donnez une nouvelle dimension à vos applications ... Windows 8 Like UI Transitions & Animations in ...
Read more

Planet Center Parcs, l'appli qui accompagne vos vacances

Donnez une nouvelle dimension à vos vacances avec l'application Planet Center Parcs Et profitez d ... Elle ne sera pas compatible sur Windows Phone.
Read more

La nouvelle expérience Center Parcs, nouveau programme de ...

Donnez une nouvelle dimension à vos vacances avec l'application Planet Center Parcs Et profitez d ... Elle ne sera pas compatible sur Windows Phone.
Read more

Movie Maker - Microsoft Windows

Transformez vos photos et vidéos en films grâce à Movie Maker, ... Donnez vie à votre film en ajoutant une bande sonore que ... Applications Windows ...
Read more

Gamme Windows Phones Nokia - microsoft.com

... et la toute nouvelle expérience Windows 10 : donnez ... la toute dernière version de Windows Phone et ... voyez plus grand pour vos selfies grâce à ...
Read more

OS X Yosemite - Mac App Store - Apple (FR)

... des extensions de retouche pour la nouvelle app ... émaillée de transitions et de graphismes ... Donnez une toute autre dimension à vos ...
Read more