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>
CommunityToolkit · Aug 21, 2023 · 24d0559 · 24d0559
1 parent 58cdd50
commit 24d0559
Show file tree

Hide file tree

Showing 29 changed files with 800 additions and 22 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -7,6 +7,6 @@
     "csharp.suppressDotnetInstallWarning": true,
     "csharp.suppressDotnetRestoreNotification": true,
     "csharp.semanticHighlighting.enabled": true,
-    "omnisharp.enableImportCompletion": true,
-    "omnisharp.enableMsBuildLoadProjectsOnDemand": true
+    "omnisharp.enableMsBuildLoadProjectsOnDemand": true,
+    "dotnet.completion.showCompletionItemsFromUnimportedNamespaces": true
 }
diff --git a/components/Media/samples/Assets/Bloom.jpg b/components/Media/samples/Assets/Bloom.jpg
diff --git a/components/Media/samples/Assets/EffectAnimations.png b/components/Media/samples/Assets/EffectAnimations.png
diff --git a/components/Media/samples/Assets/icon.png b/components/Media/samples/Assets/icon.png
diff --git a/components/Media/samples/BlurEffectAnimationSample.xaml b/components/Media/samples/BlurEffectAnimationSample.xaml
@@ -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>
diff --git a/components/Media/samples/BlurEffectAnimationSample.xaml.cs b/components/Media/samples/BlurEffectAnimationSample.xaml.cs
@@ -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();
+    }
+}
diff --git a/components/Media/samples/ColorEffectAnimationSample.xaml b/components/Media/samples/ColorEffectAnimationSample.xaml
@@ -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>
diff --git a/components/Media/samples/ColorEffectAnimationSample.xaml.cs b/components/Media/samples/ColorEffectAnimationSample.xaml.cs
@@ -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();
+    }
+}
diff --git a/components/Media/samples/CrossFadeEffectAnimationSample.xaml b/components/Media/samples/CrossFadeEffectAnimationSample.xaml
@@ -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>
diff --git a/components/Media/samples/CrossFadeEffectAnimationSample.xaml.cs b/components/Media/samples/CrossFadeEffectAnimationSample.xaml.cs
@@ -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();
+    }
+}
diff --git a/components/Media/samples/Dependencies.props b/components/Media/samples/Dependencies.props
@@ -9,23 +9,23 @@
     For UWP / WinAppSDK / Uno packages, place the package references here.
 -->
 <Project>
-    <!-- WinUI 2 / UWP -->
-    <ItemGroup Condition="'$(IsUwp)' == 'true'">
-        <!-- <PackageReference Include="Microsoft.Toolkit.Uwp.UI.Controls.Primitives" Version="7.1.2"/> -->
-    </ItemGroup>
+  <!-- WinUI 2 / UWP -->
+  <ItemGroup Condition="'$(IsUwp)' == 'true'">
+    <PackageReference Include="CommunityToolkit.Uwp.Behaviors" Version="8.0.0-beta.2"/>
+  </ItemGroup>
 
-    <!-- WinUI 2 / Uno -->
-    <ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '2'">
-        <!-- <PackageReference Include="Uno.Microsoft.Toolkit.Uwp.UI.Controls.Primitives" Version="7.1.11"/> -->
-    </ItemGroup>
+  <!-- WinUI 2 / Uno -->
+  <ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '2'">
+    <PackageReference Include="CommunityToolkit.Uwp.Behaviors" Version="8.0.0-beta.2"/>
+  </ItemGroup>
 
-    <!-- WinUI 3 / WinAppSdk -->
-    <ItemGroup Condition="'$(IsWinAppSdk)' == 'true'">
-        <!-- <PackageReference Include="CommunityToolkit.WinUI.UI.Controls.Primitives" Version="7.1.2"/> -->
-    </ItemGroup>
-    
-    <!-- WinUI 3 / Uno -->
-    <ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '3'">
-        <!-- <PackageReference Include="Uno.CommunityToolkit.WinUI.UI.Controls.Primitives" Version="7.1.100-dev.15.g12261e2626"/> -->
-    </ItemGroup>
+  <!-- WinUI 3 / WinAppSdk -->
+  <ItemGroup Condition="'$(IsWinAppSdk)' == 'true'">
+    <PackageReference Include="CommunityToolkit.WinUI.Behaviors" Version="8.0.0-beta.2"/>
+  </ItemGroup>
+
+  <!-- WinUI 3 / Uno -->
+  <ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '3'">
+    <PackageReference Include="CommunityToolkit.WinUI.Behaviors" Version="8.0.0-beta.2"/>
+  </ItemGroup>
 </Project>
diff --git a/components/Media/samples/EffectAnimations.md b/components/Media/samples/EffectAnimations.md
@@ -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]
diff --git a/components/Media/samples/EffectAnimationsSample.xaml b/components/Media/samples/EffectAnimationsSample.xaml
@@ -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>
diff --git a/components/Media/samples/EffectAnimationsSample.xaml.cs b/components/Media/samples/EffectAnimationsSample.xaml.cs
@@ -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();
+    }
+}