diff --git a/9.0/Animations/Animations/Animations.csproj b/9.0/Animations/Animations/Animations.csproj
index 71de3a495..3e73fc53a 100644
--- a/9.0/Animations/Animations/Animations.csproj
+++ b/9.0/Animations/Animations/Animations.csproj
@@ -49,7 +49,7 @@
-
+
diff --git a/9.0/Animations/Animations/Pages/CustomAnimationPage.xaml b/9.0/Animations/Animations/Pages/CustomAnimationPage.xaml
index 66db264ba..c0d1018e0 100644
--- a/9.0/Animations/Animations/Pages/CustomAnimationPage.xaml
+++ b/9.0/Animations/Animations/Pages/CustomAnimationPage.xaml
@@ -3,27 +3,68 @@
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Animations.CustomAnimationPage"
Title="Custom Extension">
-
-
-
+
-
-
-
+
+
+
+
+
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/9.0/Animations/Animations/Pages/CustomAnimationPage.xaml.cs b/9.0/Animations/Animations/Pages/CustomAnimationPage.xaml.cs
index a35fdf16f..bfa5143ad 100644
--- a/9.0/Animations/Animations/Pages/CustomAnimationPage.xaml.cs
+++ b/9.0/Animations/Animations/Pages/CustomAnimationPage.xaml.cs
@@ -9,16 +9,75 @@ public CustomAnimationPage()
InitializeComponent();
}
- private async void OnClickedAsync(object sender, EventArgs e)
- {
-
- Color bgColor = this.BackgroundColor;
+ private async void OnClickedAsync(object sender, EventArgs e)
+ {
+ TooltipLabel.Text = "Changing the page background color randomly";
+ Color bgColor = this.BackgroundColor;
+ await Task.WhenAll(
+ this.ColorTo(bgColor, GetRandomColour(), c => this.BackgroundColor = c)
+ );
+
+ await Task.Delay(1000);
+ TooltipLabel.Text = "Click any button to see what it does!";
+ }
+
+ private async void OnColorWaveClickedAsync(object sender, EventArgs e)
+ {
+ TooltipLabel.Text = "Watch the colorful wave effect!";
+
+ var animation = new Animation();
+ animation.Add(0, 1, new Animation(v => BotImg.Scale = 1 + Math.Sin(v * Math.PI) * 0.2, 0, 1));
+
+ animation.Commit(this, "ColorWave", 16, 2000, Easing.SinInOut,
+ (v, c) => BotImg.Scale = 1);
+
+ await this.ColorTo(Colors.Purple, Colors.Orange, c => BackgroundColor = c, 2000, Easing.SinInOut);
+
+ await Task.Delay(500);
+ TooltipLabel.Text = "Click any button to see what it does!";
+ }
+
+ private async void OnDancePartyClickedAsync(object sender, EventArgs e)
+ {
+ TooltipLabel.Text = "It's dance time!";
+
+ for (int i = 0; i < 3; i++)
+ {
+ await Task.WhenAll(
+ BotImg.RotateTo(360, 500, Easing.CubicInOut),
+ BotImg.TranslateTo(50, 0, 250, Easing.CubicOut),
+ BotImg.ScaleTo(1.2, 250, Easing.SpringOut)
+ );
+
+ await Task.WhenAll(
+ BotImg.TranslateTo(-50, 0, 500, Easing.CubicOut),
+ BotImg.ScaleTo(0.8, 250, Easing.SpringOut)
+ );
+
+ await Task.WhenAll(
+ BotImg.TranslateTo(0, 0, 250, Easing.CubicOut),
+ BotImg.ScaleTo(1, 250, Easing.SpringOut)
+ );
+ }
+
+ BotImg.Rotation = 0;
+ await Task.Delay(500);
+ TooltipLabel.Text = "Click any button to see what it does!";
+ }
+
+ private async void OnSpinClickedAsync(object sender, EventArgs e)
+ {
+ TooltipLabel.Text = "Entering the third dimension!";
+
await Task.WhenAll(
- this.ColorTo(bgColor, GetRandomColour(), c => this.BackgroundColor = c)
- );
+ BotImg.RotateYTo(1800, 2000, Easing.CubicInOut),
+ BotImg.ScaleTo(0.5, 1000, Easing.CubicIn),
+ BotImg.ScaleTo(1, 1000, Easing.CubicOut)
+ );
-
-
+ BotImg.RotationY = 0;
+ await Task.Delay(500);
+ TooltipLabel.Text = "Click any button to see what it does!";
}
private static readonly Random rand = new Random();
diff --git a/9.0/Animations/Animations/Pages/FadePage.xaml b/9.0/Animations/Animations/Pages/FadePage.xaml
index cb4c39815..73e234194 100644
--- a/9.0/Animations/Animations/Pages/FadePage.xaml
+++ b/9.0/Animations/Animations/Pages/FadePage.xaml
@@ -3,27 +3,70 @@
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Animations.FadePage"
Title="Fade">
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/9.0/Animations/Animations/Pages/FadePage.xaml.cs b/9.0/Animations/Animations/Pages/FadePage.xaml.cs
index 8823f21fc..db67b6bbc 100644
--- a/9.0/Animations/Animations/Pages/FadePage.xaml.cs
+++ b/9.0/Animations/Animations/Pages/FadePage.xaml.cs
@@ -1,4 +1,6 @@
-namespace Animations;
+using Animations.Extensions;
+
+namespace Animations;
public partial class FadePage : ContentPage
{
@@ -7,11 +9,69 @@ public FadePage()
InitializeComponent();
}
- private async void OnClickedAsync(object sender, EventArgs e)
- {
- await BotImg.FadeTo(0);
+ private async void OnClickedAsync(object sender, EventArgs e)
+ {
+ TooltipLabel.Text = "Watch the bot fade away and return";
+ await BotImg.FadeTo(0);
await Task.Delay(1000);
await BotImg.FadeTo(1);
- }
+
+ await Task.Delay(1000);
+ TooltipLabel.Text = "Click any button to see what it does!";
+ }
+
+ private async void OnGhostClickedAsync(object sender, EventArgs e)
+ {
+ TooltipLabel.Text = "Wooooo! Ghost bot coming through!";
+
+ for (int i = 0; i < 3; i++)
+ {
+ await BotImg.FadeTo(0.2, 500, Easing.SinInOut);
+ await BotImg.FadeTo(0.8, 500, Easing.SinInOut);
+ }
+ await BotImg.FadeTo(1, 500, Easing.SinInOut);
+
+ await Task.Delay(1000);
+ TooltipLabel.Text = "Click any button to see what it does!";
+ }
+ private async void OnPulseClickedAsync(object sender, EventArgs e)
+ {
+ TooltipLabel.Text = "Feel the pulse of the bot!";
+
+ for (int i = 0; i < 3; i++)
+ {
+ await Task.WhenAll(
+ BotImg.FadeTo(0.5, 300, Easing.CubicInOut),
+ BotImg.ScaleTo(1.2, 300, Easing.CubicInOut)
+ );
+ await Task.WhenAll(
+ BotImg.FadeTo(1, 300, Easing.CubicInOut),
+ BotImg.ScaleTo(1, 300, Easing.CubicInOut)
+ );
+ }
+
+ await Task.Delay(1000);
+ TooltipLabel.Text = "Click any button to see what it does!";
+ }
+
+ private async void OnDigitalGlitchClickedAsync(object sender, EventArgs e)
+ {
+ TooltipLabel.Text = "Experiencing digital interference...";
+
+ for (int i = 0; i < 5; i++)
+ {
+ await BotImg.FadeTo(0.2, 50, Easing.Linear);
+ await BotImg.FadeTo(1, 100, Easing.Linear);
+ await BotImg.FadeTo(0.5, 50, Easing.Linear);
+ await BotImg.FadeTo(0.8, 75, Easing.Linear);
+ }
+
+ await BotImg.FadeTo(0, 500, Easing.CubicIn);
+ await Task.Delay(300);
+ await BotImg.FadeTo(1, 1000, Easing.CubicOut);
+
+ await Task.Delay(500);
+ TooltipLabel.Text = "Click any button to see what it does!";
+ }
}
diff --git a/9.0/Animations/Animations/Pages/RotatePage.xaml b/9.0/Animations/Animations/Pages/RotatePage.xaml
index f92562f2e..a45bc1f30 100644
--- a/9.0/Animations/Animations/Pages/RotatePage.xaml
+++ b/9.0/Animations/Animations/Pages/RotatePage.xaml
@@ -3,27 +3,65 @@
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Animations.RotatePage"
Title="Rotate">
-
-
-
+
-
-
-
+
+
+
+
+
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/9.0/Animations/Animations/Pages/RotatePage.xaml.cs b/9.0/Animations/Animations/Pages/RotatePage.xaml.cs
index 5d6bc2200..7cfcfc459 100644
--- a/9.0/Animations/Animations/Pages/RotatePage.xaml.cs
+++ b/9.0/Animations/Animations/Pages/RotatePage.xaml.cs
@@ -7,14 +7,65 @@ public RotatePage()
InitializeComponent();
}
- private async void OnClickedAsync(object sender, EventArgs e)
- {
- await Task.WhenAny(
+ private async void OnClickedAsync(object sender, EventArgs e)
+ {
+ TooltipLabel.Text = "Flips the dot net bot with a jump effect";
+ await Task.WhenAny(
BotImg.RotateTo(360, 500, Easing.CubicInOut),
- BotImg.TranslateTo(0,-50, 250, Easing.CubicInOut)
+ BotImg.TranslateTo(0, -50, 250, Easing.CubicInOut)
);
await BotImg.TranslateTo(0, 0, 250, Easing.CubicInOut);
BotImg.Rotation = 0;
- }
+
+ await Task.Delay(1000);
+ TooltipLabel.Text = "Click any button to see what it does!";
+ }
+
+ private async void OnRotateXClickedAsync(object sender, EventArgs e)
+ {
+ TooltipLabel.Text = "Rotates the bot on its X axis (vertical flip)";
+ await BotImg.RotateXTo(360, 1000, Easing.CubicInOut);
+ BotImg.RotationX = 0;
+
+ await Task.Delay(1000);
+ TooltipLabel.Text = "Click any button to see what it does!";
+ }
+
+ private async void OnRotateYClickedAsync(object sender, EventArgs e)
+ {
+ TooltipLabel.Text = "Rotates the bot on its Y axis (horizontal flip)";
+ await BotImg.RotateYTo(360, 1000, Easing.CubicInOut);
+ BotImg.RotationY = 0;
+
+ await Task.Delay(1000);
+ TooltipLabel.Text = "Click any button to see what it does!";
+ }
+
+ private async void OnPropellerSpinClickedAsync(object sender, EventArgs e)
+ {
+ TooltipLabel.Text = "Watch the bot spin like a propeller!";
+
+ await BotImg.RotateTo(360, 1000, Easing.CubicIn);
+
+ for (int i = 0; i < 3; i++)
+ {
+ await Task.WhenAll(
+ BotImg.RotateTo(BotImg.Rotation + 720, 500, Easing.Linear),
+ BotImg.RotateYTo(45, 250, Easing.CubicOut),
+ BotImg.RotateYTo(-45, 250, Easing.CubicIn)
+ );
+ }
+
+ await Task.WhenAll(
+ BotImg.RotateTo(BotImg.Rotation + 360, 1000, Easing.CubicOut),
+ BotImg.RotateYTo(0, 500, Easing.SpringOut)
+ );
+
+ BotImg.Rotation = 0;
+ BotImg.RotationY = 0;
+
+ await Task.Delay(1000);
+ TooltipLabel.Text = "Click any button to see what it does!";
+ }
}
diff --git a/9.0/Animations/Animations/Pages/ScalePage.xaml b/9.0/Animations/Animations/Pages/ScalePage.xaml
index 255a1274b..9c7c8e192 100644
--- a/9.0/Animations/Animations/Pages/ScalePage.xaml
+++ b/9.0/Animations/Animations/Pages/ScalePage.xaml
@@ -3,27 +3,66 @@
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Animations.ScalePage"
Title="Scale">
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/9.0/Animations/Animations/Pages/ScalePage.xaml.cs b/9.0/Animations/Animations/Pages/ScalePage.xaml.cs
index fd750d31f..dcff68486 100644
--- a/9.0/Animations/Animations/Pages/ScalePage.xaml.cs
+++ b/9.0/Animations/Animations/Pages/ScalePage.xaml.cs
@@ -7,11 +7,48 @@ public ScalePage()
InitializeComponent();
}
- private async void OnClickedAsync(object sender, EventArgs e)
- {
- await BotImg.ScaleTo(0, easing:Easing.SpringIn);
+ private async void OnClickedAsync(object sender, EventArgs e)
+ {
+ TooltipLabel.Text = "Shrinks the dot net bot so it seems to disappear";
+ await BotImg.ScaleTo(0, easing: Easing.SpringIn);
await Task.Delay(1000);
await BotImg.ScaleTo(1, easing: Easing.SpringOut);
- }
+ }
+
+ private async void OnSquashStretchClickedAsync(object sender, EventArgs e)
+ {
+ TooltipLabel.Text = "Makes the bot squash and stretch like rubber";
+ await Task.WhenAll(
+ BotImg.ScaleYTo(2, 500, Easing.SpringOut),
+ BotImg.ScaleXTo(0.5, 500, Easing.SpringOut)
+ );
+
+ await Task.WhenAll(
+ BotImg.ScaleYTo(1, 500, Easing.SpringIn),
+ BotImg.ScaleXTo(1, 500, Easing.SpringIn)
+ );
+ }
+
+ private async void OnRelativeScaleClickedAsync(object sender, EventArgs e)
+ {
+ TooltipLabel.Text = "Scales the bot relative to current size";
+ await BotImg.RelScaleTo(0.5, 500, Easing.SpringIn);
+ await Task.Delay(500);
+ await BotImg.RelScaleTo(-0.5, 500, Easing.SpringOut);
+ }
+
+ private async void OnAnchoredScaleClickedAsync(object sender, EventArgs e)
+ {
+ TooltipLabel.Text = "Scales the bot from bottom center";
+ BotImg.AnchorX = 0.5;
+ BotImg.AnchorY = 1.0;
+
+ await BotImg.ScaleTo(2, 500, Easing.CubicInOut);
+ await Task.Delay(500);
+ await BotImg.ScaleTo(1, 500, Easing.CubicInOut);
+
+ BotImg.AnchorX = 0.5;
+ BotImg.AnchorY = 0.5;
+ }
}
diff --git a/9.0/Animations/Animations/Pages/TranslatePage.xaml b/9.0/Animations/Animations/Pages/TranslatePage.xaml
index ef58432c2..6b2a85788 100644
--- a/9.0/Animations/Animations/Pages/TranslatePage.xaml
+++ b/9.0/Animations/Animations/Pages/TranslatePage.xaml
@@ -3,27 +3,68 @@
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Animations.TranslatePage"
Title="Translate">
-
-
-
+
-
-
-
+
+
+
+
+
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/9.0/Animations/Animations/Pages/TranslatePage.xaml.cs b/9.0/Animations/Animations/Pages/TranslatePage.xaml.cs
index 0cd4c0387..b718c0a2e 100644
--- a/9.0/Animations/Animations/Pages/TranslatePage.xaml.cs
+++ b/9.0/Animations/Animations/Pages/TranslatePage.xaml.cs
@@ -9,15 +9,16 @@ public TranslatePage()
private async void OnClickedAsync(object sender, EventArgs e)
{
- // distance to right edge
- var rightDist = (DeviceDisplay.MainDisplayInfo.Width - BotImg.X)/DeviceDisplay.MainDisplayInfo.Density;
-
- await Task.WhenAll(
- BotImg.TranslateTo(rightDist,0, 1000, easing: Easing.CubicInOut),
- BotImg.ScaleTo(0.4, 1000, easing: Easing.CubicInOut)
- );
+ TooltipLabel.Text = "Watch the bot run to the edge and back!";
+ // distance to right edge
+ var rightDist = (DeviceDisplay.MainDisplayInfo.Width - BotImg.X)/DeviceDisplay.MainDisplayInfo.Density;
+
+ await Task.WhenAll(
+ BotImg.TranslateTo(rightDist, 0, 1000, easing: Easing.CubicInOut),
+ BotImg.ScaleTo(0.4, 1000, easing: Easing.CubicInOut)
+ );
- BotImg.TranslationX = rightDist*-1;
+ BotImg.TranslationX = rightDist * -1;
await Task.WhenAll(
BotImg.TranslateTo(0, 0, 1000, easing: Easing.CubicInOut),
@@ -25,8 +26,74 @@ await Task.WhenAll(
);
BotImg.TranslationX = 0;
- BotImg.Scale = 1;
-
- }
+ BotImg.Scale = 1;
+
+ await Task.Delay(1000);
+ TooltipLabel.Text = "Click any button to see what it does!";
+ }
+
+ private async void OnBounceClickedAsync(object sender, EventArgs e)
+ {
+ TooltipLabel.Text = "Watch the bot bounce up and down!";
+
+ // Bounce animation sequence
+ for (int i = 0; i < 3; i++)
+ {
+ await BotImg.TranslateTo(0, -50, 250, Easing.SpringOut);
+ await BotImg.TranslateTo(0, 0, 250, Easing.SpringIn);
+ }
+
+ BotImg.TranslationY = 0;
+
+ await Task.Delay(1000);
+ TooltipLabel.Text = "Click any button to see what it does!";
+ }
+
+ private async void OnDiagonalClickedAsync(object sender, EventArgs e)
+ {
+ TooltipLabel.Text = "Watch the bot dance diagonally!";
+
+ // Calculate diagonal distance based on screen size
+ var diagDist = (DeviceDisplay.MainDisplayInfo.Width / DeviceDisplay.MainDisplayInfo.Density) * 0.3;
+
+ // Diagonal movement pattern
+ await BotImg.TranslateTo(diagDist, -diagDist, 500, Easing.CubicInOut);
+ await BotImg.TranslateTo(-diagDist, -diagDist, 500, Easing.CubicInOut);
+ await BotImg.TranslateTo(-diagDist, diagDist, 500, Easing.CubicInOut);
+ await BotImg.TranslateTo(0, 0, 500, Easing.CubicInOut);
+
+ BotImg.TranslationX = 0;
+ BotImg.TranslationY = 0;
+
+ await Task.Delay(1000);
+ TooltipLabel.Text = "Click any button to see what it does!";
+ }
+
+ private async void OnInfinityPathClickedAsync(object sender, EventArgs e)
+ {
+ TooltipLabel.Text = "Watch the bot trace an infinity pattern...";
+
+ var width = (DeviceDisplay.MainDisplayInfo.Width / DeviceDisplay.MainDisplayInfo.Density) * 0.25;
+ var height = width / 2;
+
+ for (int i = 0; i < 2; i++)
+ {
+ await BotImg.TranslateTo(width / 2, -height, 500, Easing.CubicInOut);
+ await BotImg.TranslateTo(width, 0, 500, Easing.CubicInOut);
+ await BotImg.TranslateTo(width / 2, height, 500, Easing.CubicInOut);
+ await BotImg.TranslateTo(0, 0, 500, Easing.CubicInOut);
+
+ await BotImg.TranslateTo(-width / 2, -height, 500, Easing.CubicInOut);
+ await BotImg.TranslateTo(-width, 0, 500, Easing.CubicInOut);
+ await BotImg.TranslateTo(-width / 2, height, 500, Easing.CubicInOut);
+ await BotImg.TranslateTo(0, 0, 500, Easing.CubicInOut);
+ }
+
+ BotImg.TranslationX = 0;
+ BotImg.TranslationY = 0;
+
+ await Task.Delay(1000);
+ TooltipLabel.Text = "Click any button to see what it does!";
+ }
}
diff --git a/9.0/Animations/Animations/Resources/Images/dotnet_bot.png b/9.0/Animations/Animations/Resources/Images/dotnet_bot.png
index 1d1b981ee..d43fdd941 100644
Binary files a/9.0/Animations/Animations/Resources/Images/dotnet_bot.png and b/9.0/Animations/Animations/Resources/Images/dotnet_bot.png differ
diff --git a/9.0/Animations/README.md b/9.0/Animations/README.md
index fe22f290b..d20bc1ed8 100644
--- a/9.0/Animations/README.md
+++ b/9.0/Animations/README.md
@@ -12,8 +12,40 @@ urlFragment: animations
# Animations
+ 
+
+
+
This sample demonstrates how to use animations on any view in .NET MAUI.
+### Basic Animations
+The sample demonstrates fundamental MAUI animations through dedicated pages:
+- **Scale**: Shows scaling animations with spring effects (`ScalePage.xaml`)
+- **Rotate**: Demonstrates rotation on different axes (`RotatePage.xaml`)
+- **Fade**: Exhibits opacity transitions (`FadePage.xaml`)
+- **Translate**: Showcases position movement (`TranslatePage.xaml`)
+
+Each page implements basic animation methods like `ScaleTo()`, `RotateTo()`, `FadeTo()`, and `TranslateTo()` with consistent UI patterns and helpful tooltips.
+
+### Easing Functions
+The sample includes an interactive easing demonstration:
+- **EasingsPage**: Shows different easing types
+- **EasingEditorPage**: Provides visual representation of easing curves
+- Implements various easing functions like `CubicIn`, `BounceOut`, and `SpringIn`
+
+Each easing type can be visualized and tested through an interactive interface that shows how animations accelerate and decelerate.
+
+
+### Custom Animations
+Advanced animation system using the `Animation` class to create complex, synchronized animations with multiple properties and custom behaviors through the `Commit` method.
+Demonstrates advanced animation techniques:
+- **CustomAnimationPage**: Shows complex animation combinations
+- Uses `Animation` class for custom effects
+- Combines multiple animation types with various easing functions
+- Implements color transitions and custom timing
+
+The custom animations showcase how to build more complex, engaging user interactions by combining basic animations.
+
For more information about the sample see:
- [Basic Animations](https://docs.microsoft.com/dotnet/maui/user-interface/animation/basic)