设置界面动画优化
This commit is contained in:
lincube
2026-03-23 11:25:24 +08:00
parent b60368527f
commit a559325f5a
20 changed files with 228 additions and 50 deletions

View File

@@ -25,6 +25,7 @@
<StyleInclude Source="avares://LanMountainDesktop/Styles/GlassModule.axaml" />
<StyleInclude Source="avares://LanMountainDesktop/Styles/SettingsAnimations.axaml" />
<StyleInclude Source="avares://LanMountainDesktop/Styles/SettingsCardStyles.axaml" />
<StyleInclude Source="avares://LanMountainDesktop/Styles/NavigationStyles.axaml" />
<Style Selector="Window">
<Setter Property="FontFamily" Value="{DynamicResource AppFontFamily}" />

View File

@@ -2,10 +2,10 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Styles.Resources>
<x:TimeSpan x:Key="FluttermotionToken.Duration.Fast">0:0:0.12</x:TimeSpan>
<x:TimeSpan x:Key="FluttermotionToken.Duration.Standard">0:0:0.16</x:TimeSpan>
<x:TimeSpan x:Key="FluttermotionToken.Duration.Slow">0:0:0.20</x:TimeSpan>
<x:TimeSpan x:Key="FluttermotionToken.Duration.Page">0:0:0.24</x:TimeSpan>
<x:TimeSpan x:Key="FluttermotionToken.Duration.Intro">0:0:0.32</x:TimeSpan>
<x:TimeSpan x:Key="FluttermotionToken.Duration.Standard">0:0:0.20</x:TimeSpan>
<x:TimeSpan x:Key="FluttermotionToken.Duration.Slow">0:0:0.28</x:TimeSpan>
<x:TimeSpan x:Key="FluttermotionToken.Duration.Page">0:0:0.32</x:TimeSpan>
<x:TimeSpan x:Key="FluttermotionToken.Duration.Intro">0:0:0.40</x:TimeSpan>
<x:Double x:Key="FluttermotionToken.BackdropBlurRadiusStrong">30</x:Double>
</Styles.Resources>

View File

@@ -0,0 +1,151 @@
<Styles xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ui="using:FluentAvalonia.UI.Controls"
xmlns:fi="using:FluentIcons.Avalonia.Fluent">
<Styles.Resources>
<x:Double x:Key="PaneToggleButtonWidth">40</x:Double>
<x:Double x:Key="PaneToggleButtonHeight">40</x:Double>
<x:Double x:Key="NavigationViewItemIconBoxHeight">20</x:Double>
<GridLength x:Key="PaneToggleButtonHeightGridLength">40</GridLength>
</Styles.Resources>
<Style Selector="Button.pane-toggle-button">
<Setter Property="Width" Value="{DynamicResource PaneToggleButtonWidth}" />
<Setter Property="Height" Value="{DynamicResource PaneToggleButtonHeight}" />
<Setter Property="Padding" Value="0" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="Template">
<ControlTemplate>
<Border x:Name="LayoutRoot"
Background="{TemplateBinding Background}"
CornerRadius="{TemplateBinding CornerRadius}">
<Border.Transitions>
<Transitions>
<BrushTransition Property="Background" Duration="0:0:0.083" Easing="0.05,0.75,0.10,1.00" />
</Transitions>
</Border.Transitions>
<Grid x:Name="ContentRoot"
ColumnDefinitions="Auto,*">
<Grid.RowDefinitions>
<RowDefinition Height="{DynamicResource PaneToggleButtonHeightGridLength}" />
</Grid.RowDefinitions>
<Border Width="{TemplateBinding Width}">
<ContentPresenter x:Name="IconPresenter"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="{TemplateBinding Content}" />
</Border>
<ContentPresenter x:Name="ContentPresenter"
VerticalContentAlignment="Center"
Content="{TemplateBinding Tag}"
FontSize="{TemplateBinding FontSize}"
Padding="4,0,0,0"
Grid.Column="1" />
</Grid>
</Border>
</ControlTemplate>
</Setter>
</Style>
<Style Selector="Button.pane-toggle-button:pointerover /template/ Border#LayoutRoot">
<Setter Property="Background" Value="{DynamicResource SubtleFillColorSecondaryBrush}" />
</Style>
<Style Selector="Button.pane-toggle-button:pressed /template/ Border#LayoutRoot">
<Setter Property="Background" Value="{DynamicResource SubtleFillColorTertiaryBrush}" />
</Style>
<Style Selector="Button.nav-back">
<Setter Property="Width" Value="{DynamicResource PaneToggleButtonWidth}" />
<Setter Property="Height" Value="{DynamicResource PaneToggleButtonHeight}" />
<Setter Property="Padding" Value="0" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="Template">
<ControlTemplate>
<Border x:Name="LayoutRoot"
Background="{TemplateBinding Background}"
CornerRadius="{TemplateBinding CornerRadius}">
<Border.Transitions>
<Transitions>
<BrushTransition Property="Background" Duration="0:0:0.083" Easing="0.05,0.75,0.10,1.00" />
</Transitions>
</Border.Transitions>
<Grid x:Name="ContentRoot"
ColumnDefinitions="Auto,*">
<Grid.RowDefinitions>
<RowDefinition Height="{DynamicResource PaneToggleButtonHeightGridLength}" />
</Grid.RowDefinitions>
<Border Width="{TemplateBinding Width}">
<fi:FluentIcon Icon="ChevronLeft"
IconVariant="Regular"
FontSize="16"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
<ContentPresenter x:Name="ContentPresenter"
VerticalContentAlignment="Center"
Content="{TemplateBinding Content}"
FontSize="{TemplateBinding FontSize}"
Padding="4,0,0,0"
Grid.Column="1" />
</Grid>
</Border>
</ControlTemplate>
</Setter>
</Style>
<Style Selector="Button.nav-back:pointerover /template/ Border#LayoutRoot">
<Setter Property="Background" Value="{DynamicResource SubtleFillColorSecondaryBrush}" />
</Style>
<Style Selector="Button.nav-back:pressed /template/ Border#LayoutRoot">
<Setter Property="Background" Value="{DynamicResource SubtleFillColorTertiaryBrush}" />
</Style>
<Style Selector="ui|NavigationView.settings-navigation-view">
<Setter Property="Transitions">
<Transitions>
<DoubleTransition Property="Opacity" Duration="0:0:0.2" Easing="0.05,0.75,0.10,1.00" />
</Transitions>
</Setter>
</Style>
<Style Selector="ui|NavigationView.settings-navigation-view /template/ Border#NavigationViewBorder">
<Setter Property="Transitions">
<Transitions>
<BrushTransition Property="Background" Duration="0:0:0.167" Easing="0.05,0.75,0.10,1.00" />
</Transitions>
</Setter>
</Style>
<Style Selector="ui|NavigationViewItem.settings-nav-item">
<Setter Property="Transitions">
<Transitions>
<BrushTransition Property="Background" Duration="0:0:0.083" Easing="0.05,0.75,0.10,1.00" />
<TransformOperationsTransition Property="RenderTransform" Duration="0:0:0.083" Easing="0.05,0.75,0.10,1.00" />
</Transitions>
</Setter>
</Style>
<Style Selector="ui|NavigationViewItem.settings-nav-item:pointerover">
<Setter Property="RenderTransform" Value="scale(1.01)" />
</Style>
<Style Selector="ui|NavigationViewItem.settings-nav-item:pressed">
<Setter Property="RenderTransform" Value="scale(0.99)" />
</Style>
</Styles>

View File

@@ -1,4 +1,4 @@
<Styles xmlns="https://github.com/avaloniaui"
<Styles xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:behaviors="using:LanMountainDesktop.Behaviors">
@@ -16,17 +16,17 @@
<Setter Property="Opacity" Value="0" />
<Setter Property="RenderTransform">
<Setter.Value>
<TranslateTransform Y="14" />
<TranslateTransform Y="24" />
</Setter.Value>
</Setter>
<Style Selector="^[(behaviors|PanelIntroAnimationBehavior.IsAnimationPlayed)=True]">
<Style.Animations>
<Animation Duration="{StaticResource FluttermotionToken.Duration.Intro}"
<Animation Duration="0:0:0.65"
FillMode="Both"
Easing="0.22,1,0.36,1">
Easing="0.05, 0.75, 0.10, 1.00">
<KeyFrame Cue="0%">
<Setter Property="Opacity" Value="0" />
<Setter Property="TranslateTransform.Y" Value="14" />
<Setter Property="TranslateTransform.Y" Value="24" />
</KeyFrame>
<KeyFrame Cue="100%">
<Setter Property="Opacity" Value="1" />
@@ -53,9 +53,9 @@
<Setter Property="MinHeight" Value="34" />
<Setter Property="Transitions">
<Transitions>
<BrushTransition Property="Background" Duration="{StaticResource FluttermotionToken.Duration.Standard}" Easing="0.22,1,0.36,1" />
<BrushTransition Property="BorderBrush" Duration="{StaticResource FluttermotionToken.Duration.Standard}" Easing="0.22,1,0.36,1" />
<TransformOperationsTransition Property="RenderTransform" Duration="{StaticResource FluttermotionToken.Duration.Standard}" Easing="0.22,1,0.36,1" />
<BrushTransition Property="Background" Duration="{StaticResource FluttermotionToken.Duration.Standard}" Easing="0.05,0.75,0.10,1.00" />
<BrushTransition Property="BorderBrush" Duration="{StaticResource FluttermotionToken.Duration.Standard}" Easing="0.05,0.75,0.10,1.00" />
<TransformOperationsTransition Property="RenderTransform" Duration="{StaticResource FluttermotionToken.Duration.Standard}" Easing="0.05,0.75,0.10,1.00" />
</Transitions>
</Setter>
</Style>
@@ -74,8 +74,8 @@
<Style Selector=".settings-scope ComboBox">
<Setter Property="Transitions">
<Transitions>
<BrushTransition Property="Background" Duration="{StaticResource FluttermotionToken.Duration.Fast}" Easing="0.22,1,0.36,1" />
<TransformOperationsTransition Property="RenderTransform" Duration="{StaticResource FluttermotionToken.Duration.Fast}" Easing="0.22,1,0.36,1" />
<BrushTransition Property="Background" Duration="{StaticResource FluttermotionToken.Duration.Fast}" Easing="0.05,0.75,0.10,1.00" />
<TransformOperationsTransition Property="RenderTransform" Duration="{StaticResource FluttermotionToken.Duration.Fast}" Easing="0.05,0.75,0.10,1.00" />
</Transitions>
</Setter>
</Style>
@@ -87,8 +87,8 @@
<Style Selector=".settings-scope ToggleSwitch">
<Setter Property="Transitions">
<Transitions>
<DoubleTransition Property="Opacity" Duration="{StaticResource FluttermotionToken.Duration.Standard}" Easing="0.22,1,0.36,1" />
<TransformOperationsTransition Property="RenderTransform" Duration="{StaticResource FluttermotionToken.Duration.Standard}" Easing="0.22,1,0.36,1" />
<DoubleTransition Property="Opacity" Duration="{StaticResource FluttermotionToken.Duration.Standard}" Easing="0.05,0.75,0.10,1.00" />
<TransformOperationsTransition Property="RenderTransform" Duration="{StaticResource FluttermotionToken.Duration.Standard}" Easing="0.05,0.75,0.10,1.00" />
</Transitions>
</Setter>
</Style>

View File

@@ -1,7 +1,8 @@
<Styles xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ui="using:FluentAvalonia.UI.Controls"
xmlns:fi="using:FluentIcons.Avalonia.Fluent">
xmlns:fi="using:FluentIcons.Avalonia.Fluent"
xmlns:behaviors="using:LanMountainDesktop.Behaviors">
<Style Selector="StackPanel.settings-page-container">
<Setter Property="Spacing" Value="0" />
@@ -9,6 +10,34 @@
<Setter Property="MaxWidth" Value="{DynamicResource SettingsContainerMaxWidth}" />
</Style>
<Style Selector="StackPanel.settings-page-animated">
<Setter Property="behaviors:PanelIntroAnimationBehavior.IsEnabled" Value="True" />
<Style Selector="^ > :is(Control)[(behaviors|PanelIntroAnimationBehavior.CanPlayAnimation)=True]">
<Setter Property="Opacity" Value="0" />
<Setter Property="RenderTransform">
<Setter.Value>
<TranslateTransform Y="20" />
</Setter.Value>
</Setter>
<Style Selector="^[(behaviors|PanelIntroAnimationBehavior.IsAnimationPlayed)=True]">
<Style.Animations>
<Animation Duration="0:0:0.55"
FillMode="Both"
Easing="0.05, 0.75, 0.10, 1.00">
<KeyFrame Cue="0%">
<Setter Property="Opacity" Value="0" />
<Setter Property="TranslateTransform.Y" Value="20" />
</KeyFrame>
<KeyFrame Cue="100%">
<Setter Property="Opacity" Value="1" />
<Setter Property="TranslateTransform.Y" Value="0" />
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
</Style>
</Style>
<Style Selector="TextBlock.settings-section-title">
<Setter Property="FontSize" Value="30" />
<Setter Property="FontWeight" Value="SemiBold" />
@@ -39,10 +68,10 @@
<Transitions>
<BrushTransition Property="Background"
Duration="{StaticResource FluttermotionToken.Duration.Standard}"
Easing="0.22,1,0.36,1" />
Easing="0.05,0.75,0.10,1.00" />
<BoxShadowsTransition Property="BoxShadow"
Duration="{StaticResource FluttermotionToken.Duration.Fast}"
Easing="0.22,1,0.36,1" />
Easing="0.05,0.75,0.10,1.00" />
</Transitions>
</Setter>
</Style>

View File

@@ -5,13 +5,15 @@ namespace LanMountainDesktop.Theme;
public static class FluttermotionToken
{
public static readonly TimeSpan Fast = TimeSpan.FromMilliseconds(120);
public static readonly TimeSpan Standard = TimeSpan.FromMilliseconds(160);
public static readonly TimeSpan Slow = TimeSpan.FromMilliseconds(200);
public static readonly TimeSpan Page = TimeSpan.FromMilliseconds(240);
public static readonly TimeSpan Intro = TimeSpan.FromMilliseconds(320);
public static readonly TimeSpan Standard = TimeSpan.FromMilliseconds(200);
public static readonly TimeSpan Slow = TimeSpan.FromMilliseconds(280);
public static readonly TimeSpan Page = TimeSpan.FromMilliseconds(320);
public static readonly TimeSpan Intro = TimeSpan.FromMilliseconds(400);
public static readonly TimeSpan StaggerStepInterval = TimeSpan.FromMilliseconds(24);
public static readonly TimeSpan StaggerStepInterval = TimeSpan.FromMilliseconds(32);
public static readonly TimeSpan WeatherAnimationFrameInterval = TimeSpan.FromMilliseconds(64);
public const string StandardBezier = "0.22, 1, 0.36, 1";
public const string StandardBezier = "0.05, 0.75, 0.10, 1.00";
public const string DecelerateBezier = "0.05, 0.75, 0.10, 1.00";
public const string AccelerateBezier = "0.30, 0.00, 0.60, 0.00";
}

View File

@@ -7,7 +7,7 @@
x:Class="LanMountainDesktop.Views.SettingsPages.AppearanceSettingsPage"
x:DataType="vm:AppearanceSettingsPageViewModel">
<ScrollViewer VerticalScrollBarVisibility="Auto">
<StackPanel Classes="settings-page-container">
<StackPanel Classes="settings-page-container settings-page-animated">
<controls:IconText Icon="Color"
Text="{Binding ThemeHeader}"

View File

@@ -7,7 +7,7 @@
x:Class="LanMountainDesktop.Views.SettingsPages.ComponentsSettingsPage"
x:DataType="vm:ComponentsSettingsPageViewModel">
<ScrollViewer VerticalScrollBarVisibility="Auto">
<StackPanel Classes="settings-page-container">
<StackPanel Classes="settings-page-container settings-page-animated">
<controls:IconText Icon="Apps"
Text="{Binding ComponentsHeader}"
Margin="0,0,0,4" />

View File

@@ -7,7 +7,7 @@
x:Class="LanMountainDesktop.Views.SettingsPages.GeneralSettingsPage"
x:DataType="vm:GeneralSettingsPageViewModel">
<ScrollViewer VerticalScrollBarVisibility="Auto">
<StackPanel Classes="settings-page-container">
<StackPanel Classes="settings-page-container settings-page-animated">
<!-- 区域设置分组 -->
<controls:IconText Icon="Globe"

View File

@@ -4,7 +4,7 @@
x:Class="LanMountainDesktop.Views.SettingsPages.GeneratedPluginSettingsPage"
x:DataType="vm:PluginGeneratedSettingsPageViewModel">
<ScrollViewer VerticalScrollBarVisibility="Auto">
<StackPanel Classes="settings-page-container">
<StackPanel Classes="settings-page-container settings-page-animated">
<TextBlock Classes="settings-section-title"
Text="{Binding Title}" />
<TextBlock x:Name="DescriptionTextBlock"

View File

@@ -7,7 +7,7 @@
x:Class="LanMountainDesktop.Views.SettingsPages.LauncherSettingsPage"
x:DataType="vm:LauncherSettingsPageViewModel">
<ScrollViewer VerticalScrollBarVisibility="Auto">
<StackPanel Classes="settings-page-container">
<StackPanel Classes="settings-page-container settings-page-animated">
<Border Classes="settings-section-card">
<Grid ColumnDefinitions="Auto,*,Auto"

View File

@@ -7,7 +7,7 @@
x:Name="Root"
x:DataType="vm:PluginMarketSettingsPageViewModel">
<ScrollViewer VerticalScrollBarVisibility="Auto">
<StackPanel Classes="settings-page-container">
<StackPanel Classes="settings-page-container settings-page-animated">
<ui:SettingsExpander Header="{Binding RefreshButtonText}"
Description="{Binding StatusMessage}">
<ui:SettingsExpander.IconSource>

View File

@@ -8,7 +8,7 @@
x:Name="Root"
x:DataType="vm:PluginsSettingsPageViewModel">
<ScrollViewer VerticalScrollBarVisibility="Auto">
<StackPanel Classes="settings-page-container">
<StackPanel Classes="settings-page-container settings-page-animated">
<ui:SettingsExpander Header="{Binding RefreshButtonText}"
Description="{Binding StatusMessage}">
<ui:SettingsExpander.IconSource>

View File

@@ -7,7 +7,7 @@
x:Class="LanMountainDesktop.Views.SettingsPages.PrivacySettingsPage"
x:DataType="vm:PrivacySettingsPageViewModel">
<ScrollViewer VerticalScrollBarVisibility="Auto">
<StackPanel Classes="settings-page-container">
<StackPanel Classes="settings-page-container settings-page-animated">
<controls:IconText Icon="Info"
Text="{Binding PrivacyHeader}"
Margin="0,0,0,4" />

View File

@@ -7,7 +7,7 @@
x:Class="LanMountainDesktop.Views.SettingsPages.StatusBarSettingsPage"
x:DataType="vm:StatusBarSettingsPageViewModel">
<ScrollViewer VerticalScrollBarVisibility="Auto">
<StackPanel Classes="settings-page-container">
<StackPanel Classes="settings-page-container settings-page-animated">
<controls:IconText Icon="Apps"
Text="{Binding ComponentsHeader}"
Margin="0,0,0,4" />

View File

@@ -36,7 +36,7 @@
</UserControl.Styles>
<ScrollViewer VerticalScrollBarVisibility="Auto">
<StackPanel Classes="settings-page-container">
<StackPanel Classes="settings-page-container settings-page-animated">
<TextBlock Classes="settings-section-title"
Text="{Binding PageTitle}" />
<TextBlock Classes="settings-section-description"

View File

@@ -7,7 +7,7 @@
x:Class="LanMountainDesktop.Views.SettingsPages.WallpaperSettingsPage"
x:DataType="vm:WallpaperSettingsPageViewModel">
<ScrollViewer VerticalScrollBarVisibility="Auto">
<StackPanel Classes="settings-page-container">
<StackPanel Classes="settings-page-container settings-page-animated">
<!-- 预览与颜色选择区域 -->
<Grid ColumnDefinitions="*,*" ColumnSpacing="32" Margin="0,0,0,32">

View File

@@ -8,7 +8,7 @@
x:Class="LanMountainDesktop.Views.SettingsPages.WeatherSettingsPage"
x:DataType="vm:WeatherSettingsPageViewModel">
<ScrollViewer VerticalScrollBarVisibility="Auto">
<StackPanel Classes="settings-page-container">
<StackPanel Classes="settings-page-container settings-page-animated">
<Border Classes="settings-section-card">
<Grid ColumnDefinitions="Auto,*,Auto" ColumnSpacing="18">

View File

@@ -2,7 +2,7 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vm="using:LanMountainDesktop.ViewModels"
xmlns:ui="using:FluentAvalonia.UI.Controls"
xmlns:fi="using:FluentIcons.Avalonia"
xmlns:fi="using:FluentIcons.Avalonia.Fluent"
x:Class="LanMountainDesktop.Views.SettingsWindow"
x:DataType="vm:SettingsWindowViewModel"
Width="1120"
@@ -50,15 +50,14 @@
ColumnSpacing="8"
VerticalAlignment="Center">
<Button x:Name="TogglePaneButton"
Width="40"
Height="32"
Padding="0"
Background="Transparent"
BorderThickness="0"
Classes="pane-toggle-button"
Click="OnTogglePaneButtonClick">
<fi:FluentIcon x:Name="TogglePaneButtonIcon"
Icon="PanelLeftExpand"
IconVariant="Regular" />
<Grid>
<fi:FluentIcon x:Name="TogglePaneButtonIcon"
Icon="Navigation"
IconVariant="Regular"
FontSize="16" />
</Grid>
</Button>
<fi:FluentIcon x:Name="WindowBrandIcon"

View File

@@ -563,10 +563,6 @@ public partial class SettingsWindow : Window, ISettingsPageHostContext
{
return;
}
TogglePaneButtonIcon.Icon = RootNavigationView.IsPaneOpen
? FluentIcons.Common.Icon.PanelLeftContract
: FluentIcons.Common.Icon.PanelLeftExpand;
}
private void UpdateChromeMetrics()