Edit

Share via

EffectAnimations

EffectAnimations are used to animate the Win2D effects in CommunityToolkit.WinUI.Media.Effects without code-behind. Combined with an AnimationSet, you can string together complex animated effects that run sequentially or simultaneously.

<Page x:Class="MediaExperiment.Samples.EffectAnimationsSample"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:animations="using:CommunityToolkit.WinUI.Animations"
      xmlns:behaviors="using:CommunityToolkit.WinUI.Behaviors"
      xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
      xmlns:media="using:CommunityToolkit.WinUI.Media">

    <Grid>
        <Border Height="320">
            <Image VerticalAlignment="Center"
                   Source="ms-appx:///Assets/Bloom.jpg" />
        </Border>

        <TextBlock HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   FontSize="36"
                   FontWeight="SemiBold"
                   Foreground="White"
                   Text="This is sample text"
                   TextWrapping="Wrap" />

        <media:UIElementExtensions.VisualFactory>
            <media:PipelineVisualFactory>
                <media:LuminanceToAlphaEffect />

                <media:OpacityEffect Value="0.4" />

                <media:BlendEffect Mode="Multiply"
                                   Source="{media:BackdropSource}" />

                <media:BlurEffect x:Name="ImageBlurEffect"
                                  Amount="32"
                                  IsAnimatable="True" />

                <media:SaturationEffect x:Name="ImageSaturationEffect"
                                        IsAnimatable="True"
                                        Value="0" />

                <media:ExposureEffect x:Name="ImageExposureEffect"
                                      Amount="1"
                                      IsAnimatable="True" />
            </media:PipelineVisualFactory>
        </media:UIElementExtensions.VisualFactory>

        <animations:Explicit.Animations>
            <animations:AnimationSet x:Name="ClipAnimation">
                <animations:AnimationScope EasingMode="EaseOut"
                                           Duration="0:0:3">

                    <animations:ClipAnimation From="0,0,1280,0"
                                              To="0" />

                    <animations:TranslationAnimation From="32,0,0"
                                                     To="0" />

                    <animations:ScaleAnimation From="1.1"
                                               To="1" />

                    <animations:BlurEffectAnimation Target="{x:Bind ImageBlurEffect}"
                                                    From="32"
                                                    To="0" />

                    <animations:SaturationEffectAnimation Target="{x:Bind ImageSaturationEffect}"
                                                          From="0"
                                                          To="1.2" />

                    <animations:ExposureEffectAnimation Target="{x:Bind ImageExposureEffect}"
                                                        From="1"
                                                        To="0" />
                </animations:AnimationScope>
            </animations:AnimationSet>
        </animations:Explicit.Animations>

        <interactivity:Interaction.Behaviors>
            <interactivity:EventTriggerBehavior EventName="Loaded">
                <behaviors:StartAnimationAction Animation="{x:Bind ClipAnimation}" />
            </interactivity:EventTriggerBehavior>
        </interactivity:Interaction.Behaviors>
    </Grid>
</Page>

// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.

namespace MediaExperiment.Samples;

[ToolkitSample(nameof(EffectAnimationsSample), "EffectAnimation", "Build animated effect pipelines in XAML")]
public sealed partial class EffectAnimationsSample : Page
{
    public EffectAnimationsSample()
    {
        this.InitializeComponent();
    }
}

BlurEffectAnimation

Apply and animate a Win2D BlurEffect

<Page x:Class="MediaExperiment.Samples.BlurEffectAnimationSample"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:ani="using:CommunityToolkit.WinUI.Animations"
      xmlns:behaviors="using:CommunityToolkit.WinUI.Behaviors"
      xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
      xmlns:media="using:CommunityToolkit.WinUI.Media">

    <Border Height="280">
        <Image VerticalAlignment="Center"
               Source="ms-appx:///Assets/Bloom.jpg" />

        <media:UIElementExtensions.VisualFactory>
            <media:PipelineVisualFactory>
                <media:BlurEffect x:Name="ImageBlurEffect"
                                  IsAnimatable="True" />
            </media:PipelineVisualFactory>
        </media:UIElementExtensions.VisualFactory>

        <ani:Explicit.Animations>
            <ani:AnimationSet x:Name="BlurAnimation"
                              IsSequential="True">
                <ani:BlurEffectAnimation EasingMode="EaseOut"
                                         EasingType="Linear"
                                         Target="{x:Bind ImageBlurEffect}"
                                         From="0"
                                         To="8"
                                         Duration="0:0:3" />

                <ani:BlurEffectAnimation EasingMode="EaseOut"
                                         EasingType="Linear"
                                         Target="{x:Bind ImageBlurEffect}"
                                         From="8"
                                         To="0"
                                         Duration="0:0:3" />
            </ani:AnimationSet>
        </ani:Explicit.Animations>

        <interactivity:Interaction.Behaviors>
            <interactivity:EventTriggerBehavior EventName="Loaded">
                <behaviors:StartAnimationAction Animation="{x:Bind BlurAnimation}" />
            </interactivity:EventTriggerBehavior>
        </interactivity:Interaction.Behaviors>
    </Border>
</Page>

// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.

namespace MediaExperiment.Samples;

[ToolkitSample(nameof(BlurEffectAnimationSample), "BlurAnimationEffect", "Animate a blur effect")]
public sealed partial class BlurEffectAnimationSample : Page
{
    public BlurEffectAnimationSample()
    {
        this.InitializeComponent();
    }
}

ColorEffectAnimation

Animate an overlaid color with a Win2D ColorEffect.

<Page x:Class="MediaExperiment.Samples.ColorEffectAnimationSample"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:ani="using:CommunityToolkit.WinUI.Animations"
      xmlns:behaviors="using:CommunityToolkit.WinUI.Behaviors"
      xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
      xmlns:media="using:CommunityToolkit.WinUI.Media">

    <Border Height="280">
        <Image VerticalAlignment="Center"
               Source="ms-appx:///Assets/Bloom.jpg" />

        <media:UIElementExtensions.VisualFactory>
            <media:PipelineVisualFactory>
                <media:TintEffect x:Name="ImageColorEffect"
                                  IsAnimatable="True" />
            </media:PipelineVisualFactory>
        </media:UIElementExtensions.VisualFactory>

        <ani:Explicit.Animations>
            <ani:AnimationSet x:Name="ColorAnimation"
                              IsSequential="True">
                <ani:ColorEffectAnimation EasingMode="EaseOut"
                                          EasingType="Linear"
                                          Target="{x:Bind ImageColorEffect}"
                                          From="Transparent"
                                          To="#803300FF"
                                          Duration="0:0:2" />

                <ani:ColorEffectAnimation EasingMode="EaseOut"
                                          EasingType="Linear"
                                          Target="{x:Bind ImageColorEffect}"
                                          From="#803300FF"
                                          To="Transparent"
                                          Duration="0:0:2" />
            </ani:AnimationSet>
        </ani:Explicit.Animations>

        <interactivity:Interaction.Behaviors>
            <interactivity:EventTriggerBehavior EventName="Loaded">
                <behaviors:StartAnimationAction Animation="{x:Bind ColorAnimation}" />
            </interactivity:EventTriggerBehavior>
        </interactivity:Interaction.Behaviors>
    </Border>

</Page>

// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.

namespace MediaExperiment.Samples;

[ToolkitSample(nameof(ColorEffectAnimationSample), "ColorAnimationEffect", "Animate a TintEffect")]
public sealed partial class ColorEffectAnimationSample : Page
{
    public ColorEffectAnimationSample()
    {
        this.InitializeComponent();
    }
}

CrossFadeEffectAnimation

Blends and animates any PipelineBuilder source with any Win2D effect. This sample blends an image with a BlurEffect and effect from CommunityToolkit.WinUI.Media.Effects.

<Page x:Class="MediaExperiment.Samples.CrossFadeEffectAnimationSample"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:ani="using:CommunityToolkit.WinUI.Animations"
      xmlns:behaviors="using:CommunityToolkit.WinUI.Behaviors"
      xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
      xmlns:media="using:CommunityToolkit.WinUI.Media">

    <Border Height="280">
        <Image VerticalAlignment="Center"
               Source="ms-appx:///Assets/Bloom.jpg" />

        <media:UIElementExtensions.VisualFactory>
            <media:PipelineVisualFactory>
                <media:BlurEffect Amount="8"
                                  IsAnimatable="True" />

                <media:CrossFadeEffect x:Name="ImageCrossFadeEffect"
                                       Factor="1"
                                       IsAnimatable="True"
                                       Source="{media:BackdropSource}" />
            </media:PipelineVisualFactory>
        </media:UIElementExtensions.VisualFactory>

        <ani:Explicit.Animations>
            <ani:AnimationSet x:Name="CrossFadeAnimation"
                              IsSequential="True">
                <ani:CrossFadeEffectAnimation EasingMode="EaseOut"
                                              EasingType="Linear"
                                              Target="{x:Bind ImageCrossFadeEffect}"
                                              From="0"
                                              To="1"
                                              Duration="0:0:3" />

                <ani:CrossFadeEffectAnimation EasingMode="EaseIn"
                                              EasingType="Linear"
                                              Target="{x:Bind ImageCrossFadeEffect}"
                                              From="1"
                                              To="0"
                                              Duration="0:0:3" />
            </ani:AnimationSet>
        </ani:Explicit.Animations>

        <interactivity:Interaction.Behaviors>
            <interactivity:EventTriggerBehavior EventName="Loaded">
                <behaviors:StartAnimationAction Animation="{x:Bind CrossFadeAnimation}" />
            </interactivity:EventTriggerBehavior>
        </interactivity:Interaction.Behaviors>
    </Border>
</Page>

// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.

namespace MediaExperiment.Samples;

[ToolkitSample(nameof(CrossFadeEffectAnimationSample), "CrossFadeAnimationEffect", "Animate a CrossFade effect")]
public sealed partial class CrossFadeEffectAnimationSample : Page
{
    public CrossFadeEffectAnimationSample()
    {
        this.InitializeComponent();
    }
}

ExposureEffectAnimation

Animate the exposure with a Win2D ExposureEffect.

<Page x:Class="MediaExperiment.Samples.ExposureEffectAnimationSample"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:ani="using:CommunityToolkit.WinUI.Animations"
      xmlns:behaviors="using:CommunityToolkit.WinUI.Behaviors"
      xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
      xmlns:media="using:CommunityToolkit.WinUI.Media">

    <Border Height="280">
        <Image VerticalAlignment="Center"
               Source="ms-appx:///Assets/Bloom.jpg" />

        <media:UIElementExtensions.VisualFactory>
            <media:PipelineVisualFactory>
                <media:ExposureEffect x:Name="ImageExposureEffect"
                                      Amount="0"
                                      IsAnimatable="True" />
            </media:PipelineVisualFactory>
        </media:UIElementExtensions.VisualFactory>

        <ani:Explicit.Animations>
            <ani:AnimationSet x:Name="ExposureAnimation"
                              IsSequential="True">
                <ani:ExposureEffectAnimation EasingMode="EaseOut"
                                             EasingType="Linear"
                                             Target="{x:Bind ImageExposureEffect}"
                                             From="0"
                                             To="1"
                                             Duration="0:0:3" />

                <ani:ExposureEffectAnimation EasingMode="EaseOut"
                                             EasingType="Linear"
                                             Target="{x:Bind ImageExposureEffect}"
                                             From="1"
                                             To="0"
                                             Duration="0:0:3" />
            </ani:AnimationSet>
        </ani:Explicit.Animations>

        <interactivity:Interaction.Behaviors>
            <interactivity:EventTriggerBehavior EventName="Loaded">
                <behaviors:StartAnimationAction Animation="{x:Bind ExposureAnimation}" />
            </interactivity:EventTriggerBehavior>
        </interactivity:Interaction.Behaviors>
    </Border>
</Page>

// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.

namespace MediaExperiment.Samples;

[ToolkitSample(nameof(ExposureEffectAnimationSample), "ExposureAnimationEffect", "Animate a Exposure effect")]
public sealed partial class ExposureEffectAnimationSample : Page
{
    public ExposureEffectAnimationSample()
    {
        this.InitializeComponent();
    }
}

HueRotationEffectAnimation

Animate Hue to a specific angle using a Win2D HueRotationEffect.

<Page x:Class="MediaExperiment.Samples.HueRotationEffectAnimationSample"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:ani="using:CommunityToolkit.WinUI.Animations"
      xmlns:behaviors="using:CommunityToolkit.WinUI.Behaviors"
      xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
      xmlns:media="using:CommunityToolkit.WinUI.Media">

    <Border Height="280">
        <Image VerticalAlignment="Center"
               Source="ms-appx:///Assets/Bloom.jpg" />

        <media:UIElementExtensions.VisualFactory>
            <media:PipelineVisualFactory>
                <media:HueRotationEffect x:Name="ImageHueRotationEffect"
                                         Angle="0"
                                         IsAnimatable="True" />
            </media:PipelineVisualFactory>
        </media:UIElementExtensions.VisualFactory>

        <ani:Explicit.Animations>
            <ani:AnimationSet x:Name="HueRotationAnimation"
                              IsSequential="True">
                <ani:HueRotationEffectAnimation EasingMode="EaseOut"
                                                EasingType="Linear"
                                                Target="{x:Bind ImageHueRotationEffect}"
                                                From="0"
                                                To="6"
                                                Duration="0:0:3" />

                <ani:HueRotationEffectAnimation EasingMode="EaseOut"
                                                EasingType="Linear"
                                                Target="{x:Bind ImageHueRotationEffect}"
                                                From="6"
                                                To="0"
                                                Duration="0:0:3" />
            </ani:AnimationSet>
        </ani:Explicit.Animations>

        <interactivity:Interaction.Behaviors>
            <interactivity:EventTriggerBehavior EventName="Loaded">
                <behaviors:StartAnimationAction Animation="{x:Bind HueRotationAnimation}" />
            </interactivity:EventTriggerBehavior>
        </interactivity:Interaction.Behaviors>
    </Border>
</Page>

// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.

namespace MediaExperiment.Samples;

[ToolkitSample(nameof(HueRotationEffectAnimationSample), "HueRotationAnimationEffect", "Animate a HueRotation effect")]
public sealed partial class HueRotationEffectAnimationSample : Page
{
    public HueRotationEffectAnimationSample()
    {
        this.InitializeComponent();
    }
}

SaturationEffectAnimation

<Page x:Class="MediaExperiment.Samples.SaturationEffectAnimationSample"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:ani="using:CommunityToolkit.WinUI.Animations"
      xmlns:behaviors="using:CommunityToolkit.WinUI.Behaviors"
      xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
      xmlns:media="using:CommunityToolkit.WinUI.Media">

    <Border Height="280">
        <Image VerticalAlignment="Center"
               Source="ms-appx:///Assets/Bloom.jpg" />

        <media:UIElementExtensions.VisualFactory>
            <media:PipelineVisualFactory>
                <media:SaturationEffect x:Name="ImageSaturationEffect"
                                        IsAnimatable="True" />
            </media:PipelineVisualFactory>
        </media:UIElementExtensions.VisualFactory>

        <ani:Explicit.Animations>
            <ani:AnimationSet x:Name="SaturationAnimation"
                              IsSequential="True">
                <ani:SaturationEffectAnimation EasingMode="EaseOut"
                                               EasingType="Linear"
                                               Target="{x:Bind ImageSaturationEffect}"
                                               From="5"
                                               To="0"
                                               Duration="0:0:3" />

                <ani:SaturationEffectAnimation EasingMode="EaseOut"
                                               EasingType="Linear"
                                               Target="{x:Bind ImageSaturationEffect}"
                                               From="0"
                                               To="5"
                                               Duration="0:0:3" />
            </ani:AnimationSet>
        </ani:Explicit.Animations>

        <interactivity:Interaction.Behaviors>
            <interactivity:EventTriggerBehavior EventName="Loaded">
                <behaviors:StartAnimationAction Animation="{x:Bind SaturationAnimation}" />
            </interactivity:EventTriggerBehavior>
        </interactivity:Interaction.Behaviors>
    </Border>
</Page>

// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.

namespace MediaExperiment.Samples;

[ToolkitSample(nameof(SaturationEffectAnimationSample), "SaturationAnimationEffect", "Animate a Saturation effect")]
public sealed partial class SaturationEffectAnimationSample : Page
{
    public SaturationEffectAnimationSample()
    {
        this.InitializeComponent();
    }
}

SepiaEffectAnimation

<Page x:Class="MediaExperiment.Samples.SepiaEffectAnimationSample"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:ani="using:CommunityToolkit.WinUI.Animations"
      xmlns:behaviors="using:CommunityToolkit.WinUI.Behaviors"
      xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
      xmlns:media="using:CommunityToolkit.WinUI.Media">

    <Border Height="280">
        <Image VerticalAlignment="Center"
               Source="ms-appx:///Assets/Bloom.jpg" />

        <media:UIElementExtensions.VisualFactory>
            <media:PipelineVisualFactory>
                <media:SepiaEffect x:Name="ImageSepiaEffect"
                                   IsAnimatable="True" />
            </media:PipelineVisualFactory>
        </media:UIElementExtensions.VisualFactory>

        <ani:Explicit.Animations>
            <ani:AnimationSet x:Name="SepiaAnimation"
                              IsSequential="True">
                <ani:SepiaEffectAnimation EasingMode="EaseOut"
                                          EasingType="Linear"
                                          Target="{x:Bind ImageSepiaEffect}"
                                          From="0"
                                          To="1"
                                          Duration="0:0:3" />

                <ani:SepiaEffectAnimation EasingMode="EaseOut"
                                          EasingType="Linear"
                                          Target="{x:Bind ImageSepiaEffect}"
                                          From="1"
                                          To="0"
                                          Duration="0:0:3" />
            </ani:AnimationSet>
        </ani:Explicit.Animations>

        <interactivity:Interaction.Behaviors>
            <interactivity:EventTriggerBehavior EventName="Loaded">
                <behaviors:StartAnimationAction Animation="{x:Bind SepiaAnimation}" />
            </interactivity:EventTriggerBehavior>
        </interactivity:Interaction.Behaviors>
    </Border>
</Page>

// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.

namespace MediaExperiment.Samples;

[ToolkitSample(nameof(SepiaEffectAnimationSample), "SepiaAnimationEffect", "Animate a Sepia effect")]
public sealed partial class SepiaEffectAnimationSample : Page
{
    public SepiaEffectAnimationSample()
    {
        this.InitializeComponent();
    }
}
  • Last updated on