242 lines
9.7 KiB
XML
242 lines
9.7 KiB
XML
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
|
||
|
||
<!--
|
||
Easing Function 缓动函数定义
|
||
用于控制动画的速度变化，使动画更加自然和流畅。
|
||
常用于 Storyboard 的 EasingFunction 属性。
|
||
说明如下：
|
||
CubicEase：三次方缓动，常用于平滑过渡。
|
||
BackEase：带回弹效果，适合强调点击或弹性反馈。
|
||
CircleEase：圆形曲线缓动，适合自然加速或减速。
|
||
QuinticEase：五次方缓动，过渡更平滑，适合强调渐变。
|
||
每种类型均有三种模式：
|
||
EaseIn：动画开始时加速。
|
||
EaseOut：动画结束时减速。
|
||
EaseInOut：动画开始和结束时都缓慢，中间加速。
|
||
-->
|
||
<!-- 三次方缓动，动画开始加速 -->
|
||
<CubicEase x:Key="EaseIn" EasingMode="EaseIn" />
|
||
<!-- 三次方缓动，动画结束减速 -->
|
||
<CubicEase x:Key="EaseOut" EasingMode="EaseOut" />
|
||
<!-- 三次方缓动，开始和结束都缓慢 -->
|
||
<CubicEase x:Key="EaseInOut" EasingMode="EaseInOut" />
|
||
<!-- 回弹缓动，动画开始有回弹效果 -->
|
||
<BackEase x:Key="EaseInBack" EasingMode="EaseIn" />
|
||
<!-- 回弹缓动，动画结束有回弹效果 -->
|
||
<BackEase x:Key="EaseOutBack" EasingMode="EaseOut" />
|
||
<!-- 回弹缓动，开始和结束都有回弹效果 -->
|
||
<BackEase x:Key="EaseInOutBack" EasingMode="EaseInOut" />
|
||
<!-- 圆形缓动，动画开始加速 -->
|
||
<CircleEase x:Key="EaseInCirc" EasingMode="EaseIn" />
|
||
<!-- 圆形缓动，动画结束减速 -->
|
||
<CircleEase x:Key="EaseOutCirc" EasingMode="EaseOut" />
|
||
<!-- 圆形缓动，开始和结束都缓慢 -->
|
||
<CircleEase x:Key="EaseInOutCirc" EasingMode="EaseInOut" />
|
||
<!-- 五次方缓动，动画开始加速 -->
|
||
<QuinticEase x:Key="EaseInQuint" EasingMode="EaseIn" />
|
||
<!-- 五次方缓动，动画结束减速 -->
|
||
<QuinticEase x:Key="EaseOutQuint" EasingMode="EaseOut" />
|
||
<!-- 五次方缓动，开始和结束都缓慢 -->
|
||
<QuinticEase x:Key="EaseInOutQuint" EasingMode="EaseInOut" />
|
||
|
||
<Storyboard x:Key="LoadingAnimation" RepeatBehavior="Forever">
|
||
<DoubleAnimation
|
||
Storyboard.TargetName="Icon"
|
||
Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
|
||
From="0"
|
||
To="360"
|
||
Duration="0:0:1" />
|
||
</Storyboard>
|
||
<!-- 动画：(拉伸Y) -->
|
||
<Storyboard x:Key="ExtendYAnimation">
|
||
<DoubleAnimation
|
||
Storyboard.TargetName="Indicator"
|
||
Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
|
||
To="1"
|
||
Duration="0:0:0.3">
|
||
<DoubleAnimation.EasingFunction>
|
||
<!-- BackEase 提供轻微的回弹/过冲效果，看起来更有弹性 -->
|
||
<BackEase Amplitude="0.4" EasingMode="EaseOut" />
|
||
</DoubleAnimation.EasingFunction>
|
||
</DoubleAnimation>
|
||
</Storyboard>
|
||
<!-- 动画：(收缩Y) -->
|
||
<Storyboard x:Key="ShrinkYAnimation">
|
||
<DoubleAnimation
|
||
Storyboard.TargetName="Indicator"
|
||
Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
|
||
To="0"
|
||
Duration="0:0:0.2">
|
||
<DoubleAnimation.EasingFunction>
|
||
<CubicEase EasingMode="EaseOut" />
|
||
</DoubleAnimation.EasingFunction>
|
||
</DoubleAnimation>
|
||
</Storyboard>
|
||
<!-- Storyboards -->
|
||
<!-- Button/Swtich/Tag -->
|
||
<!--
|
||
ClickAnimating 故事板
|
||
用于按钮、开关、标签等控件的点击动画效果。
|
||
效果说明：
|
||
1. Effect 的透明度逐渐变为 0，产生淡出效果。
|
||
2. Effect 的边框厚度增加，突出点击反馈。
|
||
3. Effect 的外边距变为负值，产生收缩感。
|
||
<EventTrigger RoutedEvent="MouseLeftButtonUp">
|
||
<BeginStoryboard Storyboard="{StaticResource ClickAnimating}" />
|
||
</EventTrigger>
|
||
-->
|
||
<Storyboard x:Key="ClickAnimating" FillBehavior="Stop">
|
||
<DoubleAnimation
|
||
EasingFunction="{StaticResource EaseOutCirc}"
|
||
Storyboard.TargetName="Effect"
|
||
Storyboard.TargetProperty="Opacity"
|
||
To="0"
|
||
Duration="0:0:0.6" />
|
||
<ThicknessAnimation
|
||
EasingFunction="{StaticResource EaseOutCirc}"
|
||
Storyboard.TargetName="Effect"
|
||
Storyboard.TargetProperty="BorderThickness"
|
||
To="5.5"
|
||
Duration="0:0:0.2" />
|
||
<ThicknessAnimation
|
||
EasingFunction="{StaticResource EaseOutCirc}"
|
||
Storyboard.TargetName="Effect"
|
||
Storyboard.TargetProperty="Margin"
|
||
To="-5.5"
|
||
Duration="0:0:0.4" />
|
||
</Storyboard>
|
||
<!-- 展开动画 (0度到180度) -->
|
||
<Storyboard x:Key="ExpandRotateStoryboard">
|
||
<DoubleAnimation
|
||
Storyboard.TargetName="arrow"
|
||
Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
|
||
To="180"
|
||
Duration="0:0:0.2">
|
||
<DoubleAnimation.EasingFunction>
|
||
<QuadraticEase EasingMode="EaseOut" />
|
||
</DoubleAnimation.EasingFunction>
|
||
</DoubleAnimation>
|
||
</Storyboard>
|
||
|
||
<!-- 收缩动画 (180度到0度) -->
|
||
<Storyboard x:Key="CollapseRotateStoryboard">
|
||
<DoubleAnimation
|
||
Storyboard.TargetName="arrow"
|
||
Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
|
||
To="0"
|
||
Duration="0:0:0.2">
|
||
<DoubleAnimation.EasingFunction>
|
||
<QuadraticEase EasingMode="EaseOut" />
|
||
</DoubleAnimation.EasingFunction>
|
||
</DoubleAnimation>
|
||
</Storyboard>
|
||
|
||
<!-- 展开动画 (0度到180度) -->
|
||
<Storyboard x:Key="DropOpenRotateStoryboard">
|
||
<DoubleAnimation
|
||
Storyboard.TargetName="arrowContainer"
|
||
Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
|
||
To="180"
|
||
Duration="0:0:0.2">
|
||
<DoubleAnimation.EasingFunction>
|
||
<QuadraticEase EasingMode="EaseOut" />
|
||
</DoubleAnimation.EasingFunction>
|
||
</DoubleAnimation>
|
||
</Storyboard>
|
||
|
||
<!-- 收缩动画 (180度到0度) -->
|
||
<Storyboard x:Key="DropCloseRotateStoryboard">
|
||
<DoubleAnimation
|
||
Storyboard.TargetName="arrowContainer"
|
||
Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
|
||
To="0"
|
||
Duration="0:0:0.2">
|
||
<DoubleAnimation.EasingFunction>
|
||
<QuadraticEase EasingMode="EaseOut" />
|
||
</DoubleAnimation.EasingFunction>
|
||
</DoubleAnimation>
|
||
</Storyboard>
|
||
<!--
|
||
ClickAnimating.Circle 故事板
|
||
用于圆形按钮等控件的点击动画效果。
|
||
效果说明：
|
||
1. Effect 的透明度逐渐变为 0，产生淡出效果。
|
||
2. Effect 的描边厚度增加，突出点击反馈。
|
||
3. Effect 的外边距变为负值，产生收缩感。
|
||
-->
|
||
<Storyboard x:Key="ClickAnimating.Circle" FillBehavior="Stop">
|
||
<DoubleAnimation
|
||
EasingFunction="{StaticResource EaseOutCirc}"
|
||
Storyboard.TargetName="Effect"
|
||
Storyboard.TargetProperty="Opacity"
|
||
To="0"
|
||
Duration="0:0:0.6" />
|
||
<DoubleAnimation
|
||
EasingFunction="{StaticResource EaseOutCirc}"
|
||
Storyboard.TargetName="Effect"
|
||
Storyboard.TargetProperty="StrokeThickness"
|
||
To="5.5"
|
||
Duration="0:0:0.2" />
|
||
<ThicknessAnimation
|
||
EasingFunction="{StaticResource EaseOutCirc}"
|
||
Storyboard.TargetName="Effect"
|
||
Storyboard.TargetProperty="Margin"
|
||
To="-5.5"
|
||
Duration="0:0:0.4" />
|
||
</Storyboard>
|
||
|
||
<!--
|
||
InputAnimating 故事板
|
||
用于 TextBox、PasswordBox、ComboBox 等输入控件的聚焦动画效果。
|
||
效果说明：
|
||
Effect 的透明度变为 0.2，突出输入框的聚焦状态。
|
||
目标需要一个名为 Effect 的 Border。
|
||
-->
|
||
<Storyboard x:Key="InputAnimating">
|
||
<DoubleAnimation
|
||
Storyboard.TargetName="Effect"
|
||
Storyboard.TargetProperty="Opacity"
|
||
To="0.2" />
|
||
</Storyboard>
|
||
|
||
<!-- 使用故事板 -->
|
||
<!--<VisualStateManager.VisualStateGroups>
|
||
<VisualStateGroup x:Name="FocusStates">
|
||
<VisualStateGroup.Transitions>
|
||
<VisualTransition GeneratedDuration="0:0:0.3" />
|
||
</VisualStateGroup.Transitions>
|
||
<VisualState x:Name="Focused" Storyboard="{StaticResource InputAnimating}" />
|
||
<VisualState x:Name="Unfocused" />
|
||
</VisualStateGroup>
|
||
</VisualStateManager.VisualStateGroups>-->
|
||
|
||
<!--
|
||
TextBox.FocusEffect 故事板
|
||
用于 TextBox 聚焦时的光效动画。
|
||
效果说明：
|
||
slot 的 Intensity 属性变为 0.5，增强聚焦光效。
|
||
-->
|
||
<Storyboard x:Key="TextBox.FocusEffect">
|
||
<DoubleAnimation
|
||
Storyboard.TargetName="slot"
|
||
Storyboard.TargetProperty="Intensity"
|
||
To="0.5"
|
||
Duration="0:0:0.2" />
|
||
</Storyboard>
|
||
|
||
<!--
|
||
TextBox.LeaveEffect 故事板
|
||
用于 TextBox 失去焦点时的光效动画。
|
||
效果说明：
|
||
slot 的 Intensity 属性变为 0.2，减弱光效。
|
||
-->
|
||
<Storyboard x:Key="TextBox.LeaveEffect">
|
||
<DoubleAnimation
|
||
Storyboard.TargetName="slot"
|
||
Storyboard.TargetProperty="Intensity"
|
||
To="0.2"
|
||
Duration="0:0:0.2" />
|
||
</Storyboard>
|
||
|
||
|
||
</ResourceDictionary> |