feat: add ScaleY animation.

This commit is contained in:
Zhang Dian
2024-09-12 16:11:21 +08:00
parent c724a71aeb
commit 4258e4bbea
2 changed files with 199 additions and 135 deletions

View File

@@ -3,7 +3,7 @@
xmlns:u="https://irihi.tech/ursa"> xmlns:u="https://irihi.tech/ursa">
<Design.PreviewWith> <Design.PreviewWith>
<ThemeVariantScope RequestedThemeVariant="Dark"> <ThemeVariantScope RequestedThemeVariant="Dark">
<ReversibleStackPanel Orientation="Vertical"> <ReversibleStackPanel Orientation="Vertical" ReverseOrder="True">
<u:NotificationCard ShowIcon="False" ShowClose="False" /> <u:NotificationCard ShowIcon="False" ShowClose="False" />
<u:NotificationCard ShowIcon="False" /> <u:NotificationCard ShowIcon="False" />
<u:NotificationCard NotificationType="Information"> <u:NotificationCard NotificationType="Information">
@@ -136,7 +136,9 @@
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>
<ControlTheme.Animations> <Style Selector="^">
<Style Selector="^ /template/ LayoutTransformControl#PART_LayoutTransformControl">
<Style.Animations>
<Animation <Animation
Easing="QuadraticEaseIn" Easing="QuadraticEaseIn"
FillMode="Forward" FillMode="Forward"
@@ -148,7 +150,22 @@
<Setter Property="Opacity" Value="1" /> <Setter Property="Opacity" Value="1" />
</KeyFrame> </KeyFrame>
</Animation> </Animation>
</ControlTheme.Animations> <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 Selector="^:topleft">
<Style.Animations> <Style.Animations>
@@ -240,8 +257,10 @@
</Animation> </Animation>
</Style.Animations> </Style.Animations>
</Style> </Style>
</Style>
<Style Selector="^[IsClosing=true]"> <Style Selector="^[IsClosing=true]">
<Style Selector="^ /template/ LayoutTransformControl#PART_LayoutTransformControl">
<Style.Animations> <Style.Animations>
<Animation <Animation
Easing="QuadraticEaseOut" Easing="QuadraticEaseOut"
@@ -254,7 +273,22 @@
<Setter Property="Opacity" Value="0" /> <Setter Property="Opacity" Value="0" />
</KeyFrame> </KeyFrame>
</Animation> </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.Animations>
</Style>
<Style Selector="^:topleft"> <Style Selector="^:topleft">
<Style.Animations> <Style.Animations>

View File

@@ -98,7 +98,8 @@
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>
<ControlTheme.Animations> <Style Selector="^ /template/ LayoutTransformControl#PART_LayoutTransformControl">
<Style.Animations>
<Animation <Animation
Easing="QuadraticEaseIn" Easing="QuadraticEaseIn"
FillMode="Forward" FillMode="Forward"
@@ -116,7 +117,22 @@
<Setter Property="TranslateTransform.Y" Value="0" /> <Setter Property="TranslateTransform.Y" Value="0" />
</KeyFrame> </KeyFrame>
</Animation> </Animation>
</ControlTheme.Animations> <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 Selector="^[IsClosing=true] /template/ LayoutTransformControl#PART_LayoutTransformControl">
<Style.Animations> <Style.Animations>
@@ -137,6 +153,20 @@
<Setter Property="TranslateTransform.Y" Value="-100" /> <Setter Property="TranslateTransform.Y" Value="-100" />
</KeyFrame> </KeyFrame>
</Animation> </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.Animations>
</Style> </Style>