-
Notifications
You must be signed in to change notification settings - Fork 63
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Port and add samples for Media EffectAnimations (#151)
* Enabled WinUI 3 support for BackdropSourceExtension * Added EffectAnimations to Media component, build fixes * Update tooling to include CommunityToolkit/Tooling-Windows-Submodule#102 * Consolidate custom options panes * Added CrossFadeEffectAnimationSample * Added ExposureEffectAnimation sample * Cleanup / style tweaks * Add HueRotationEffectAnimationSample, adjust animation timings * Added remaining effect animation samples. OpactiyEffectAnimation not working. * Ran XAML styler * Disabled OpacityEffectAnimation * Set tooling to latest main * Updated tooling pointer * Fix build errors * Changing assets * Adding new icon * Minor sample tweaks * Use JPG instead of PNG --------- Co-authored-by: Niels Laute <niels.laute@live.nl> Co-authored-by: Michael Hawker MSFT (XAML Llama) <24302614+michael-hawker@users.noreply.github.com>
- Loading branch information
1 parent
58cdd50
commit 24d0559
Showing
29 changed files
with
800 additions
and
22 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
<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:interactions="using:Microsoft.Xaml.Interactions.Core" | ||
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> | ||
<interactions:EventTriggerBehavior EventName="Loaded"> | ||
<behaviors:StartAnimationAction Animation="{x:Bind BlurAnimation}" /> | ||
</interactions:EventTriggerBehavior> | ||
</interactivity:Interaction.Behaviors> | ||
</Border> | ||
</Page> |
14 changes: 14 additions & 0 deletions
14
components/Media/samples/BlurEffectAnimationSample.xaml.cs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
// 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(); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
<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:interactions="using:Microsoft.Xaml.Interactions.Core" | ||
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> | ||
<interactions:EventTriggerBehavior EventName="Loaded"> | ||
<behaviors:StartAnimationAction Animation="{x:Bind ColorAnimation}" /> | ||
</interactions:EventTriggerBehavior> | ||
</interactivity:Interaction.Behaviors> | ||
</Border> | ||
|
||
</Page> |
14 changes: 14 additions & 0 deletions
14
components/Media/samples/ColorEffectAnimationSample.xaml.cs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
// 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(); | ||
} | ||
} |
51 changes: 51 additions & 0 deletions
51
components/Media/samples/CrossFadeEffectAnimationSample.xaml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
<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:interactions="using:Microsoft.Xaml.Interactions.Core" | ||
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> | ||
<interactions:EventTriggerBehavior EventName="Loaded"> | ||
<behaviors:StartAnimationAction Animation="{x:Bind CrossFadeAnimation}" /> | ||
</interactions:EventTriggerBehavior> | ||
</interactivity:Interaction.Behaviors> | ||
</Border> | ||
</Page> |
14 changes: 14 additions & 0 deletions
14
components/Media/samples/CrossFadeEffectAnimationSample.xaml.cs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
// 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(); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
--- | ||
title: EffectAnimations | ||
author: arlodotexe | ||
description: Animate a Win2D effect using XAML. | ||
keywords: Media, effects, animations, pipeline | ||
dev_langs: | ||
- csharp | ||
category: Animations | ||
subcategory: Media | ||
discussion-id: 0 | ||
issue-id: 0 | ||
icon: Assets/EffectAnimations.png | ||
--- | ||
|
||
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. | ||
|
||
> [!SAMPLE EffectAnimationsSample] | ||
## BlurEffectAnimation | ||
|
||
Apply and animate a Win2D BlurEffect | ||
|
||
> [!SAMPLE BlurEffectAnimationSample] | ||
## ColorEffectAnimation | ||
|
||
Animate an overlayed color with a Win2D ColorEffect. | ||
|
||
> [!SAMPLE ColorEffectAnimationSample] | ||
## 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`. | ||
|
||
> [!SAMPLE CrossFadeEffectAnimationSample] | ||
## ExposureEffectAnimation | ||
|
||
Animate the exposure with a Win2D ExposureEffect. | ||
|
||
> [!SAMPLE ExposureEffectAnimationSample] | ||
## HueRotationEffectAnimation | ||
|
||
Animate Hue to a specific angle using a Win2D HueRotationEffect. | ||
|
||
> [!SAMPLE HueRotationEffectAnimationSample] | ||
## SaturationEffectAnimation | ||
|
||
> [!SAMPLE SaturationEffectAnimationSample] | ||
## SepiaEffectAnimation | ||
|
||
> [!SAMPLE SepiaEffectAnimationSample] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,82 @@ | ||
<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:interactions="using:Microsoft.Xaml.Interactions.Core" | ||
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> | ||
<interactions:EventTriggerBehavior EventName="Loaded"> | ||
<behaviors:StartAnimationAction Animation="{x:Bind ClipAnimation}" /> | ||
</interactions:EventTriggerBehavior> | ||
</interactivity:Interaction.Behaviors> | ||
</Grid> | ||
</Page> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
// 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(); | ||
} | ||
} |
Oops, something went wrong.