Added effect animations sample page (WIP)

Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj

@@ -590,6 +590,7 @@
     <Content Include="SamplePages\Animations\Effects\FadeBehaviorXaml.bind" />
     <Content Include="SamplePages\Animations\Activities\StartAnimationActivity.bind" />
     <Content Include="SamplePages\Animations\Activities\InvokeActionsActivity.bind" />
+    <Content Include="SamplePages\Animations\Effects\EffectAnimations.bind" />
   </ItemGroup>
   <ItemGroup>
     <Compile Include="App.xaml.cs">

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Animations/Effects/EffectAnimations.bind

@@ -0,0 +1,58 @@
+<Page
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:extensions="using:Microsoft.Toolkit.Uwp.UI.Extensions"
+    xmlns:animations="using:Microsoft.Toolkit.Uwp.UI.Animations"
+    xmlns:behaviors="using:Microsoft.Toolkit.Uwp.UI.Behaviors"
+    xmlns:media="using:Microsoft.Toolkit.Uwp.UI.Media"
+    xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
+    xmlns:Interactions="using:Microsoft.Xaml.Interactions.Core"
+    mc:Ignorable="d">
+
+  <Grid>
+    <Grid.RowDefinitions>
+      <RowDefinition Height="*"/>
+      <RowDefinition Height="Auto"/>
+    </Grid.RowDefinitions>
+    <Grid Height="560" Width="1280">
+      <Image Source="/Assets/Photos/SpeedTripleAtristsPoint.jpg" Stretch="UniformToFill"/>
+      <TextBlock
+          Text="THIS IS A SAMPLE TEXT"
+          FontSize="52"
+          FontWeight="Bold"
+          TextWrapping="Wrap"
+          VerticalAlignment="Center"
+          HorizontalAlignment="Center"/>
+      <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" Value="0" IsAnimatable="True"/>
+        </media:PipelineVisualFactory>
+      </media:UIElementExtensions.VisualFactory>
+      <animations:Explicit.Animations>
+        <animations:AnimationSet x:Name="ClipAnimation">
+          <animations:AnimationScope Duration="0:0:3" EasingMode="EaseOut">
+            <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 From="32" To="0" Target="{Binding ElementName=ImageBlurEffect}"/>
+            <animations:SaturationEffectAnimation From="0" To="1" Target="{Binding ElementName=ImageSaturationEffect}" Duration="0:0:6"/>
+          </animations:AnimationScope>
+        </animations:AnimationSet>
+      </animations:Explicit.Animations>
+    </Grid>
+
+    <Button Content="Start animation" Grid.Row="1">
+      <Interactivity:Interaction.Behaviors>
+        <Interactions:EventTriggerBehavior EventName="Click">
+          <behaviors:StartAnimationAction Animation="{Binding ElementName=ClipAnimation}" />
+        </Interactions:EventTriggerBehavior>
+      </Interactivity:Interaction.Behaviors>
+    </Button>
+  </Grid>
+</Page>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/XamlOnlyPage.xaml

@@ -2,7 +2,7 @@
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:ani="using:Microsoft.Toolkit.Uwp.UI.Animations"
-      xmlns:anibehaviors="using:Microsoft.Toolkit.Uwp.UI.Behaviors.Animations"
+      xmlns:behaviors="using:Microsoft.Toolkit.Uwp.UI.Behaviors"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:interactions="using:Microsoft.Xaml.Interactions.Core"
       xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
@@ -24,7 +24,7 @@
         <triggers:RegexStateTrigger x:Key="RegexStateTrigger" />
         <triggers:UserHandPreferenceStateTrigger x:Key="UserHandPreferenceStateTrigger" />
         <triggers:UserInteractionModeStateTrigger x:Key="UserInteractionModeStateTrigger" />
-        <anibehaviors:StartAnimationAction x:Key="StartAnimationAction" />
+        <behaviors:StartAnimationAction x:Key="StartAnimationAction" />
     </Page.Resources>
 
     <Grid>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json

@@ -586,6 +586,14 @@
         "BadgeUpdateVersionRequired": "Anniversary Update required",
         "DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/animations/ReorderGrid.md"
       },
+      {
+        "Name": "EffectAnimations",
+        "Subcategory": "Effect",
+        "About": "Effects from the Media package that can be animated from an AnimationSet schedule.",
+        "CodeUrl": "https://github.com/windows-toolkit/WindowsCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.UI.Media/Animations",
+        "XamlCodeFile": "/SamplePages/Animations/Effects/EffectAnimations.bind",
+        "DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/animations/Fade.md"
+      },
       {
         "Name": "Implicit Animations",
         "Type": "ImplicitAnimationsPage",