ShrlAlgoToolkit/Melskin/Themes/Animations.xaml

<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>