-
Notifications
You must be signed in to change notification settings - Fork 70
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
5ec3a24
commit 21ebe55
Showing
12 changed files
with
451 additions
and
465 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
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 |
---|---|---|
@@ -1,49 +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"> | ||
<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" /> | ||
<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> | ||
<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: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> | ||
<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> | ||
<interactivity:Interaction.Behaviors> | ||
<interactions:EventTriggerBehavior EventName="Loaded"> | ||
<behaviors:StartAnimationAction Animation="{x:Bind BlurAnimation}" /> | ||
</interactions:EventTriggerBehavior> | ||
</interactivity:Interaction.Behaviors> | ||
</Border> | ||
</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 |
---|---|---|
@@ -1,50 +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"> | ||
<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" /> | ||
<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> | ||
<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: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> | ||
<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> | ||
<interactivity:Interaction.Behaviors> | ||
<interactions:EventTriggerBehavior EventName="Loaded"> | ||
<behaviors:StartAnimationAction Animation="{x:Bind ColorAnimation}" /> | ||
</interactions:EventTriggerBehavior> | ||
</interactivity:Interaction.Behaviors> | ||
</Border> | ||
|
||
</Page> |
94 changes: 46 additions & 48 deletions
94
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 |
---|---|---|
@@ -1,55 +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"> | ||
<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" /> | ||
<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: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> | ||
<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: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> | ||
<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> | ||
<interactivity:Interaction.Behaviors> | ||
<interactions:EventTriggerBehavior EventName="Loaded"> | ||
<behaviors:StartAnimationAction Animation="{x:Bind CrossFadeAnimation}" /> | ||
</interactions:EventTriggerBehavior> | ||
</interactivity:Interaction.Behaviors> | ||
</Border> | ||
</Page> |
Oops, something went wrong.