Skip to content

Commit 24d0559

Browse files
Arlodotexeniels9001michael-hawker
authored
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>
1 parent 58cdd50 commit 24d0559

29 files changed

+800
-22
lines changed

‎.vscode/settings.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@
77
"csharp.suppressDotnetInstallWarning": true,
88
"csharp.suppressDotnetRestoreNotification": true,
99
"csharp.semanticHighlighting.enabled": true,
10-
"omnisharp.enableImportCompletion": true,
11-
"omnisharp.enableMsBuildLoadProjectsOnDemand": true
10+
"omnisharp.enableMsBuildLoadProjectsOnDemand": true,
11+
"dotnet.completion.showCompletionItemsFromUnimportedNamespaces": true
1212
}

‎components/Media/samples/Assets/Bloom.jpg

245 KB
Loading

‎components/Media/samples/Assets/EffectAnimations.png

3.28 KB
Loading

‎components/Media/samples/Assets/icon.png

-6.05 KB
Binary file not shown.

‎components/Media/samples/BlurEffectAnimationSample.xaml

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<Page x:Class="MediaExperiment.Samples.BlurEffectAnimationSample"
2+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4+
xmlns:ani="using:CommunityToolkit.WinUI.Animations"
5+
xmlns:behaviors="using:CommunityToolkit.WinUI.Behaviors"
6+
xmlns:interactions="using:Microsoft.Xaml.Interactions.Core"
7+
xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
8+
xmlns:media="using:CommunityToolkit.WinUI.Media">
9+
10+
<Border Height="280">
11+
<Image VerticalAlignment="Center"
12+
Source="ms-appx:///Assets/Bloom.jpg" />
13+
14+
<media:UIElementExtensions.VisualFactory>
15+
<media:PipelineVisualFactory>
16+
<media:BlurEffect x:Name="ImageBlurEffect"
17+
IsAnimatable="True" />
18+
</media:PipelineVisualFactory>
19+
</media:UIElementExtensions.VisualFactory>
20+
21+
<ani:Explicit.Animations>
22+
<ani:AnimationSet x:Name="BlurAnimation"
23+
IsSequential="True">
24+
<ani:BlurEffectAnimation EasingMode="EaseOut"
25+
EasingType="Linear"
26+
Target="{x:Bind ImageBlurEffect}"
27+
From="0"
28+
To="8"
29+
Duration="0:0:3" />
30+
31+
<ani:BlurEffectAnimation EasingMode="EaseOut"
32+
EasingType="Linear"
33+
Target="{x:Bind ImageBlurEffect}"
34+
From="8"
35+
To="0"
36+
Duration="0:0:3" />
37+
</ani:AnimationSet>
38+
</ani:Explicit.Animations>
39+
40+
<interactivity:Interaction.Behaviors>
41+
<interactions:EventTriggerBehavior EventName="Loaded">
42+
<behaviors:StartAnimationAction Animation="{x:Bind BlurAnimation}" />
43+
</interactions:EventTriggerBehavior>
44+
</interactivity:Interaction.Behaviors>
45+
</Border>
46+
</Page>

‎components/Media/samples/BlurEffectAnimationSample.xaml.cs

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the MIT license.
3+
// See the LICENSE file in the project root for more information.
4+
5+
namespace MediaExperiment.Samples;
6+
7+
[ToolkitSample(nameof(BlurEffectAnimationSample), "BlurAnimationEffect", "Animate a blur effect")]
8+
public sealed partial class BlurEffectAnimationSample : Page
9+
{
10+
public BlurEffectAnimationSample()
11+
{
12+
this.InitializeComponent();
13+
}
14+
}

‎components/Media/samples/ColorEffectAnimationSample.xaml

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<Page x:Class="MediaExperiment.Samples.ColorEffectAnimationSample"
2+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4+
xmlns:ani="using:CommunityToolkit.WinUI.Animations"
5+
xmlns:behaviors="using:CommunityToolkit.WinUI.Behaviors"
6+
xmlns:interactions="using:Microsoft.Xaml.Interactions.Core"
7+
xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
8+
xmlns:media="using:CommunityToolkit.WinUI.Media">
9+
10+
<Border Height="280">
11+
<Image VerticalAlignment="Center"
12+
Source="ms-appx:///Assets/Bloom.jpg" />
13+
14+
<media:UIElementExtensions.VisualFactory>
15+
<media:PipelineVisualFactory>
16+
<media:TintEffect x:Name="ImageColorEffect"
17+
IsAnimatable="True" />
18+
</media:PipelineVisualFactory>
19+
</media:UIElementExtensions.VisualFactory>
20+
21+
<ani:Explicit.Animations>
22+
<ani:AnimationSet x:Name="ColorAnimation"
23+
IsSequential="True">
24+
<ani:ColorEffectAnimation EasingMode="EaseOut"
25+
EasingType="Linear"
26+
Target="{x:Bind ImageColorEffect}"
27+
From="Transparent"
28+
To="#803300FF"
29+
Duration="0:0:2" />
30+
31+
<ani:ColorEffectAnimation EasingMode="EaseOut"
32+
EasingType="Linear"
33+
Target="{x:Bind ImageColorEffect}"
34+
From="#803300FF"
35+
To="Transparent"
36+
Duration="0:0:2" />
37+
</ani:AnimationSet>
38+
</ani:Explicit.Animations>
39+
40+
<interactivity:Interaction.Behaviors>
41+
<interactions:EventTriggerBehavior EventName="Loaded">
42+
<behaviors:StartAnimationAction Animation="{x:Bind ColorAnimation}" />
43+
</interactions:EventTriggerBehavior>
44+
</interactivity:Interaction.Behaviors>
45+
</Border>
46+
47+
</Page>

‎components/Media/samples/ColorEffectAnimationSample.xaml.cs

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the MIT license.
3+
// See the LICENSE file in the project root for more information.
4+
5+
namespace MediaExperiment.Samples;
6+
7+
[ToolkitSample(nameof(ColorEffectAnimationSample), "ColorAnimationEffect", "Animate a TintEffect")]
8+
public sealed partial class ColorEffectAnimationSample : Page
9+
{
10+
public ColorEffectAnimationSample()
11+
{
12+
this.InitializeComponent();
13+
}
14+
}

‎components/Media/samples/CrossFadeEffectAnimationSample.xaml

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<Page x:Class="MediaExperiment.Samples.CrossFadeEffectAnimationSample"
2+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4+
xmlns:ani="using:CommunityToolkit.WinUI.Animations"
5+
xmlns:behaviors="using:CommunityToolkit.WinUI.Behaviors"
6+
xmlns:interactions="using:Microsoft.Xaml.Interactions.Core"
7+
xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
8+
xmlns:media="using:CommunityToolkit.WinUI.Media">
9+
10+
<Border Height="280">
11+
<Image VerticalAlignment="Center"
12+
Source="ms-appx:///Assets/Bloom.jpg" />
13+
14+
<media:UIElementExtensions.VisualFactory>
15+
<media:PipelineVisualFactory>
16+
<media:BlurEffect Amount="8"
17+
IsAnimatable="True" />
18+
19+
<media:CrossFadeEffect x:Name="ImageCrossFadeEffect"
20+
Factor="1"
21+
IsAnimatable="True"
22+
Source="{media:BackdropSource}" />
23+
</media:PipelineVisualFactory>
24+
</media:UIElementExtensions.VisualFactory>
25+
26+
<ani:Explicit.Animations>
27+
<ani:AnimationSet x:Name="CrossFadeAnimation"
28+
IsSequential="True">
29+
<ani:CrossFadeEffectAnimation EasingMode="EaseOut"
30+
EasingType="Linear"
31+
Target="{x:Bind ImageCrossFadeEffect}"
32+
From="0"
33+
To="1"
34+
Duration="0:0:3" />
35+
36+
<ani:CrossFadeEffectAnimation EasingMode="EaseIn"
37+
EasingType="Linear"
38+
Target="{x:Bind ImageCrossFadeEffect}"
39+
From="1"
40+
To="0"
41+
Duration="0:0:3" />
42+
</ani:AnimationSet>
43+
</ani:Explicit.Animations>
44+
45+
<interactivity:Interaction.Behaviors>
46+
<interactions:EventTriggerBehavior EventName="Loaded">
47+
<behaviors:StartAnimationAction Animation="{x:Bind CrossFadeAnimation}" />
48+
</interactions:EventTriggerBehavior>
49+
</interactivity:Interaction.Behaviors>
50+
</Border>
51+
</Page>

‎components/Media/samples/CrossFadeEffectAnimationSample.xaml.cs

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the MIT license.
3+
// See the LICENSE file in the project root for more information.
4+
5+
namespace MediaExperiment.Samples;
6+
7+
[ToolkitSample(nameof(CrossFadeEffectAnimationSample), "CrossFadeAnimationEffect", "Animate a CrossFade effect")]
8+
public sealed partial class CrossFadeEffectAnimationSample : Page
9+
{
10+
public CrossFadeEffectAnimationSample()
11+
{
12+
this.InitializeComponent();
13+
}
14+
}

0 commit comments

Comments
 (0)