feat:Add several predefined SizeAnimations.

This commit is contained in:
望尘空忧
2025-08-18 23:11:02 +08:00
parent 2345c8a9de
commit c631c9a871
6 changed files with 201 additions and 67 deletions

View File

@@ -12,27 +12,27 @@
<ControlTemplate TargetType="u:NavMenu">
<Grid RowDefinitions="Auto, *, Auto">
<ContentPresenter Content="{TemplateBinding Header}" />
<ScrollViewer
Grid.Row="1"
HorizontalAlignment="Stretch"
HorizontalScrollBarVisibility="Disabled"
AllowAutoHide="True"
VerticalScrollBarVisibility="Auto">
<ScrollViewer.Styles>
<Style Selector="ScrollViewer /template/ ScrollBar">
<Setter Property="Opacity" Value="0" />
</Style>
<Style Selector="ScrollViewer:pointerover">
<Style Selector="^ /template/ ScrollBar#PART_HorizontalScrollBar">
<Setter Property="Opacity" Value="1" />
</Style>
<Style Selector="^ /template/ ScrollBar#PART_VerticalScrollBar">
<Setter Property="Opacity" Value="1" />
</Style>
</Style>
</ScrollViewer.Styles>
<ItemsPresenter Name="PART_ItemsPresenter" ItemsPanel="{TemplateBinding ItemsPanel}" />
</ScrollViewer>
<ScrollViewer
Grid.Row="1"
HorizontalAlignment="Stretch"
HorizontalScrollBarVisibility="Disabled"
AllowAutoHide="True"
VerticalScrollBarVisibility="Auto">
<ScrollViewer.Styles>
<Style Selector="ScrollViewer /template/ ScrollBar">
<Setter Property="Opacity" Value="0" />
</Style>
<Style Selector="ScrollViewer:pointerover">
<Style Selector="^ /template/ ScrollBar#PART_HorizontalScrollBar">
<Setter Property="Opacity" Value="1" />
</Style>
<Style Selector="^ /template/ ScrollBar#PART_VerticalScrollBar">
<Setter Property="Opacity" Value="1" />
</Style>
</Style>
</ScrollViewer.Styles>
<ItemsPresenter Name="PART_ItemsPresenter" ItemsPanel="{TemplateBinding ItemsPanel}" />
</ScrollViewer>
<ContentPresenter Grid.Row="2" Content="{TemplateBinding Footer}" />
</Grid>
</ControlTemplate>
@@ -44,6 +44,15 @@
<Setter Property="Width" Value="{Binding $self.CollapseWidth}" />
<Setter Property="Grid.IsSharedSizeScope" Value="False" />
</Style>
<Style Selector="^.enable_animation">
<Setter Property="u:SizeAnimationHelper.TriggerAvaloniaProperty"
Value="{x:Static u:NavMenu.IsHorizontalCollapsedProperty}">
</Setter>
<Setter Property="u:SizeAnimationHelper.CreateAnimation"
Value="{DynamicResource NavMenuWidthAnimationGenerator}">
</Setter>
<Setter Property="u:SizeAnimationHelper.EnableWHAnimation" Value="True"></Setter>
</Style>
</ControlTheme>
<ControlTemplate x:Key="DefaultNavMenuItemTemplate" TargetType="u:NavMenuItem">
@@ -134,13 +143,15 @@
<Transitions>
<DoubleTransition Easing="QuadraticEaseIn" Property="Height" Duration="0.25" />
<DoubleTransition Easing="QuadraticEaseOut" Property="Opacity" Duration="0.25" />
<TransformOperationsTransition Easing="QuadraticEaseInOut" Property="RenderTransform" Duration="0.25" />
<TransformOperationsTransition Easing="QuadraticEaseInOut" Property="RenderTransform"
Duration="0.25" />
</Transitions>
</ItemsPresenter.Transitions>
</ItemsPresenter>
<LayoutTransformControl.Transitions>
<Transitions>
<TransformOperationsTransition Easing="QuadraticEaseInOut" Property="LayoutTransform" Duration="0.15" Delay="0.1" />
<TransformOperationsTransition Easing="QuadraticEaseInOut" Property="LayoutTransform"
Duration="0.15" Delay="0.1" />
</Transitions>
</LayoutTransformControl.Transitions>
</LayoutTransformControl>
@@ -183,12 +194,12 @@
<Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter:pointerover">
<Setter Property="Foreground" Value="{DynamicResource ListBoxItemPointeroverForeground}" />
</Style>
<Style Selector="^:focus /template/ Border#PART_Border">
<Setter Property="Background" Value="{DynamicResource ListBoxItemPointeroverBackground}" />
</Style>
<Style Selector="^:focus /template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="Foreground" Value="{DynamicResource ListBoxItemPointeroverForeground}" />
</Style>
<Style Selector="^:focus /template/ Border#PART_Border">
<Setter Property="Background" Value="{DynamicResource ListBoxItemPointeroverBackground}" />
</Style>
<Style Selector="^:focus /template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="Foreground" Value="{DynamicResource ListBoxItemPointeroverForeground}" />
</Style>
<Style Selector="^:horizontal-collapsed:first-level">
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Style Selector="^ /template/ Border#PART_Border">

View File

@@ -26,6 +26,8 @@ public class SemiTheme : Styles
public SemiTheme(IServiceProvider? provider = null)
{
AvaloniaXamlLoader.Load(provider, this);
Resources.MergedDictionaries.Add(new SizeAnimations.DefaultSizeAnimations());
Resources.MergedDictionaries.Add(new SizeAnimations.NavMenuSizeAnimations());
}
public static ThemeVariant Aquatic => new(nameof(Aquatic), ThemeVariant.Dark);
@@ -95,4 +97,4 @@ public class SemiTheme : Styles
if (!_localeToResource.TryGetValue(culture, out var resources)) return;
foreach (var kv in resources) element.Resources[kv.Key] = kv.Value;
}
}
}

View File

@@ -0,0 +1,105 @@
using Avalonia.Animation;
using Avalonia.Animation.Easings;
using Avalonia.Controls;
using Avalonia.Layout;
using Avalonia.Styling;
using Ursa.Helpers;
namespace Ursa.Themes.Semi.SizeAnimations;
public partial class DefaultSizeAnimations : ResourceDictionary
{
public const string WidthAnimationGeneratorKey = "WidthAnimationGenerator";
public const string HeightAnimationGeneratorKey = "HeightAnimationGenerator";
public const string WidthHeightAnimationGeneratorKey = "WidthHeightAnimationGenerator";
public DefaultSizeAnimations()
{
Add(WidthAnimationGeneratorKey, WidthAnimationGenerator);
Add(HeightAnimationGeneratorKey, HeightAnimationGenerator);
Add(WidthHeightAnimationGeneratorKey, WidthHeightAnimationGenerator);
}
private readonly SizeAnimationHelperAnimationGeneratorDelegate WidthAnimationGenerator =
(_, oldDesiredSize, newDesiredSize) => new Animation
{
Duration = TimeSpan.FromMilliseconds(300),
Easing = new CubicEaseInOut(),
FillMode = FillMode.None,
Children =
{
new KeyFrame
{
Cue = new Cue(0.0),
Setters =
{
new Setter(Layoutable.WidthProperty, oldDesiredSize.Width)
}
},
new KeyFrame
{
Cue = new Cue(1.0),
Setters =
{
new Setter(Layoutable.WidthProperty, newDesiredSize.Width)
}
}
}
};
private readonly SizeAnimationHelperAnimationGeneratorDelegate HeightAnimationGenerator =
(_, oldDesiredSize, newDesiredSize) => new Animation
{
Duration = TimeSpan.FromMilliseconds(300),
Easing = new CubicEaseInOut(),
FillMode = FillMode.None,
Children =
{
new KeyFrame
{
Cue = new Cue(0.0),
Setters =
{
new Setter(Layoutable.HeightProperty, oldDesiredSize.Height)
}
},
new KeyFrame
{
Cue = new Cue(1.0),
Setters =
{
new Setter(Layoutable.HeightProperty, newDesiredSize.Height)
}
}
}
};
private readonly SizeAnimationHelperAnimationGeneratorDelegate WidthHeightAnimationGenerator =
(_, oldDesiredSize, newDesiredSize) => new Animation
{
Duration = TimeSpan.FromMilliseconds(300),
Easing = new CubicEaseInOut(),
FillMode = FillMode.None,
Children =
{
new KeyFrame
{
Cue = new Cue(0.0),
Setters =
{
new Setter(Layoutable.WidthProperty, oldDesiredSize.Width),
new Setter(Layoutable.HeightProperty, oldDesiredSize.Height)
}
},
new KeyFrame
{
Cue = new Cue(1.0),
Setters =
{
new Setter(Layoutable.WidthProperty, newDesiredSize.Width),
new Setter(Layoutable.HeightProperty, newDesiredSize.Height)
}
}
}
};
}

View File

@@ -0,0 +1,52 @@
using Avalonia.Animation;
using Avalonia.Animation.Easings;
using Avalonia.Controls;
using Avalonia.Layout;
using Avalonia.Styling;
using Ursa.Helpers;
namespace Ursa.Themes.Semi.SizeAnimations;
public class NavMenuSizeAnimations : ResourceDictionary
{
public const string NavMenuWidthAnimationGeneratorKey = "NavMenuWidthAnimationGenerator";
public NavMenuSizeAnimations()
{
Add(NavMenuWidthAnimationGeneratorKey, NavMenuWidthAnimationGenerator);
}
private readonly SizeAnimationHelperAnimationGeneratorDelegate NavMenuWidthAnimationGenerator =
(_, oldDesiredSize, newDesiredSize) =>
{
if (oldDesiredSize.Width > newDesiredSize.Width)
newDesiredSize = newDesiredSize.WithWidth(newDesiredSize.Width + 20);
return new Animation
{
Duration = TimeSpan.FromMilliseconds(300),
Easing = new CubicEaseInOut(),
FillMode = FillMode.None,
Children =
{
new KeyFrame
{
Cue = new Cue(0.0),
Setters =
{
new Setter(Layoutable.WidthProperty, oldDesiredSize.Width),
new Setter(Layoutable.HeightProperty, oldDesiredSize.Height)
}
},
new KeyFrame
{
Cue = new Cue(1.0),
Setters =
{
new Setter(Layoutable.WidthProperty, newDesiredSize.Width),
new Setter(Layoutable.HeightProperty, newDesiredSize.Height)
}
}
}
};
};
}