chuan/Ursa.Avalonia
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: add ScaleY animation.

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

266
src/Ursa.Themes.Semi/Controls/Notification.axaml
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,125 +136,159 @@
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>
<ControlTheme.Animations> <Style Selector="^">
<Animation <Style Selector="^ /template/ LayoutTransformControl#PART_LayoutTransformControl">
Easing="QuadraticEaseIn" <Style.Animations>
FillMode="Forward" <Animation
Duration="0:0:0.3"> Easing="QuadraticEaseIn"
<KeyFrame Cue="0%"> FillMode="Forward"
<Setter Property="Opacity" Value="0" /> Duration="0:0:0.3">
</KeyFrame> <KeyFrame Cue="0%">
<KeyFrame Cue="100%"> <Setter Property="Opacity" Value="0" />
<Setter Property="Opacity" Value="1" /> </KeyFrame>
</KeyFrame> <KeyFrame Cue="100%">
</Animation> <Setter Property="Opacity" Value="1" />
</ControlTheme.Animations> </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 Selector="^:topleft">
<Style.Animations> <Style.Animations>
<Animation <Animation
Easing="QuadraticEaseIn" Easing="QuadraticEaseIn"
FillMode="Forward" FillMode="Forward"
Duration="0:0:0.3"> Duration="0:0:0.3">
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%"> <KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
<Setter Property="TranslateTransform.X" Value="-500" /> <Setter Property="TranslateTransform.X" Value="-500" />
</KeyFrame> </KeyFrame>
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%"> <KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
<Setter Property="TranslateTransform.X" Value="0" /> <Setter Property="TranslateTransform.X" Value="0" />
</KeyFrame> </KeyFrame>
</Animation> </Animation>
</Style.Animations> </Style.Animations>
</Style> </Style>
<Style Selector="^:topright"> <Style Selector="^:topright">
<Style.Animations> <Style.Animations>
<Animation <Animation
Easing="QuadraticEaseIn" Easing="QuadraticEaseIn"
FillMode="Forward" FillMode="Forward"
Duration="0:0:0.3"> Duration="0:0:0.3">
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%"> <KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
<Setter Property="TranslateTransform.X" Value="500" /> <Setter Property="TranslateTransform.X" Value="500" />
</KeyFrame> </KeyFrame>
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%"> <KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
<Setter Property="TranslateTransform.X" Value="0" /> <Setter Property="TranslateTransform.X" Value="0" />
</KeyFrame> </KeyFrame>
</Animation> </Animation>
</Style.Animations> </Style.Animations>
</Style> </Style>
<Style Selector="^:bottomleft"> <Style Selector="^:bottomleft">
<Style.Animations> <Style.Animations>
<Animation <Animation
Easing="QuadraticEaseIn" Easing="QuadraticEaseIn"
FillMode="Forward" FillMode="Forward"
Duration="0:0:0.3"> Duration="0:0:0.3">
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%"> <KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
<Setter Property="TranslateTransform.X" Value="-500" /> <Setter Property="TranslateTransform.X" Value="-500" />
</KeyFrame> </KeyFrame>
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%"> <KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
<Setter Property="TranslateTransform.X" Value="0" /> <Setter Property="TranslateTransform.X" Value="0" />
</KeyFrame> </KeyFrame>
</Animation> </Animation>
</Style.Animations> </Style.Animations>
</Style> </Style>
<Style Selector="^:bottomright"> <Style Selector="^:bottomright">
<Style.Animations> <Style.Animations>
<Animation <Animation
Easing="QuadraticEaseIn" Easing="QuadraticEaseIn"
FillMode="Forward" FillMode="Forward"
Duration="0:0:0.3"> Duration="0:0:0.3">
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%"> <KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
<Setter Property="TranslateTransform.X" Value="500" /> <Setter Property="TranslateTransform.X" Value="500" />
</KeyFrame> </KeyFrame>
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%"> <KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
<Setter Property="TranslateTransform.X" Value="0" /> <Setter Property="TranslateTransform.X" Value="0" />
</KeyFrame> </KeyFrame>
</Animation> </Animation>
</Style.Animations> </Style.Animations>
</Style> </Style>
<Style Selector="^:topcenter"> <Style Selector="^:topcenter">
<Style.Animations> <Style.Animations>
<Animation <Animation
Easing="QuadraticEaseIn" Easing="QuadraticEaseIn"
FillMode="Forward" FillMode="Forward"
Duration="0:0:0.3"> Duration="0:0:0.3">
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%"> <KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
<Setter Property="TranslateTransform.Y" Value="-100" /> <Setter Property="TranslateTransform.Y" Value="-100" />
</KeyFrame> </KeyFrame>
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%"> <KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
<Setter Property="TranslateTransform.Y" Value="0" /> <Setter Property="TranslateTransform.Y" Value="0" />
</KeyFrame> </KeyFrame>
</Animation> </Animation>
</Style.Animations> </Style.Animations>
</Style> </Style>
<Style Selector="^:bottomcenter"> <Style Selector="^:bottomcenter">
<Style.Animations> <Style.Animations>
<Animation <Animation
Easing="QuadraticEaseIn" Easing="QuadraticEaseIn"
FillMode="Forward" FillMode="Forward"
Duration="0:0:0.3"> Duration="0:0:0.3">
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%"> <KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
<Setter Property="TranslateTransform.Y" Value="100" /> <Setter Property="TranslateTransform.Y" Value="100" />
</KeyFrame> </KeyFrame>
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%"> <KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
<Setter Property="TranslateTransform.Y" Value="0" /> <Setter Property="TranslateTransform.Y" Value="0" />
</KeyFrame> </KeyFrame>
</Animation> </Animation>
</Style.Animations> </Style.Animations>
</Style>
</Style> </Style>
<Style Selector="^[IsClosing=true]"> <Style Selector="^[IsClosing=true]">
<Style.Animations> <Style Selector="^ /template/ LayoutTransformControl#PART_LayoutTransformControl">
<Animation <Style.Animations>
Easing="QuadraticEaseOut" <Animation
FillMode="Forward" Easing="QuadraticEaseOut"
Duration="0:0:0.3"> FillMode="Forward"
<KeyFrame Cue="0%"> Duration="0:0:0.3">
<Setter Property="Opacity" Value="1" /> <KeyFrame Cue="0%">
</KeyFrame> <Setter Property="Opacity" Value="1" />
<KeyFrame Cue="100%"> </KeyFrame>
<Setter Property="Opacity" Value="0" /> <KeyFrame Cue="100%">
</KeyFrame> <Setter Property="Opacity" Value="0" />
</Animation> </KeyFrame>
</Style.Animations> </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 Selector="^:topleft">
<Style.Animations> <Style.Animations>

68
src/Ursa.Themes.Semi/Controls/Toast.axaml
View File

@@ -98,25 +98,41 @@
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>
<ControlTheme.Animations> <Style Selector="^ /template/ LayoutTransformControl#PART_LayoutTransformControl">
<Animation <Style.Animations>
Easing="QuadraticEaseIn" <Animation
FillMode="Forward" Easing="QuadraticEaseIn"
Duration="0:0:0.3"> FillMode="Forward"
<KeyFrame Cue="0%"> Duration="0:0:0.3">
<Setter Property="Opacity" Value="0" /> <KeyFrame Cue="0%">
</KeyFrame> <Setter Property="Opacity" Value="0" />
<KeyFrame Cue="100%"> </KeyFrame>
<Setter Property="Opacity" Value="1" /> <KeyFrame Cue="100%">
</KeyFrame> <Setter Property="Opacity" Value="1" />
<KeyFrame KeySpline="0.22,0.57,0.02,1.2" Cue="0%"> </KeyFrame>
<Setter Property="TranslateTransform.Y" Value="-100" /> <KeyFrame KeySpline="0.22,0.57,0.02,1.2" Cue="0%">
</KeyFrame> <Setter Property="TranslateTransform.Y" Value="-100" />
<KeyFrame KeySpline="0.22,0.57,0.02,1.2" Cue="100%"> </KeyFrame>
<Setter Property="TranslateTransform.Y" Value="0" /> <KeyFrame KeySpline="0.22,0.57,0.02,1.2" Cue="100%">
</KeyFrame> <Setter Property="TranslateTransform.Y" Value="0" />
</Animation> </KeyFrame>
</ControlTheme.Animations> </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 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>