diff --git a/Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj b/Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj index a6c0d8c7e51..25628323a43 100644 --- a/Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj +++ b/Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj @@ -617,6 +617,8 @@ + + diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Animations/Activities/InvokeActionsActivityCode.bind b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Animations/Activities/InvokeActionsActivityCode.bind new file mode 100644 index 00000000000..9bc5b0d1167 --- /dev/null +++ b/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); \ No newline at end of file diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Animations/Activities/StartAnimationActivityCode.bind b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Animations/Activities/StartAnimationActivityCode.bind new file mode 100644 index 00000000000..020d540face --- /dev/null +++ b/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); \ No newline at end of file diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json index 826637d36e2..70cb74a12d9 100644 --- a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json +++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json @@ -485,6 +485,7 @@ "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" }, { @@ -492,6 +493,7 @@ "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" },