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 1 commit
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
Prev Previous commit
Next Next commit
Minor sample tweaks
  • Loading branch information
@niels9001
niels9001 committed Aug 21, 2023
commit 2d81c2b1f4d485182f19e489d105df821f4b95e8
10 changes: 4 additions & 6 deletions components/Media/samples/BlurEffectAnimationSample.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,9 @@
xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:media="using:CommunityToolkit.WinUI.Media">

<Border MaxWidth="700"
MaxHeight="400">
<Border Height="280">
<Image VerticalAlignment="Center"
Source="ms-appx:///Assets/SpeedTripleAtristsPoint.jpg"
Stretch="UniformToFill" />
Source="ms-appx:///Assets/Wallpaper.png" />

<media:UIElementExtensions.VisualFactory>
<media:PipelineVisualFactory>
Expand All @@ -28,14 +26,14 @@
Target="{x:Bind ImageBlurEffect}"
From="0"
To="8"
Duration="0:0:5" />
Duration="0:0:3" />

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

Expand Down
6 changes: 2 additions & 4 deletions components/Media/samples/ColorEffectAnimationSample.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,9 @@
xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:media="using:CommunityToolkit.WinUI.Media">

<Border MaxWidth="700"
MaxHeight="400">
<Border Height="280">
<Image VerticalAlignment="Center"
Source="ms-appx:///Assets/SpeedTripleAtristsPoint.jpg"
Stretch="UniformToFill" />
Source="ms-appx:///Assets/Wallpaper.png" />

<media:UIElementExtensions.VisualFactory>
<media:PipelineVisualFactory>
Expand Down
10 changes: 4 additions & 6 deletions components/Media/samples/CrossFadeEffectAnimationSample.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,9 @@
xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:media="using:CommunityToolkit.WinUI.Media">

<Border MaxWidth="700"
MaxHeight="400">
<Border Height="280">
<Image VerticalAlignment="Center"
Source="ms-appx:///Assets/SpeedTripleAtristsPoint.jpg"
Stretch="UniformToFill" />
Source="ms-appx:///Assets/Wallpaper.png" />

<media:UIElementExtensions.VisualFactory>
<media:PipelineVisualFactory>
Expand All @@ -33,14 +31,14 @@
Target="{x:Bind ImageCrossFadeEffect}"
From="0"
To="1"
Duration="0:0:5" />
Duration="0:0:3" />

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

Expand Down
18 changes: 9 additions & 9 deletions components/Media/samples/EffectAnimations.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,48 +1,48 @@
---
title: EffectAnimations
author: arlodotexe
description: Animate a Win2d effect using XAML.
description: Animate a Win2D effect using XAML.
keywords: Media, effects, animations, pipeline
dev_langs:
- csharp
category: Xaml
category: Animations
subcategory: Media
discussion-id: 0
issue-id: 0
icon: Assets/icon.png
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.
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
Apply and animate a Win2D BlurEffect

> [!SAMPLE BlurEffectAnimationSample]

## ColorEffectAnimation

Animate an overlayed color with a Win2d ColorEffect.
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`.
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.
Animate the exposure with a Win2D ExposureEffect.

> [!SAMPLE ExposureEffectAnimationSample]

## HueRotationEffectAnimation

Animate Hue to a specific angle using a Win2d HueRotationEffect.
Animate Hue to a specific angle using a Win2D HueRotationEffect.

> [!SAMPLE HueRotationEffectAnimationSample]

Expand Down
12 changes: 6 additions & 6 deletions components/Media/samples/EffectAnimationsSample.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,17 @@
xmlns:media="using:CommunityToolkit.WinUI.Media">

<Grid>
<Border MaxHeight="500">
<Border Height="320">
<Image VerticalAlignment="Center"
Source="ms-appx:///Assets/SpeedTripleAtristsPoint.jpg"
Stretch="UniformToFill" />
Source="ms-appx:///Assets/Wallpaper.png" />
</Border>

<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="52"
FontWeight="Bold"
Text="THIS IS SAMPLE TEXT"
FontSize="36"
FontWeight="SemiBold"
Foreground="White"
Text="This is sample text"
TextWrapping="Wrap" />

<media:UIElementExtensions.VisualFactory>
Expand Down
24 changes: 20 additions & 4 deletions components/Media/samples/EffectAnimationsSampleOptions.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,26 @@
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Button Click="OnStartAnimationButton_Clicked"
Content="Start animation" />
<Button Click="OnStartAnimationButton_Clicked">
<Button.Content>
<StackPanel Orientation="Horizontal"
Spacing="8">
<FontIcon FontSize="16"
Glyph="&#xE768;" />
<TextBlock Text="Play animation" />
</StackPanel>
</Button.Content>
</Button>

<Button Click="OnStopAnimationButton_Clicked"
Content="Stop animation" />
<Button Click="OnStopAnimationButton_Clicked">
<Button.Content>
<StackPanel Orientation="Horizontal"
Spacing="8">
<FontIcon FontSize="16"
Glyph="&#xE71A;" />
<TextBlock Text="Stop animation" />
</StackPanel>
</Button.Content>
</Button>
</StackPanel>
</Page>
10 changes: 4 additions & 6 deletions components/Media/samples/ExposureEffectAnimationSample.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,9 @@
xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:media="using:CommunityToolkit.WinUI.Media">

<Border MaxWidth="700"
MaxHeight="400">
<Border Height="280">
<Image VerticalAlignment="Center"
Source="ms-appx:///Assets/SpeedTripleAtristsPoint.jpg"
Stretch="UniformToFill" />
Source="ms-appx:///Assets/Wallpaper.png" />

<media:UIElementExtensions.VisualFactory>
<media:PipelineVisualFactory>
Expand All @@ -29,14 +27,14 @@
Target="{x:Bind ImageExposureEffect}"
From="0"
To="1"
Duration="0:0:5" />
Duration="0:0:3" />

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

Expand Down
10 changes: 4 additions & 6 deletions components/Media/samples/HueRotationEffectAnimationSample.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,9 @@
xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:media="using:CommunityToolkit.WinUI.Media">

<Border MaxWidth="700"
MaxHeight="400">
<Border Height="280">
<Image VerticalAlignment="Center"
Source="ms-appx:///Assets/SpeedTripleAtristsPoint.jpg"
Stretch="UniformToFill" />
Source="ms-appx:///Assets/Wallpaper.png" />

<media:UIElementExtensions.VisualFactory>
<media:PipelineVisualFactory>
Expand All @@ -29,14 +27,14 @@
Target="{x:Bind ImageHueRotationEffect}"
From="0"
To="6"
Duration="0:0:5" />
Duration="0:0:3" />

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

Expand Down
4 changes: 2 additions & 2 deletions components/Media/samples/Media.Samples.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@
<Import Project="$(ToolingDirectory)\ToolkitComponent.SampleProject.props" />

<ItemGroup>
<None Remove="Assets\SpeedTripleAtristsPoint.jpg" />
<Content Include="Assets\SpeedTripleAtristsPoint.jpg">
<None Remove="Assets\Wallpaper.png" />
<Content Include="Assets\Wallpaper.png">
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</Content>
</ItemGroup>
Expand Down
6 changes: 2 additions & 4 deletions components/Media/samples/OpacityEffectAnimationSample.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,9 @@
xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:media="using:CommunityToolkit.WinUI.Media">

<Border MaxWidth="700"
MaxHeight="400">
<Border Height="280">
<Image VerticalAlignment="Center"
Source="ms-appx:///Assets/SpeedTripleAtristsPoint.jpg"
Stretch="UniformToFill" />
Source="ms-appx:///Assets/Wallpaper.png" />

<media:UIElementExtensions.VisualFactory>
<media:PipelineVisualFactory>
Expand Down
10 changes: 4 additions & 6 deletions components/Media/samples/SaturationEffectAnimationSample.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,9 @@
xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:media="using:CommunityToolkit.WinUI.Media">

<Border MaxWidth="700"
MaxHeight="400">
<Border Height="280">
<Image VerticalAlignment="Center"
Source="ms-appx:///Assets/SpeedTripleAtristsPoint.jpg"
Stretch="UniformToFill" />
Source="ms-appx:///Assets/Wallpaper.png" />

<media:UIElementExtensions.VisualFactory>
<media:PipelineVisualFactory>
Expand All @@ -28,14 +26,14 @@
Target="{x:Bind ImageSaturationEffect}"
From="5"
To="0"
Duration="0:0:5" />
Duration="0:0:3" />

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

Expand Down
10 changes: 4 additions & 6 deletions components/Media/samples/SepiaEffectAnimationSample.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,9 @@
xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:media="using:CommunityToolkit.WinUI.Media">

<Border MaxWidth="700"
MaxHeight="400">
<Border Height="280">
<Image VerticalAlignment="Center"
Source="ms-appx:///Assets/SpeedTripleAtristsPoint.jpg"
Stretch="UniformToFill" />
Source="ms-appx:///Assets/Wallpaper.png" />

<media:UIElementExtensions.VisualFactory>
<media:PipelineVisualFactory>
Expand All @@ -28,14 +26,14 @@
Target="{x:Bind ImageSepiaEffect}"
From="0"
To="1"
Duration="0:0:5" />
Duration="0:0:3" />

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

Expand Down
Loading