[WP7] Turnstile feather transition

oct 23, 2012 5:36 pm by Julien

On revient aujourd'hui avec encore une transition. Cette fois-ci, on va s'occuper de reproduire l'animation "Turnstile feather"

En quoi consiste cette animation ?

L'animation permet de faire une transition entrante ou sortante sur une page contenant une listbox.
On la retrouve dans l'application des mails quand on arrive/revient sur notre courrier.
C'est aussi l'effet qui anime nos tiles. Le but étant d'effectuer un effet de "vague" des items avec pour contrainte de lancer l'animation de l'item selectionné en dernier.
Alors si on revient sur mon post précédent, j'ai également évoqué une transition sur une liste.
Quel choix dois je faire entre l'effet "continu" et celle-ci ?
(C'est mon avis) Je pense que ca va dépendre surtout des éléments qui sont contenus dans votre item. Si vous avez une image avec un titre, une brève description etc.. je conseillerai l'effet turnstile.
En revanche, si votre liste contient seulement un titre de blog (par exemple) il serait certaienement plus judicieux d'utiliser l'effet continu :)

Bref tout comme l'effet précédent, j'ai fait un helper qui permet de refaire l'effet facilement.
Il y'a plusieurs façons/réglages pour recréer cet effet donc ma méthode n'est pas forcément la meilleure.

 

J'ai geré 2 cas (il est pas dur de recréer les 2 autres en cas de besoins) :

  • Lorsqu'on quitte la page contenant la liste
  • Lorsque on est sur la page qui suit la liste et qu'on effectue un retour.

Il s'utilise de cette façon :

 

        private void OnItemSelected(object sender, SelectionChangedEventArgs e)
        {
            var listBox = (sender as ListBox);
            if (listBox.SelectedItem != null)
            {
                SelectedItem = (Item)listBox.SelectedItem;
                listBox.WaveTransitionOut(() =>
                {
                    NavigationService.Navigate(new Uri("/DetailPage.xaml", UriKind.Relative));
                    listBox.SelectedItem = null;
                });
            }
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
                listbox.WaveTransitionIn();
        }


Pour WaveTransitionOut, on a la possibilité de passer une Action en argument.

Et ça donne ça !

 

 

le helper : WaveTransition

Voilà si vous avez des questions/remarques n'hesitez pas :)

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading