Merge pull request #3809 from Sergio0694/sample/explicit-animations

Added AnimationBuilder C# sample code

Author: michael-hawker

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

@@ -617,6 +617,8 @@
     <Content Include="SamplePages\Animations\Behaviors\RotateBehaviorXaml.bind" />
     <Content Include="SamplePages\Animations\Effects\EffectAnimations.bind" />
     <Content Include="SamplePages\VisualEffectFactory\VisualEffectFactory.bind" />
+    <Content Include="SamplePages\Animations\Activities\InvokeActionsActivityCode.bind" />
+    <Content Include="SamplePages\Animations\Activities\StartAnimationActivityCode.bind" />
   </ItemGroup>
   <ItemGroup>
     <Compile Include="App.xaml.cs">

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Animations/Activities/InvokeActionsActivityCode.bind

@@ -0,0 +1,15 @@
+using Microsoft.Toolkit.Uwp.UI.Animations;
+
+// Fade out the TextBlock
+await AnimationBuilder
+    .Create()
+    .Opacity(from: 1, to: 0, duration: TimeSpan.FromSeconds(1), easingType: EasingType.Linear)
+    .StartAsync(MyText);
+
+// Change the text and the sound here...
+
+// Fade the TextBlock back in
+await AnimationBuilder
+    .Create()
+    .Opacity(to: 1, duration: TimeSpan.FromSeconds(1), easingType: EasingType.Linear)
+    .StartAsync(MyText);

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Animations/Activities/StartAnimationActivityCode.bind

@@ -0,0 +1,40 @@
+using Microsoft.Toolkit.Uwp.UI.Animations;
+
+// Move the button down and then back up
+AnimationBuilder
+    .Create()
+    .Translation(Axis.Y).TimedKeyFrames(b => b
+        .KeyFrame(TimeSpan.Zero, 0)
+        .KeyFrame(TimeSpan.FromSeconds(3), 32, EasingType.Linear)
+        .KeyFrame(TimeSpan.FromSeconds(9), 32, EasingType.Linear)
+        .KeyFrame(TimeSpan.FromSeconds(12), 0, EasingType.Linear))
+    .Start(MyButton);
+
+// Fade the image out and then back in
+AnimationBuilder
+    .Create()
+    .Opacity().TimedKeyFrames(
+        delay: TimeSpan.FromSeconds(3),
+        build: b => b
+        .KeyFrame(TimeSpan.Zero, 1)
+        .KeyFrame(TimeSpan.FromSeconds(3), 0, EasingType.Linear)
+        .KeyFrame(TimeSpan.FromSeconds(6), 1, EasingType.Linear))
+    .Start(MyImage);
+    
+// Alternatively, a simpler but less efficient solution involves separate animations
+await AnimationBuilder
+    .Create()
+    .Translation(Axis.Y, to: 32, duration: TimeSpan.FromSeconds(3), easingType: EasingType.Linear)
+    .StartAsync(MyButton);
+await AnimationBuilder
+    .Create()
+    .Opacity(to: 0, duration: TimeSpan.FromSeconds(3), easingType: EasingType.Linear)
+    .StartAsync(MyImage);
+await AnimationBuilder
+    .Create()
+    .Opacity(to: 1, duration: TimeSpan.FromSeconds(3), easingType: EasingType.Linear)
+    .StartAsync(MyImage);
+await AnimationBuilder
+    .Create()
+    .Translation(Axis.Y, to: 0, duration: TimeSpan.FromSeconds(3), easingType: EasingType.Linear)
+    .StartAsync(MyButton);

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

@@ -485,13 +485,15 @@
         "About": "Activity for Animations to Start another Animation",
         "CodeUrl": "https://github.com/windows-toolkit/WindowsCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.UI.Animations/Xaml/Activities",
         "XamlCodeFile": "/SamplePages/Animations/Activities/StartAnimationActivity.bind",
+        "CodeFile": "/SamplePages/Animations/Activities/StartAnimationActivityCode.bind",
         "DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/animations/Fade.md"
       },
       {
         "Name": "InvokeActionsActivity",
         "Subcategory": "Activities",
         "About": "Activity chaining Actions from the Behaviors package into an Animation schedule.",
         "CodeUrl": "https://github.com/windows-toolkit/WindowsCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.UI.Behaviors/Animations",
+        "CodeFile": "/SamplePages/Animations/Activities/InvokeActionsActivityCode.bind",
         "XamlCodeFile": "/SamplePages/Animations/Activities/InvokeActionsActivity.bind",
         "DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/animations/Fade.md"
       },