Edit

Implicit Composition Animations in XAML

  • Article

Warning

These animation types have been updated with some breaking changes, please refer to the docs for the ImplicitAnimationSet type. For a comprehensive list of all the available APIs, use the .NET API browser instead.

Implicit Animations are Composition Animations that are used to describe how and when animations occur as a response to direct property changes, such as Opacity or Offset. Show and Hide animations describe the animation to be applied to an element when the Visibility is changed, or the element is added/removed to the visual tree.

Prerequisites - Composition Animation in XAML

The Implicit Animations Attached Properties enable implicit animations to be defined in your XAML code by using the Composition Animation XAML objects. This allows animations to be defined directly on the element, or defined as XAML resources and applied to any XAML element.

The Implicit Animations Attached Properties can be used in combination with the VisualExtensions. This works well when used in Storyboards.

Try it in the sample app

Syntax

<Page ...
     xmlns:animations="using:Microsoft.Toolkit.Uwp.UI.Animations"/>

<Border>

    <animations:Implicit.ShowAnimations>
        <animations:TranslationAnimation Duration="0:0:1" To="0, 0, 0"></animations:TranslationAnimation>
        <animations:OpacityAnimation Duration="0:0:1" To="1.0"></animations:OpacityAnimation>
    </animations:Implicit.ShowAnimations>

    <animations:Implicit.HideAnimations>
        <animations:ScalarAnimation Target="Opacity" Duration="0:0:1" To="0.0"></animations:ScalarAnimation>
        <animations:ScalarAnimation Target="Translation.Y" Duration="0:0:1" To="-200">
            <animations:ScalarKeyFrame Key="0.1" Value="30"></animations:ScalarKeyFrame>
            <animations:ScalarKeyFrame Key="0.5" Value="0.0"></animations:ScalarKeyFrame>
        </animations:ScalarAnimation>
    </animations:Implicit.HideAnimations>

    <animations:Implicit.Animations>
        <!-- Notice this animation does not have a From/To value or any KeyFrames. In this case, an ExpressionKeyFrame will be added of Value=this.FinalValue -->
        <animations:Vector3Animation Target="Offset"  Duration="0:0:1"></animations:Vector3Animation>

        <!-- Notice this animation specifies an ImplicitTarget different from Target. In this case, the animation will run when the Offset is changed -->
        <animations:ScalarAnimation Target="RotationAngleInDegrees" ImplicitTarget="Offset"  Duration="0:0:1.2" From="0" To="0">
            <animations:ScalarKeyFrame Key="0.9" Value="80"></animations:ScalarKeyFrame>
        </animations:ScalarAnimation>

        <animations:Vector3Animation Target="Scale" Duration="0:0:1"></animations:Vector3Animation>
    </animations:Implicit.Animations>

</Border>

Properties

Implicit.Animations

Specifies an Composition Animation with animations to run when properties are modified.

Implicit.ShowAnimations and Implicit.HideAnimations

Specifies an Composition Animation with animations to run when an element is added or removed from the visual tree respectively (including when Visibility on an element is changed).

Examples

  • Let's create a scaling animation.

    <Border x:Name="Element" Height="100" Width="100" Background="Red">
    <animations:Implicit.Animations>
        <animations:ScaleAnimation Duration="0:0:1"/>
    </animations:Implicit.Animations>
</Border>

    Example Output 1

  • Let's create blink animation to show and hide controls.

    <Border x:Name="Element" Height="100" Width="100" Background="Red">
    <animations:Implicit.ShowAnimations>
        <animations:OpacityAnimation Duration="0:0:1" From="0" To="1">
            <animations:ScalarKeyFrame Key="0.2" Value="0.6"/>
            <animations:ScalarKeyFrame Key="0.4" Value="0.3"/>
            <animations:ScalarKeyFrame Key="0.6" Value="0.8"/>
            <animations:ScalarKeyFrame Key="0.8" Value="0.5"/>
        </animations:OpacityAnimation>
    </animations:Implicit.ShowAnimations>

    <animations:Implicit.HideAnimations>
        <animations:OpacityAnimation Duration="0:0:1" From="1" To="0">
            <animations:ScalarKeyFrame Key="0.2" Value="0.5"/>
            <animations:ScalarKeyFrame Key="0.4" Value="0.8"/>
            <animations:ScalarKeyFrame Key="0.6" Value="0.3"/>
            <animations:ScalarKeyFrame Key="0.8" Value="0.6"/>
        </animations:OpacityAnimation>
    </animations:Implicit.HideAnimations>
</Border>

    Now, when you set Element.Visibility = Visibility.Collapsed the HideAnimations will run and when you set Element.Visibility = Visibility.Visible the ShowAnimations will run.

    Example Output 2

  • Now, we can create a rotating animation whenever offset changes. This time we can use Resources to set Implicit Animations.

    <Page ...
    xmlns:animations="using:Microsoft.Toolkit.Uwp.UI.Animations"
    xmlns:extensions="using:Microsoft.Toolkit.Uwp.UI.Extensions"/>

    <Page.Resources>
        <animations:AnimationCollection x:Key="OffRotAnim">
            <animations:OffsetAnimation Duration="0:0:1"/>
            <animations:ScalarAnimation Target="RotationAngleInDegrees" ImplicitTarget="Offset"  Duration="0:0:1">
                <animations:ExpressionKeyFrame Key="1" Value="This.StartingValue + 90"/>
            </animations:ScalarAnimation>
        </animations:AnimationCollection>
    </Page.Resources>

    <Border x:Name="Element" Height="100" Width="100" Background="Red"
        extensions:VisualEx.NormalizedCenterPoint="0.5,0.5,0" animations:Implicit.Animations="{StaticResource OffRotAnim}"/>
</Border>

    Example Output 3

Sample Project

You can see this in action in the Windows Community Toolkit Sample App.

Requirements

Device family Universal, 10.0.16299.0 or higher
Namespace Microsoft.Toolkit.Uwp.UI.Animations
NuGet package Microsoft.Toolkit.Uwp.UI.Animations

API