更上一层楼：利用 KeyFrame 打造高阶 Storyboard Animation

2023-12-04 09:18:16

UWP 开发中阶 Chapter 2 - 通过 KeyFrame 实现更复杂的 Storyboard Animation

引言：

距离上一篇关于 Storyboard Animation 的讲解已过去一段时间，相信大家已经对它的基础应用有了初步了解。然而，要驾驭 UWP 中 Animation 的精髓，我们必须更进一步，探索 KeyFrame 的奥秘。

何为 KeyFrame？

KeyFrame 是一组用于控制动画行为的点。它们沿着时间轴分布，定义了动画过程中特定时刻属性的变化。通过设置不同的 KeyFrame，我们可以创建平滑流畅或陡峭激烈的动画效果。

时间线与插值：

每个 Storyboard Animation 都有自己的时间线，用于控制动画的持续时间和播放速度。插值则负责计算 KeyFrame 之间属性变化的方式。UWP 提供了多种插值类型，如 Linear、Cubic、Exponential 等，为动画效果提供了丰富的选择。

Easing：

Easing 是一个术语，用于动画开始和结束时的速度变化。通过使用 Easing 功能，我们可以避免动画出现突兀生硬的感觉，创造出更自然、更具表现力的效果。

实战示例：

为了加深对 KeyFrame 的理解，我们举一个实战例子。假设我们想要创建一个按钮，当它被点击时，先平滑移动到一个新位置，然后再迅速消失。

<Button x:Name="myButton" Click="Button_Click">
    <Button.Triggers>
        <Trigger SourceName="myButton" Property="IsPressed" Value="True">
            <Trigger.EnterActions>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="myButton" Storyboard.TargetProperty="Canvas.Left" From="0" To="100" Duration="0:0:0.5" KeyTime="0" />
                    <DoubleAnimation Storyboard.TargetName="myButton" Storyboard.TargetProperty="Canvas.Top" From="0" To="100" Duration="0:0:0.5" KeyTime="0" />
                    <DoubleAnimation Storyboard.TargetName="myButton" Storyboard.TargetProperty="Canvas.Left" From="100" To="200" Duration="0:0:0.5" KeyTime="0:0:1" />
                    <DoubleAnimation Storyboard.TargetName="myButton" Storyboard.TargetProperty="Canvas.Top" From="100" To="200" Duration="0:0:0.5" KeyTime="0:0:1" />
                    <DoubleAnimation Storyboard.TargetName="myButton" Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:0.5" KeyTime="0:0:1.5" />
                </Storyboard>
            </Trigger.EnterActions>
        </Trigger>
    </Button.Triggers>
</Button>