From 4258e4bbea1ee4074849cfa8917f301c7e613062 Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Thu, 12 Sep 2024 16:11:21 +0800
Subject: [PATCH] feat: add ScaleY animation.

---
 .../Controls/Notification.axaml               | 266 ++++++++++--------
 src/Ursa.Themes.Semi/Controls/Toast.axaml     |  68 +++--
 2 files changed, 199 insertions(+), 135 deletions(-)

diff --git a/src/Ursa.Themes.Semi/Controls/Notification.axaml b/src/Ursa.Themes.Semi/Controls/Notification.axaml
index 4830cce..11d6b80 100644
--- a/src/Ursa.Themes.Semi/Controls/Notification.axaml
+++ b/src/Ursa.Themes.Semi/Controls/Notification.axaml
@@ -3,7 +3,7 @@
                     xmlns:u="https://irihi.tech/ursa">
     <Design.PreviewWith>
         <ThemeVariantScope RequestedThemeVariant="Dark">
-            <ReversibleStackPanel Orientation="Vertical">
+            <ReversibleStackPanel Orientation="Vertical" ReverseOrder="True">
                 <u:NotificationCard ShowIcon="False" ShowClose="False" />
                 <u:NotificationCard ShowIcon="False" />
                 <u:NotificationCard NotificationType="Information">
@@ -136,125 +136,159 @@
             </ControlTemplate>
         </Setter>
 
-        <ControlTheme.Animations>
-            <Animation
-                Easing="QuadraticEaseIn"
-                FillMode="Forward"
-                Duration="0:0:0.3">
-                <KeyFrame Cue="0%">
-                    <Setter Property="Opacity" Value="0" />
-                </KeyFrame>
-                <KeyFrame Cue="100%">
-                    <Setter Property="Opacity" Value="1" />
-                </KeyFrame>
-            </Animation>
-        </ControlTheme.Animations>
+        <Style Selector="^">
+            <Style Selector="^ /template/ LayoutTransformControl#PART_LayoutTransformControl">
+                <Style.Animations>
+                    <Animation
+                        Easing="QuadraticEaseIn"
+                        FillMode="Forward"
+                        Duration="0:0:0.3">
+                        <KeyFrame Cue="0%">
+                            <Setter Property="Opacity" Value="0" />
+                        </KeyFrame>
+                        <KeyFrame Cue="100%">
+                            <Setter Property="Opacity" Value="1" />
+                        </KeyFrame>
+                    </Animation>
+                    <Animation
+                        Easing="QuadraticEaseIn"
+                        FillMode="Forward"
+                        Duration="0:0:0.15">
+                        <KeyFrame Cue="0%">
+                            <Setter Property="ScaleTransform.ScaleY" Value="0" />
+                        </KeyFrame>
+                        <KeyFrame Cue="70%">
+                            <Setter Property="ScaleTransform.ScaleY" Value="0" />
+                        </KeyFrame>
+                        <KeyFrame Cue="100%">
+                            <Setter Property="ScaleTransform.ScaleY" Value="1" />
+                        </KeyFrame>
+                    </Animation>
+                </Style.Animations>
+            </Style>
 
-        <Style Selector="^:topleft">
-            <Style.Animations>
-                <Animation
-                    Easing="QuadraticEaseIn"
-                    FillMode="Forward"
-                    Duration="0:0:0.3">
-                    <KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
-                        <Setter Property="TranslateTransform.X" Value="-500" />
-                    </KeyFrame>
-                    <KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
-                        <Setter Property="TranslateTransform.X" Value="0" />
-                    </KeyFrame>
-                </Animation>
-            </Style.Animations>
-        </Style>
-        <Style Selector="^:topright">
-            <Style.Animations>
-                <Animation
-                    Easing="QuadraticEaseIn"
-                    FillMode="Forward"
-                    Duration="0:0:0.3">
-                    <KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
-                        <Setter Property="TranslateTransform.X" Value="500" />
-                    </KeyFrame>
-                    <KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
-                        <Setter Property="TranslateTransform.X" Value="0" />
-                    </KeyFrame>
-                </Animation>
-            </Style.Animations>
-        </Style>
-        <Style Selector="^:bottomleft">
-            <Style.Animations>
-                <Animation
-                    Easing="QuadraticEaseIn"
-                    FillMode="Forward"
-                    Duration="0:0:0.3">
-                    <KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
-                        <Setter Property="TranslateTransform.X" Value="-500" />
-                    </KeyFrame>
-                    <KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
-                        <Setter Property="TranslateTransform.X" Value="0" />
-                    </KeyFrame>
-                </Animation>
-            </Style.Animations>
-        </Style>
-        <Style Selector="^:bottomright">
-            <Style.Animations>
-                <Animation
-                    Easing="QuadraticEaseIn"
-                    FillMode="Forward"
-                    Duration="0:0:0.3">
-                    <KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
-                        <Setter Property="TranslateTransform.X" Value="500" />
-                    </KeyFrame>
-                    <KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
-                        <Setter Property="TranslateTransform.X" Value="0" />
-                    </KeyFrame>
-                </Animation>
-            </Style.Animations>
-        </Style>
-        <Style Selector="^:topcenter">
-            <Style.Animations>
-                <Animation
-                    Easing="QuadraticEaseIn"
-                    FillMode="Forward"
-                    Duration="0:0:0.3">
-                    <KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
-                        <Setter Property="TranslateTransform.Y" Value="-100" />
-                    </KeyFrame>
-                    <KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
-                        <Setter Property="TranslateTransform.Y" Value="0" />
-                    </KeyFrame>
-                </Animation>
-            </Style.Animations>
-        </Style>
-        <Style Selector="^:bottomcenter">
-            <Style.Animations>
-                <Animation
-                    Easing="QuadraticEaseIn"
-                    FillMode="Forward"
-                    Duration="0:0:0.3">
-                    <KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
-                        <Setter Property="TranslateTransform.Y" Value="100" />
-                    </KeyFrame>
-                    <KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
-                        <Setter Property="TranslateTransform.Y" Value="0" />
-                    </KeyFrame>
-                </Animation>
-            </Style.Animations>
+            <Style Selector="^:topleft">
+                <Style.Animations>
+                    <Animation
+                        Easing="QuadraticEaseIn"
+                        FillMode="Forward"
+                        Duration="0:0:0.3">
+                        <KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
+                            <Setter Property="TranslateTransform.X" Value="-500" />
+                        </KeyFrame>
+                        <KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
+                            <Setter Property="TranslateTransform.X" Value="0" />
+                        </KeyFrame>
+                    </Animation>
+                </Style.Animations>
+            </Style>
+            <Style Selector="^:topright">
+                <Style.Animations>
+                    <Animation
+                        Easing="QuadraticEaseIn"
+                        FillMode="Forward"
+                        Duration="0:0:0.3">
+                        <KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
+                            <Setter Property="TranslateTransform.X" Value="500" />
+                        </KeyFrame>
+                        <KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
+                            <Setter Property="TranslateTransform.X" Value="0" />
+                        </KeyFrame>
+                    </Animation>
+                </Style.Animations>
+            </Style>
+            <Style Selector="^:bottomleft">
+                <Style.Animations>
+                    <Animation
+                        Easing="QuadraticEaseIn"
+                        FillMode="Forward"
+                        Duration="0:0:0.3">
+                        <KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
+                            <Setter Property="TranslateTransform.X" Value="-500" />
+                        </KeyFrame>
+                        <KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
+                            <Setter Property="TranslateTransform.X" Value="0" />
+                        </KeyFrame>
+                    </Animation>
+                </Style.Animations>
+            </Style>
+            <Style Selector="^:bottomright">
+                <Style.Animations>
+                    <Animation
+                        Easing="QuadraticEaseIn"
+                        FillMode="Forward"
+                        Duration="0:0:0.3">
+                        <KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
+                            <Setter Property="TranslateTransform.X" Value="500" />
+                        </KeyFrame>
+                        <KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
+                            <Setter Property="TranslateTransform.X" Value="0" />
+                        </KeyFrame>
+                    </Animation>
+                </Style.Animations>
+            </Style>
+            <Style Selector="^:topcenter">
+                <Style.Animations>
+                    <Animation
+                        Easing="QuadraticEaseIn"
+                        FillMode="Forward"
+                        Duration="0:0:0.3">
+                        <KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
+                            <Setter Property="TranslateTransform.Y" Value="-100" />
+                        </KeyFrame>
+                        <KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
+                            <Setter Property="TranslateTransform.Y" Value="0" />
+                        </KeyFrame>
+                    </Animation>
+                </Style.Animations>
+            </Style>
+            <Style Selector="^:bottomcenter">
+                <Style.Animations>
+                    <Animation
+                        Easing="QuadraticEaseIn"
+                        FillMode="Forward"
+                        Duration="0:0:0.3">
+                        <KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
+                            <Setter Property="TranslateTransform.Y" Value="100" />
+                        </KeyFrame>
+                        <KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
+                            <Setter Property="TranslateTransform.Y" Value="0" />
+                        </KeyFrame>
+                    </Animation>
+                </Style.Animations>
+            </Style>
         </Style>
 
         <Style Selector="^[IsClosing=true]">
-            <Style.Animations>
-                <Animation
-                    Easing="QuadraticEaseOut"
-                    FillMode="Forward"
-                    Duration="0:0:0.3">
-                    <KeyFrame Cue="0%">
-                        <Setter Property="Opacity" Value="1" />
-                    </KeyFrame>
-                    <KeyFrame Cue="100%">
-                        <Setter Property="Opacity" Value="0" />
-                    </KeyFrame>
-                </Animation>
-            </Style.Animations>
+            <Style Selector="^ /template/ LayoutTransformControl#PART_LayoutTransformControl">
+                <Style.Animations>
+                    <Animation
+                        Easing="QuadraticEaseOut"
+                        FillMode="Forward"
+                        Duration="0:0:0.3">
+                        <KeyFrame Cue="0%">
+                            <Setter Property="Opacity" Value="1" />
+                        </KeyFrame>
+                        <KeyFrame Cue="100%">
+                            <Setter Property="Opacity" Value="0" />
+                        </KeyFrame>
+                    </Animation>
+                    <Animation
+                        Easing="QuadraticEaseOut"
+                        FillMode="Forward"
+                        Duration="0:0:0.15">
+                        <KeyFrame Cue="0%">
+                            <Setter Property="ScaleTransform.ScaleY" Value="1" />
+                        </KeyFrame>
+                        <KeyFrame Cue="70%">
+                            <Setter Property="ScaleTransform.ScaleY" Value="1" />
+                        </KeyFrame>
+                        <KeyFrame Cue="100%">
+                            <Setter Property="ScaleTransform.ScaleY" Value="0" />
+                        </KeyFrame>
+                    </Animation>
+                </Style.Animations>
+            </Style>
 
             <Style Selector="^:topleft">
                 <Style.Animations>
diff --git a/src/Ursa.Themes.Semi/Controls/Toast.axaml b/src/Ursa.Themes.Semi/Controls/Toast.axaml
index 6495116..316dc55 100644
--- a/src/Ursa.Themes.Semi/Controls/Toast.axaml
+++ b/src/Ursa.Themes.Semi/Controls/Toast.axaml
@@ -98,25 +98,41 @@
             </ControlTemplate>
         </Setter>
 
-        <ControlTheme.Animations>
-            <Animation
-                Easing="QuadraticEaseIn"
-                FillMode="Forward"
-                Duration="0:0:0.3">
-                <KeyFrame Cue="0%">
-                    <Setter Property="Opacity" Value="0" />
-                </KeyFrame>
-                <KeyFrame Cue="100%">
-                    <Setter Property="Opacity" Value="1" />
-                </KeyFrame>
-                <KeyFrame KeySpline="0.22,0.57,0.02,1.2" Cue="0%">
-                    <Setter Property="TranslateTransform.Y" Value="-100" />
-                </KeyFrame>
-                <KeyFrame KeySpline="0.22,0.57,0.02,1.2" Cue="100%">
-                    <Setter Property="TranslateTransform.Y" Value="0" />
-                </KeyFrame>
-            </Animation>
-        </ControlTheme.Animations>
+        <Style Selector="^ /template/ LayoutTransformControl#PART_LayoutTransformControl">
+            <Style.Animations>
+                <Animation
+                    Easing="QuadraticEaseIn"
+                    FillMode="Forward"
+                    Duration="0:0:0.3">
+                    <KeyFrame Cue="0%">
+                        <Setter Property="Opacity" Value="0" />
+                    </KeyFrame>
+                    <KeyFrame Cue="100%">
+                        <Setter Property="Opacity" Value="1" />
+                    </KeyFrame>
+                    <KeyFrame KeySpline="0.22,0.57,0.02,1.2" Cue="0%">
+                        <Setter Property="TranslateTransform.Y" Value="-100" />
+                    </KeyFrame>
+                    <KeyFrame KeySpline="0.22,0.57,0.02,1.2" Cue="100%">
+                        <Setter Property="TranslateTransform.Y" Value="0" />
+                    </KeyFrame>
+                </Animation>
+                <Animation
+                    Easing="QuadraticEaseIn"
+                    FillMode="Forward"
+                    Duration="0:0:0.15">
+                    <KeyFrame Cue="0%">
+                        <Setter Property="ScaleTransform.ScaleY" Value="0" />
+                    </KeyFrame>
+                    <KeyFrame Cue="70%">
+                        <Setter Property="ScaleTransform.ScaleY" Value="0" />
+                    </KeyFrame>
+                    <KeyFrame Cue="100%">
+                        <Setter Property="ScaleTransform.ScaleY" Value="1" />
+                    </KeyFrame>
+                </Animation>
+            </Style.Animations>
+        </Style>
 
         <Style Selector="^[IsClosing=true] /template/ LayoutTransformControl#PART_LayoutTransformControl">
             <Style.Animations>
@@ -137,6 +153,20 @@
                         <Setter Property="TranslateTransform.Y" Value="-100" />
                     </KeyFrame>
                 </Animation>
+                <Animation
+                    Easing="QuadraticEaseOut"
+                    FillMode="Forward"
+                    Duration="0:0:0.15">
+                    <KeyFrame Cue="0%">
+                        <Setter Property="ScaleTransform.ScaleY" Value="1" />
+                    </KeyFrame>
+                    <KeyFrame Cue="70%">
+                        <Setter Property="ScaleTransform.ScaleY" Value="1" />
+                    </KeyFrame>
+                    <KeyFrame Cue="100%">
+                        <Setter Property="ScaleTransform.ScaleY" Value="0" />
+                    </KeyFrame>
+                </Animation>
             </Style.Animations>
         </Style>