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 !

on

  • 799 views

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

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)

Statistics

Views

Total Views
799
Views on SlideShare
798
Embed Views
1

Actions

Likes
1
Downloads
10
Comments
0

1 Embed 1

http://www.slideee.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 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