# 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…

- Auteur: Jérôme Giacomini
- Langue: fr
- URL canonique: [SDK Anniversary : Implicit animations](https://jeromegiacomini.net/fr/articles/2016/12/27/sdk-anniversary-implicit-animations)
- Publié le: 2016-12-27
- Dernière modification: 2026-09-05
- Thèmes: .NET, C#, Windows

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.

![](https://jeromegiacomini.net/Blog/wp-content/uploads/2016/12/implicitAnimation.png)

### Comment ça fonctionne?

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

```csharp

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

```csharp

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

```csharp

// 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:

```xml

<GridView x:Name="ItemsGridView"/>
```


#### Création de l’animation implicite :

```csharp

_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 :

```csharp

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 :

```csharp

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 :

```csharp

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;
            }
      }
}
```


![](https://jeromegiacomini.net/Blog/wp-content/uploads/2016/12/ImplicitAnimation.gif)

### Pour aller plus loin :

[Lien vers la doc MSDN](https://msdn.microsoft.com/fr-fr/windows/uwp/graphics/composition-animation)

[Lien vers le code soure de la démo](https://github.com/jonathanantoine/UWP-Anniversary-Quoi-de-neuf)

Happy coding 🙂