Add on/animations addon

9.0/Animations/Animations/Animations.csproj

@@ -49,7 +49,7 @@
 
 		<!-- Images -->
 		<MauiImage Include="Resources\Images\*" />
-		<MauiImage Update="Resources\Images\dotnet_bot.png" Resize="True" BaseSize="300,185" />
+		<MauiImage Update="Resources\Images\dotnet_bot.png" Resize="True" BaseSize="500,500" />
 
 		<!-- Custom Fonts -->
 		<MauiFont Include="Resources\Fonts\*" />

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">
-
-    <ScrollView>
-        <VerticalStackLayout 
-            Spacing="25" 
-            Padding="30,0" 
-            VerticalOptions="Center">
+    <Grid RowDefinitions="Auto, Auto, Auto" 
+          Padding="20"
+          RowSpacing="20">
 
-            <Image
-                x:Name="BotImg"
-                Source="dotnet_bot.png"
-                SemanticProperties.Description="Cute dot net bot waving hi to you!"
-                HeightRequest="200"
-                HorizontalOptions="Center" />
-
-            <Button 
-                Text="Change The Mood"
-                SemanticProperties.Hint="Fades out the dot net bot"
-                Clicked="OnClickedAsync"
-                HorizontalOptions="Center" />
+        <Border Grid.Row="0"
+                Stroke="Transparent"
+                StrokeThickness="0"
+                Margin="0,10,0,10">
+            <Grid VerticalOptions="Center">
+                <Image x:Name="BotImg"
+                       Source="dotnet_bot.png"
+                       SemanticProperties.Description="Cute dot net bot waving hi to you!"
+                       HeightRequest="400"
+                       HorizontalOptions="Center"
+                       VerticalOptions="Center" />
+            </Grid>
+        </Border>
 
-        </VerticalStackLayout>
-    </ScrollView>
-
+        <Grid Grid.Row="1" 
+              ColumnDefinitions="*,*"
+              ColumnSpacing="15"
+              RowDefinitions="Auto,Auto"
+              RowSpacing="15">
+
+            <Button Grid.Column="0" Grid.Row="0"
+                    Text="Change The Mood"
+                    SemanticProperties.Hint="Changes the background color randomly"
+                    Clicked="OnClickedAsync"
+                    HorizontalOptions="Fill" />
+
+            <Button Grid.Column="1" Grid.Row="0"
+                    Text="Dance Party"
+                    SemanticProperties.Hint="Makes the bot dance with style"
+                    Clicked="OnDancePartyClickedAsync"
+                    HorizontalOptions="Fill"/>
+
+            <Button Grid.Column="0" Grid.Row="1"
+                    Text="Color Wave"
+                    SemanticProperties.Hint="Ripple effect with color change"
+                    Clicked="OnColorWaveClickedAsync"
+                    HorizontalOptions="Fill"/>
+
+            <Button Grid.Column="1" Grid.Row="1"
+                    Text="3D Spin"
+                    SemanticProperties.Hint="Creates a 3D spinning effect"
+                    Clicked="OnSpinClickedAsync"
+                HorizontalOptions="Fill"/>
+        </Grid>
+
+        <Border Grid.Row="2"
+                StrokeThickness="1"
+                BackgroundColor="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource Black}}"
+                StrokeShape="RoundRectangle 8"
+                Stroke="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}"
+                Padding="15,10"
+                MinimumHeightRequest="50">
+            <Label x:Name="TooltipLabel"
+                   Text="Click any button to see what it does!"
+                   TextColor="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}"
+                   FontFamily="OpenSansRegular"
+                   HorizontalOptions="Center"
+                   VerticalOptions="Center"/>
+        </Border>
+    </Grid>
 </ContentPage>

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();

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">
-
-    <ScrollView>
-        <VerticalStackLayout 
-            Spacing="25" 
-            Padding="30,0" 
-            VerticalOptions="Center">
-
-            <Image
-                x:Name="BotImg"
-                Source="dotnet_bot.png"
-                SemanticProperties.Description="Cute dot net bot waving hi to you!"
-                HeightRequest="200"
-                HorizontalOptions="Center" />
-
-            <Button 
-                Text="Say Goodbye"
-                SemanticProperties.Hint="Fades out the dot net bot"
-                Clicked="OnClickedAsync"
-                HorizontalOptions="Center" />
-
-        </VerticalStackLayout>
-    </ScrollView>
-
+    <Grid RowDefinitions="Auto, Auto, Auto" 
+          Padding="20"
+          RowSpacing="20">
+
+        <Border Grid.Row="0"
+                Stroke="Transparent"
+                StrokeThickness="0"
+                Margin="0,10,0,10">
+            <Grid VerticalOptions="Center">
+                <Image x:Name="BotImg"
+                       Source="dotnet_bot.png"
+                       SemanticProperties.Description="Cute dot net bot waving hi to you!"
+                       HeightRequest="400"
+                       HorizontalOptions="Center"
+                       VerticalOptions="Center" />
+            </Grid>
+        </Border>
+
+        <Grid Grid.Row="1" 
+      ColumnDefinitions="*,*"
+      ColumnSpacing="15"
+      RowDefinitions="Auto,Auto"
+      RowSpacing="15">
+
+            <Button Grid.Column="0" Grid.Row="0"
+            Text="Say Goodbye"
+            SemanticProperties.Hint="Fades out the dot net bot"
+            Clicked="OnClickedAsync"
+            HorizontalOptions="Fill"/>
+
+            <Button Grid.Column="1" Grid.Row="0"
+            Text="Ghost Mode"
+            SemanticProperties.Hint="Makes the bot fade in and out like a ghost"
+            Clicked="OnGhostClickedAsync"
+            HorizontalOptions="Fill"/>
+
+            <Button Grid.Column="0" Grid.Row="1"
+            Text="Pulse"
+            SemanticProperties.Hint="Creates a pulsing effect with fade"
+            Clicked="OnPulseClickedAsync"
+            HorizontalOptions="Fill"/>
+
+            <Button Grid.Column="1" Grid.Row="1"
+            Text="Digital Glitch"
+            SemanticProperties.Hint="Creates a digital glitch fade effect"
+            Clicked="OnDigitalGlitchClickedAsync"
+            HorizontalOptions="Fill"/>
+
+        </Grid>
+
+        <Border Grid.Row="2"
+                StrokeThickness="1"
+                BackgroundColor="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource Black}}"
+                StrokeShape="RoundRectangle 8"
+                Stroke="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}"
+                Padding="15,10"
+                MinimumHeightRequest="50">
+            <Label x:Name="TooltipLabel"
+                   Text="Click any button to see what it does!"
+                   TextColor="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}"
+                   FontFamily="OpenSansRegular"
+                   HorizontalOptions="Center"
+                   VerticalOptions="Center"/>
+        </Border>
+    </Grid>
+
 </ContentPage>

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!";
+    }
 }