I think the implicit animations are one of the most interesting features of the birthday update.
What about Quesako?
This allows you to set up transition animations when changing the value of a property Visual.
A little bit of history
There are two types of animations in the composition framework. KeyFrameAnimation and the ExpressionAnimation. Both types of animation inherit an abstract class CompositionAnimation
L’Implicit animation It is not an animation as such, so it does not inherit CompositionAnimation This one, however, uses collections of Composition Animation. When an animation is added to this collection, the trigger is specified.
Original illustration unavailable
How does that work?
The first step is to create an implicit animation.
_compositor.CreateImplicitAnimationCollection();
Once the animation is created, it is necessary to define which property is monitored.
If this property of the visual changes, the associated animation will be played automatically.
// Ajout d’une CompositionAnimation sur le Offset
implicitAnimationCollection["Offset"] = …;
And finally, on every visual to which you want to add the implicit animation, you have to set the instance of this.
// Ajout de l'animation sur le visuel
visual.ImplicitAnimations = implicitAnimationCollection;
When this property is changed, the implied animation will be played automatically.
C’is almost magical!!!!
And with an example, what do you get?
In this example, we're going to edit a GridView so that when the position of one of its items changes the item is animated.
Creating the grid:
<GridView x:Name="ItemsGridView"/>
Creation of implied animation:
_compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
_elementImplicitAnimation = _compositor.CreateImplicitAnimationCollection();
_elementImplicitAnimation["Offset"] = CreateOffsetAnimation();
Creation of the animation to be played at triggering:
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;
}
Adding or removing implied animation to the visual of each container of a line:
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;
}
}
For each container change in the grid view, the following animation is added to the visual:
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;
}
}
}
Original illustration unavailable
To go further:
Happy coding 🙂