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

feat: Notification animations.

Browse Source
This commit is contained in:
Zhang Dian
2024-09-11 10:32:17 +08:00
parent f219acff49
commit 01c2133012
2 changed files with 196 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
src/Ursa.Themes.Semi/Controls/Notification.axaml
View File

@@ -23,16 +23,19 @@
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>
<Style Selector="^:topleft /template/ ReversibleStackPanel#PART_Items"> <Style Selector="^:topleft /template/ ReversibleStackPanel#PART_Items">
<Setter Property="ReverseOrder" Value="True" />
<Setter Property="VerticalAlignment" Value="Top" /> <Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="HorizontalAlignment" Value="Left" /> <Setter Property="HorizontalAlignment" Value="Left" />
</Style> </Style>
<Style Selector="^:topright /template/ ReversibleStackPanel#PART_Items"> <Style Selector="^:topright /template/ ReversibleStackPanel#PART_Items">
<Setter Property="ReverseOrder" Value="True" />
<Setter Property="VerticalAlignment" Value="Top" /> <Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="HorizontalAlignment" Value="Right" /> <Setter Property="HorizontalAlignment" Value="Right" />
</Style> </Style>
<Style Selector="^:topcenter /template/ ReversibleStackPanel#PART_Items"> <Style Selector="^:topcenter /template/ ReversibleStackPanel#PART_Items">
<Setter Property="ReverseOrder" Value="True" />
<Setter Property="VerticalAlignment" Value="Top" /> <Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="HorizontalAlignment" Value="Center" /> <Setter Property="HorizontalAlignment" Value="Center" />
</Style> </Style>
@@ -58,7 +61,7 @@
<ControlTheme x:Key="{x:Type u:NotificationCard}" TargetType="u:NotificationCard"> <ControlTheme x:Key="{x:Type u:NotificationCard}" TargetType="u:NotificationCard">
<Setter Property="UseLayoutRounding" Value="True" /> <Setter Property="UseLayoutRounding" Value="True" />
<Setter Property="RenderTransformOrigin" Value="50%,75%" /> <Setter Property="MinWidth" Value="{DynamicResource NotificationCardMinWidth}" />
<Setter Property="BorderThickness" Value="{DynamicResource NotificationCardBorderThickness}" /> <Setter Property="BorderThickness" Value="{DynamicResource NotificationCardBorderThickness}" />
<Setter Property="BorderBrush" Value="{DynamicResource NotificationCardBorderBrush}" /> <Setter Property="BorderBrush" Value="{DynamicResource NotificationCardBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource NotificationCardBackground}" /> <Setter Property="Background" Value="{DynamicResource NotificationCardBackground}" />
@@ -145,17 +148,101 @@
<KeyFrame Cue="100%"> <KeyFrame Cue="100%">
<Setter Property="Opacity" Value="1" /> <Setter Property="Opacity" Value="1" />
</KeyFrame> </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>
</ControlTheme.Animations> </ControlTheme.Animations>
<Style Selector="^[IsClosing=true] /template/ LayoutTransformControl#PART_LayoutTransformControl"> <Style Selector="^:topleft">
<Setter Property="RenderTransformOrigin" Value="50%,0%" /> <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 Selector="^[IsClosing=true]">
<Style.Animations> <Style.Animations>
<Animation <Animation
Easing="QuadraticEaseOut" Easing="QuadraticEaseOut"
@@ -167,14 +254,99 @@
<KeyFrame Cue="100%"> <KeyFrame Cue="100%">
<Setter Property="Opacity" Value="0" /> <Setter Property="Opacity" Value="0" />
</KeyFrame> </KeyFrame>
<KeyFrame KeySpline="0.22,0.57,0.02,1.2" Cue="0%">
<Setter Property="TranslateTransform.Y" Value="0" />
</KeyFrame>
<KeyFrame KeySpline="0.22,0.57,0.02,1.2" Cue="100%">
<Setter Property="TranslateTransform.Y" Value="-100" />
</KeyFrame>
</Animation> </Animation>
</Style.Animations> </Style.Animations>
<Style Selector="^:topleft">
<Style.Animations>
<Animation
Easing="QuadraticEaseOut"
FillMode="Forward"
Duration="0:0:0.3">
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
<Setter Property="TranslateTransform.X" Value="0" />
</KeyFrame>
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
<Setter Property="TranslateTransform.X" Value="-500" />
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
<Style Selector="^:topright">
<Style.Animations>
<Animation
Easing="QuadraticEaseOut"
FillMode="Forward"
Duration="0:0:0.3">
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
<Setter Property="TranslateTransform.X" Value="0" />
</KeyFrame>
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
<Setter Property="TranslateTransform.X" Value="500" />
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
<Style Selector="^:bottomleft">
<Style.Animations>
<Animation
Easing="QuadraticEaseOut"
FillMode="Forward"
Duration="0:0:0.3">
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
<Setter Property="TranslateTransform.X" Value="0" />
</KeyFrame>
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
<Setter Property="TranslateTransform.X" Value="-500" />
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
<Style Selector="^:bottomright">
<Style.Animations>
<Animation
Easing="QuadraticEaseOut"
FillMode="Forward"
Duration="0:0:0.3">
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
<Setter Property="TranslateTransform.X" Value="0" />
</KeyFrame>
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
<Setter Property="TranslateTransform.X" Value="500" />
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
<Style Selector="^:topcenter">
<Style.Animations>
<Animation
Easing="QuadraticEaseOut"
FillMode="Forward"
Duration="0:0:0.3">
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
<Setter Property="TranslateTransform.Y" Value="0" />
</KeyFrame>
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
<Setter Property="TranslateTransform.Y" Value="-100" />
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
<Style Selector="^:bottomcenter">
<Style.Animations>
<Animation
Easing="QuadraticEaseOut"
FillMode="Forward"
Duration="0:0:0.3">
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
<Setter Property="TranslateTransform.Y" Value="0" />
</KeyFrame>
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
<Setter Property="TranslateTransform.Y" Value="100" />
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
</Style> </Style>
<Style Selector="^[IsClosing=true]"> <Style Selector="^[IsClosing=true]">

9
src/Ursa/Controls/Notification/NotificationCard.cs
View File

@@ -1,5 +1,6 @@
using Avalonia; using Avalonia;
using Avalonia.Controls; using Avalonia.Controls;
using Avalonia.Controls.Metadata;
using Avalonia.Controls.Notifications; using Avalonia.Controls.Notifications;
using Avalonia.LogicalTree; using Avalonia.LogicalTree;
@@ -8,6 +9,14 @@ namespace Ursa.Controls;
/// <summary> /// <summary>
/// Control that represents and displays a notification. /// Control that represents and displays a notification.
/// </summary> /// </summary>
[PseudoClasses(
WindowNotificationManager.PC_TopLeft,
WindowNotificationManager.PC_TopRight,
WindowNotificationManager.PC_BottomLeft,
WindowNotificationManager.PC_BottomRight,
WindowNotificationManager.PC_TopCenter,
WindowNotificationManager.PC_BottomCenter
)]
public class NotificationCard : MessageCard public class NotificationCard : MessageCard
{ {
private NotificationPosition _position; private NotificationPosition _position;