Skip to content

Commit 72dd831

Browse files
committed
Added AnimationBuilder C# sample code
1 parent 0feca9c commit 72dd831

File tree

4 files changed

+59
-0
lines changed

4 files changed

+59
-0
lines changed

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -617,6 +617,8 @@
617617
<Content Include="SamplePages\Animations\Behaviors\RotateBehaviorXaml.bind" />
618618
<Content Include="SamplePages\Animations\Effects\EffectAnimations.bind" />
619619
<Content Include="SamplePages\VisualEffectFactory\VisualEffectFactory.bind" />
620+
<Content Include="SamplePages\Animations\Activities\InvokeActionsActivityCode.bind" />
621+
<Content Include="SamplePages\Animations\Activities\StartAnimationActivityCode.bind" />
620622
</ItemGroup>
621623
<ItemGroup>
622624
<Compile Include="App.xaml.cs">
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
using Microsoft.Toolkit.Uwp.UI.Animations;
2+
3+
// Fade out the TextBlock
4+
await AnimationBuilder
5+
.Create()
6+
.Opacity(from: 1, to: 0, duration: TimeSpan.FromSeconds(1), easingType: EasingType.Linear)
7+
.StartAsync(MyText);
8+
9+
// Change the text and the sound here...
10+
11+
// Fade the TextBlock back in
12+
await AnimationBuilder
13+
.Create()
14+
.Opacity(to: 1, duration: TimeSpan.FromSeconds(1), easingType: EasingType.Linear)
15+
.StartAsync(MyText);
Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
using Microsoft.Toolkit.Uwp.UI.Animations;
2+
3+
// Move the button down and then back up
4+
AnimationBuilder
5+
.Create()
6+
.Translation(Axis.Y).TimedKeyFrames(b => b
7+
.KeyFrame(TimeSpan.Zero, 0)
8+
.KeyFrame(TimeSpan.FromSeconds(3), 32, EasingType.Linear)
9+
.KeyFrame(TimeSpan.FromSeconds(9), 32, EasingType.Linear)
10+
.KeyFrame(TimeSpan.FromSeconds(12), 0, EasingType.Linear))
11+
.Start(MyButton);
12+
13+
// Fade the image out and then back in
14+
AnimationBuilder
15+
.Create()
16+
.Opacity().TimedKeyFrames(
17+
delay: TimeSpan.FromSeconds(3),
18+
build: b => b
19+
.KeyFrame(TimeSpan.Zero, 1)
20+
.KeyFrame(TimeSpan.FromSeconds(3), 0, EasingType.Linear)
21+
.KeyFrame(TimeSpan.FromSeconds(6), 1, EasingType.Linear))
22+
.Start(MyImage);
23+
24+
// Alternatively, a simpler but less efficient solution involves separate animations
25+
await AnimationBuilder
26+
.Create()
27+
.Translation(Axis.Y, to: 32, duration: TimeSpan.FromSeconds(3), easingType: EasingType.Linear)
28+
.StartAsync(MyButton);
29+
await AnimationBuilder
30+
.Create()
31+
.Opacity(to: 0, duration: TimeSpan.FromSeconds(3), easingType: EasingType.Linear)
32+
.StartAsync(MyImage);
33+
await AnimationBuilder
34+
.Create()
35+
.Opacity(to: 1, duration: TimeSpan.FromSeconds(3), easingType: EasingType.Linear)
36+
.StartAsync(MyImage);
37+
await AnimationBuilder
38+
.Create()
39+
.Translation(Axis.Y, to: 0, duration: TimeSpan.FromSeconds(3), easingType: EasingType.Linear)
40+
.StartAsync(MyButton);

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -485,13 +485,15 @@
485485
"About": "Activity for Animations to Start another Animation",
486486
"CodeUrl": "https://github.com/windows-toolkit/WindowsCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.UI.Animations/Xaml/Activities",
487487
"XamlCodeFile": "/SamplePages/Animations/Activities/StartAnimationActivity.bind",
488+
"CodeFile": "/SamplePages/Animations/Activities/StartAnimationActivityCode.bind",
488489
"DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/animations/Fade.md"
489490
},
490491
{
491492
"Name": "InvokeActionsActivity",
492493
"Subcategory": "Activities",
493494
"About": "Activity chaining Actions from the Behaviors package into an Animation schedule.",
494495
"CodeUrl": "https://github.com/windows-toolkit/WindowsCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.UI.Behaviors/Animations",
496+
"CodeFile": "/SamplePages/Animations/Activities/InvokeActionsActivityCode.bind",
495497
"XamlCodeFile": "/SamplePages/Animations/Activities/InvokeActionsActivity.bind",
496498
"DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/animations/Fade.md"
497499
},

0 commit comments

Comments
 (0)