SDK Anniversary : Implicit animations

SDK Anniversary : Implicit animations

Les animations implicites sont selon moi une des fonctionnalités les plus intéressante de la mise à jour anniversaire.

Quesako?

Ça permet de mettre en place des animations de transition lors de changements de valeur des propriétés d’un Visual.

Un peu d’historique

Il y a deux type de d’animations dans le framework composition. Les KeyFrameAnimation et les ExpressionAnimation. Ces deux types d’animations héritent d’une classe abstraite CompositionAnimation

L’ImplicitAnimation n’est pas une animation en tant que telle, c’est pourquoi elle n’hérite pas de CompositionAnimation. Par contre celle ci, utilise des colllections de Composition Animation. Lorsque l’on ajoute une animation à cette collection, on précise à quel déclencheur celle ci intervient.

Comment ça fonctionne?

La premier étape consiste à créer une animation implicite.

_compositor.CreateImplicitAnimationCollection();

Une fois l’animation créer, il faut définir quelle propriété est surveillée.
Si cette propriété du visuel change, l’animation associé sera joué automatiquement.

 // Ajout d’une CompositionAnimation sur le Offset
implicitAnimationCollection["Offset"] = …;

Et enfin sur chaque visuel sur lequel on veut ajouter l’implicit animation, il faut setter l’instance de celle ci.

// Ajout de l'animation sur le visuel
visual.ImplicitAnimations = implicitAnimationCollection;

Au changement de cette propriété, l’animation implicite sera automatiquement jouée.
C’est presque magique!!!!

Et Avec un exemple ça donne quoi????

Dans cet exemple, nous allons modifier une GridView pour que lorsque la position d’un de ses items change l’item soit animé.

Création de la grid:

<GridView x:Name="ItemsGridView"/>

Création de l’animation implicite :

_compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
_elementImplicitAnimation = _compositor.CreateImplicitAnimationCollection(); 
_elementImplicitAnimation["Offset"] = CreateOffsetAnimation();

Création de la l’animation qui sera joué au déclenchement du trigger :

private CompositionAnimationGroup CreateOffsetAnimation()
{
            Vector3KeyFrameAnimation offsetAnimation = _compositor.CreateVector3KeyFrameAnimation();
            offsetAnimation.InsertExpressionKeyFrame(1.0f, "this.FinalValue");
            offsetAnimation.Duration = TimeSpan.FromSeconds(.4);

            offsetAnimation.Target = "Offset";

            ScalarKeyFrameAnimation rotationAnimation = _compositor.CreateScalarKeyFrameAnimation();
            rotationAnimation.InsertKeyFrame(.5f, 0.160f);
            rotationAnimation.InsertKeyFrame(1f, 0f);
            rotationAnimation.Duration = TimeSpan.FromSeconds(.4);

            rotationAnimation.Target = "RotationAngle";

            CompositionAnimationGroup animationGroup = _compositor.CreateAnimationGroup();
            animationGroup.Add(offsetAnimation);
            animationGroup.Add(rotationAnimation);

            return animationGroup;
}

Ajout ou suppression de l’animation implicite au visuel de chaque container d’un ligne :

foreach (var item in ItemsGridView.Items)
{
     var container = ItemsGridView.ContainerFromItem(item) as GridViewItem;
     var elementVisual = ElementCompositionPreview.GetElementVisual(container);

     if (enableImplicitAnimation.IsChecked.GetValueOrDefault())
     {
            elementVisual.ImplicitAnimations = _elementImplicitAnimation;
     }
     else
     {   
            elementVisual.ImplicitAnimations = null;
     }
}

A chaque changement de container d’item de la grid view on ajoute au visuel l’implicit animation :

ItemsGridView.ContainerContentChanging += ContainerContentChanging;

...

private void gridView_ContainerContentChanging(ListViewBase sender, ContainerContentChangingEventArgs args)
{
     var elementVisual = ElementCompositionPreview.GetElementVisual(args.ItemContainer);
     if (args.InRecycleQueue)
     {
             elementVisual.ImplicitAnimations = null;
     }
     else
     {
            if (enableImplicitAnimation.IsChecked.GetValueOrDefault())
            {
                    elementVisual.ImplicitAnimations = _elementImplicitAnimation;
            }
      }
}

Pour aller plus loin :

Lien vers la doc MSDN
Lien vers le code soure de la démo

Happy coding 🙂

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Pin It on Pinterest