WPF 和 UWP 中，不用设置 From 或 To，Storyboard 即拥有更灵活的动画控制

最新推荐文章于 2024-05-29 08:33:46 发布

walter lv

最新推荐文章于 2024-05-29 08:33:46 发布

阅读量1.6k

点赞数

分类专栏： dotnet csharp

本文链接：https://blog.csdn.net/WPwalter/article/details/78404727

版权

本文探讨如何在WPF和UWP中创建灵活的Storyboard动画，避免直接设置From和To属性。通过动态改变动画参数，实现在不同位置开始和结束动画的效果。在WPF中，动画参数可以在运行时修改，而在UWP中，需指定动画的From值以达到类似效果。

摘要由CSDN通过智能技术生成

无论是 WPF 还是 UWP 开发，如果用 Storyboard 和 Animation 做动画，我们多数时候都会设置 From 和 To 属性，用于从起始值动画到目标值。然而动画并不总是可以静态地指定这些值，因为更多的时候动画的起始值和目标值取决于当前 UI 的状态。

本文中，我将将尽量避免设置 From 和 To 值，让动画可以随时中断并重新开始，而中途不会出现突兀的变化。

本文涉及到的代码均在 GitHub 上以 MIT License 开源：walterlv/sharing-demo at demo/storyboard-without-using-from-or-to。

预览效果

下面是本文期望实现的基本效果：

在 WPF 中的动画效果
在 UWP 中的动画效果

预备代码

为了让读者能够最快速地搭建一个可供试验的 DEMO，我这里贴出界面部分核心代码。

XAML 是这样的（这里的 XAML，WPF 和 UWP 完全一样，可以互相使用而不用修改任何代码）：

布局部分

<Grid Background="White">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Button Grid.Row="0" Grid.Column="0" Content="平移至随机位置" Click="BeginStoryboard_Click"/>
    <Button Grid.Row="0" Grid.Column="1" Content="从随机位置平移" Click="BeginStoryboard2_Click"/>
    <Button Grid.Row="0" G