Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Port and add samples for Media EffectAnimations #151

Merged
merged 26 commits into from
Aug 21, 2023
Merged

Port and add samples for Media EffectAnimations #151

Show file tree
Hide file tree
Changes from 22 commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
467565c
Enabled WinUI 3 support for BackdropSourceExtension
Arlodotexe Jul 17, 2023
e8b179d
Added EffectAnimations to Media component, build fixes
Arlodotexe Jul 17, 2023
b9b888f
Update tooling to include https://github.com/CommunityToolkit/Tooling…
Arlodotexe Jul 17, 2023
e189866
Consolidate custom options panes
Arlodotexe Jul 17, 2023
973d045
Added CrossFadeEffectAnimationSample
Arlodotexe Jul 17, 2023
e6d776e
Added ExposureEffectAnimation sample
Arlodotexe Jul 17, 2023
028025a
Cleanup / style tweaks
Arlodotexe Jul 17, 2023
f95c851
Add HueRotationEffectAnimationSample, adjust animation timings
Arlodotexe Jul 17, 2023
891cc5c
Added remaining effect animation samples. OpactiyEffectAnimation not …
Arlodotexe Jul 18, 2023
5ec3a24
Merge branch 'main' into component/media/samples
Arlodotexe Jul 18, 2023
21ebe55
Ran XAML styler
Arlodotexe Jul 18, 2023
67071a5
Merge branch 'main' into component/media/samples
Arlodotexe Jul 18, 2023
45be4c9
Merge branch 'main' into component/media/samples
niels9001 Jul 21, 2023
44ff220
Merge branch 'main' into component/media/samples
Arlodotexe Jul 25, 2023
6af319d
Disabled OpacityEffectAnimation
Arlodotexe Jul 25, 2023
b685e89
Set tooling to latest main
Arlodotexe Jul 25, 2023
28dd072
Updated tooling pointer
Arlodotexe Aug 3, 2023
66b631b
Merge branch 'main' into component/media/samples
Arlodotexe Aug 3, 2023
3a49446
Fix build errors
Arlodotexe Aug 4, 2023
8f89901
Merge branch 'main' into component/media/samples
michael-hawker Aug 10, 2023
3c87b08
Merge branch 'main' into component/media/samples
niels9001 Aug 17, 2023
62f125c
Merge branch 'main' into component/media/samples
niels9001 Aug 18, 2023
6eec81a
Changing assets
niels9001 Aug 21, 2023
6c1beb6
Adding new icon
niels9001 Aug 21, 2023
2d81c2b
Minor sample tweaks
niels9001 Aug 21, 2023
a097b00
Use JPG instead of PNG
niels9001 Aug 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
Binary file added components/Media/samples/Assets/SpeedTripleAtristsPoint.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
48 changes: 48 additions & 0 deletions components/Media/samples/BlurEffectAnimationSample.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<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 MaxWidth="700"
MaxHeight="400">
<Image VerticalAlignment="Center"
Source="ms-appx:///Assets/SpeedTripleAtristsPoint.jpg"
Stretch="UniformToFill" />

<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:5" />

<ani:BlurEffectAnimation EasingMode="EaseOut"
EasingType="Linear"
Target="{x:Bind ImageBlurEffect}"
From="8"
To="0"
Duration="0:0:5" />
</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 components/Media/samples/BlurEffectAnimationSample.xaml.cs
View file
Open in desktop
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();
}
}
49 changes: 49 additions & 0 deletions components/Media/samples/ColorEffectAnimationSample.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<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 MaxWidth="700"
MaxHeight="400">
<Image VerticalAlignment="Center"
Source="ms-appx:///Assets/SpeedTripleAtristsPoint.jpg"
Stretch="UniformToFill" />

<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 components/Media/samples/ColorEffectAnimationSample.xaml.cs
View file
Open in desktop
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();
}
}
53 changes: 53 additions & 0 deletions components/Media/samples/CrossFadeEffectAnimationSample.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<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 MaxWidth="700"
MaxHeight="400">
<Image VerticalAlignment="Center"
Source="ms-appx:///Assets/SpeedTripleAtristsPoint.jpg"
Stretch="UniformToFill" />

<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:5" />

<ani:CrossFadeEffectAnimation EasingMode="EaseIn"
EasingType="Linear"
Target="{x:Bind ImageCrossFadeEffect}"
From="1"
To="0"
Duration="0:0:5" />
</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 components/Media/samples/CrossFadeEffectAnimationSample.xaml.cs
View file
Open in desktop
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();
}
}
34 changes: 17 additions & 17 deletions components/Media/samples/Dependencies.props
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
55 changes: 55 additions & 0 deletions components/Media/samples/EffectAnimations.md
View file
Open in desktop
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: Xaml
subcategory: Media
discussion-id: 0
issue-id: 0
icon: Assets/icon.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]
82 changes: 82 additions & 0 deletions components/Media/samples/EffectAnimationsSample.xaml
View file
Open in desktop
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 MaxHeight="500">
<Image VerticalAlignment="Center"
Source="ms-appx:///Assets/SpeedTripleAtristsPoint.jpg"
Stretch="UniformToFill" />
</Border>

<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="52"
FontWeight="Bold"
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>
Loading
Loading