Files
ShrlAlgoToolkit/NeuWPF/NeoUI/Animations/Animations.xaml

161 lines
6.5 KiB
Plaintext
Raw Normal View History

2025-08-20 12:10:13 +08:00
<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>
<!-- Storyboards -->
<!-- Button/Swtich/Tag -->
<!--
ClickAnimating 故事板
用于按钮、开关、标签等控件的点击动画效果。
效果说明:
1. Effect 的透明度逐渐变为 0产生淡出效果。
2. Effect 的边框厚度增加,突出点击反馈。
3. Effect 的外边距变为负值,产生收缩感。
-->
<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>
<!--
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>
<!--
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>
<!-- 使用故事板 -->
<!--<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>-->
</ResourceDictionary>