AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2018-09-21 966
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 原文:WPF 和 UWP 中，不用设置 From 或 To，Storyboard 即拥有更灵活的动画控制 版权声明：本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。
原文: WPF 和 UWP 中，不用设置 From 或 To，Storyboard 即拥有更灵活的动画控制

版权声明：本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。欢迎转载、使用、重新发布，但务必保留文章署名吕毅（包含链接：http://blog.csdn.net/wpwalter/），不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。如有任何疑问，请与我联系（walter.lv@qq.com）。 https://blog.csdn.net/WPwalter/article/details/78404727

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

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

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

预览效果

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

  • 在 WPF 中的动画效果
    WPF 动画随机移动

  • 在 UWP 中的动画效果
    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" Grid.Column="2" Content="暂停" Click="PauseStoryboard_Click"/>
    <Canvas x:Name="DisplayCanvas" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2">
        <Rectangle x:Name="DisplayShape" Fill="ForestGreen" Width="120" Height="40">
            <UIElement.RenderTransform>
                <TranslateTransform x:Name="TranslateTransform" X="0" Y="0"/>
            </UIElement.RenderTransform>
        </Rectangle>
    </Canvas>
</Grid>
  • 资源部分
<Page.Resources>
    <CircleEase x:Key="EasingFunction.Translate" EasingMode="EaseOut"/>
    <!-- 为了方便使用，在 UWP 中加上了 x:Name；WPF 代码请删除 x:Name -->
    <Storyboard x:Name="TranlateStoryboard" x:Key="Storyboard.Translate">
        <DoubleAnimation Storyboard.TargetName="TranslateTransform" Storyboard.TargetProperty="X" EasingFunction="{StaticResource EasingFunction.Translate}"/>
        <DoubleAnimation Storyboard.TargetName="TranslateTransform" Storyboard.TargetProperty="Y" EasingFunction="{StaticResource EasingFunction.Translate}"/>
    </Storyboard>
</Page.Resources>

.xaml.cs 文件中预备一些属性和字段方便使用：

#if !WINDOWS_UWP
// 因为 WPF 不能在资源中指定 x:Name，所以需要在后台代码中手动查找动画资源。
private Storyboard TranslateStoryboard => (Storyboard)FindResource("Storyboard.Translate");
#endif
private DoubleAnimation TranslateXAnimation => (DoubleAnimation) TranslateStoryboard.Children[0];
private DoubleAnimation TranslateYAnimation => (DoubleAnimation) TranslateStoryboard.Children[1];
private readonly Random _random = new Random(DateTime.Now.Ticks.GetHashCode());

private Point NextRandomPosition()
{
    var areaX = (int) Math.Round(DisplayCanvas.ActualWidth - DisplayShape.ActualWidth);
    var areaY = (int) Math.Round(DisplayCanvas.ActualHeight - DisplayShape.ActualHeight);
    return new Point(_random.Next(areaX) + 1, _random.Next(areaY) + 1);
}

探索动画

由于我们期望元素从当前所在的位置开始动画，到我们指定的另一个随机位置，所以直接在 XAML 中指定 From 和 To 是一个艰难的行为。我们只好在 .xaml.cs 文件中指定。

WPF

在 WPF 中，如果我们没有指定动画的 From，那么动画将从当前值开始；如果我们没有指定动画的 To，那么动画将到当前值结束。从这个角度上说，似乎不设置 From 和 To 将导致动画保持在当前值不变，不会有动画效果。

但是，WPF 允许在动画进行中修改动画参数，于是我们可以直接开始动画，然后再动画进行中修改元素属性到目标值。

也就是说，可以这么写：

private void BeginStoryboard_Click(object sender, RoutedEventArgs e)
{
    TranslateStoryboard.Begin();

    var nextPosition = NextRandomPosition();
    TranslateTransform.X = nextPosition.X;
    TranslateTransform.Y = nextPosition.Y;
}

快速点击这个按钮看看，你会发现每次点击都可以立即从当前位置开始向新的目标位置动画。

快速点击动画

不过你应该注意到了一个坑——第一次并没有播放动画，而是直接跳到了目标位置；这是因为动画还没有保持住元素的位置。我们需要在初始化的时候播放一次动画；

private void OnLoaded(object sender, RoutedEventArgs e)
{
    TranslateStoryboard.Begin();
    TranslateStoryboard.Stop();
}

这样就解决了第一次动画不播放的问题。

现在，我们加上暂停按钮：

private void PauseStoryboard_Click(object sender, RoutedEventArgs e)
{
    TranslateStoryboard.Pause();
}

即便是中途有暂停，依然能够继续让动画朝新的目标位置动画。

快速点击动画

如果我们希望动画从一个新的起点开始，而不是从当前状态开始，则只需要在动画开始之前设置元素的位置即可：

private void BeginStoryboard2_Click(object sender, RoutedEventArgs e)
{
    MoveToRandomPosition();
    TranslateStoryboard.Begin();
    MoveToRandomPosition();

    void MoveToRandomPosition()
    {
        var nextPosition = NextRandomPosition();
        TranslateTransform.X = nextPosition.X;
        TranslateTransform.Y = nextPosition.Y;
    }
}

UWP

UWP 的情况就不如 WPF 那么灵活了。在 UWP 中，如果不给动画指定 To 值，那么动画根本就会直接朝 0 位置执行。

于是在动画执行之前，设置动画的 To 值不可避免：

private void BeginStoryboard_Click(object sender, RoutedEventArgs e)
{
    AnimateToRandomPosition();
    TranslateStoryboard.Begin();

    void Uwp_AnimateToRandomPosition()
    {
        var nextPosition = NextRandomPosition();
        TranslateXAnimation.To = nextPosition.X;
        TranslateYAnimation.To = nextPosition.Y;
    }
}

在这样的写法下，灵活性与 WPF 相当，但 WPF 中支持在动画没有播放的时候随时设置元素位置，而这种方式则不行（其值会被动画保持）。

完整的后台代码

public partial class StoryboardPage : Page
{
    public StoryboardPage()
    {
        InitializeComponent();
        Loaded += OnLoaded;
    }

#if !WINDOWS_UWP
    private Storyboard TranslateStoryboard => (Storyboard)FindResource("Storyboard.Translate");
#endif
    private DoubleAnimation TranslateXAnimation => (DoubleAnimation) TranslateStoryboard.Children[0];
    private DoubleAnimation TranslateYAnimation => (DoubleAnimation) TranslateStoryboard.Children[1];
    private readonly Random _random = new Random(DateTime.Now.Ticks.GetHashCode());

    private void OnLoaded(object sender, RoutedEventArgs e)
    {
        Loaded -= OnLoaded;
        TranslateStoryboard.Begin();
        TranslateStoryboard.Stop();
    }

    private void BeginStoryboard_Click(object sender, RoutedEventArgs e)
    {
        Uwp_AnimateToRandomPosition();
        TranslateStoryboard.Begin();
        MoveToRandomPosition();
    }

    private void BeginStoryboard2_Click(object sender, RoutedEventArgs e)
    {
        MoveToRandomPosition();
        Uwp_AnimateToRandomPosition();
        TranslateStoryboard.Begin();
        MoveToRandomPosition();
    }

    private void PauseStoryboard_Click(object sender, RoutedEventArgs e)
    {
        TranslateStoryboard.Pause();
    }

    [Conditional("WINDOWS_UWP")]
    private void Uwp_AnimateToRandomPosition()
    {
        var nextPosition = NextRandomPosition();
        TranslateXAnimation.To = nextPosition.X;
        TranslateYAnimation.To = nextPosition.Y;
    }

    [Conditional("WPF")]
    private void MoveToRandomPosition()
    {
        var nextPosition = NextRandomPosition();
        TranslateTransform.X = nextPosition.X;
        TranslateTransform.Y = nextPosition.Y;
    }

    private Point NextRandomPosition()
    {
        var areaX = (int) Math.Round(DisplayCanvas.ActualWidth - DisplayShape.ActualWidth);
        var areaY = (int) Math.Round(DisplayCanvas.ActualHeight - DisplayShape.ActualHeight);
        return new Point(_random.Next(areaX) + 1, _random.Next(areaY) + 1);
    }
}

总结

  1. 在 WPF 中，可以不通过 From 和 To 来指定动画的起始值和终止值；但如果真的不指定 From 和 To，需要提前播放一次动画以确保动画能保持住元素状态；
  2. 在 WPF 中，如果没有指定 From 和 To，那么动画结束后依然能直接为元素属性复制，且会立刻生效（正常情况下需要先清除动画）；
  3. 在 UWP 中，必须指定动画的 To 才能按照期望播放到目标值。
文章标签：
C#
前端开发
关键词：
wpf动画
wpf uwp
wpf设置
wpf设置动画
杰克.陈
目录
相关文章
mingupup
|
3月前
|
C#
WPF中动画教程（DoubleAnimation的基本使用）
WPF中动画教程（DoubleAnimation的基本使用）
mingupup
71 0
小王老师呀
|
2月前
|
算法 C# Windows
不可不知的WPF动画（Animation）
【9月更文挑战第19天】在 WPF（Windows Presentation Foundation）中，动画能为应用程序增添生动性和交互性。主要类型包括线性动画和关键帧动画，可针对依赖属性和自定义属性操作。触发方式有事件触发和自动触发，支持暂停、恢复及停止控制。合理使用这些功能并注意性能优化，可创建引人入胜的用户界面。
小王老师呀
50 7
土木林森
|
3月前
|
C# UED 开发者
WPF与性能优化：掌握这些核心技巧，让你的应用从卡顿到丝滑，彻底告别延迟，实现响应速度质的飞跃——从布局到动画全面剖析与实例演示
【8月更文挑战第31天】本文通过对比优化前后的方法，详细探讨了提升WPF应用响应速度的策略。文章首先分析了常见的性能瓶颈，如复杂的XAML布局、耗时的事件处理、不当的数据绑定及繁重的动画效果。接着，通过具体示例展示了如何简化XAML结构、使用后台线程处理事件、调整数据绑定设置以及利用DirectX优化动画，从而有效提升应用性能。通过这些优化措施，WPF应用将更加流畅，用户体验也将得到显著改善。
土木林森
242 1
土木林森
|
3月前
|
C# UED 开发者
WPF动画大揭秘：掌握动画技巧，让你的界面动起来，告别枯燥与乏味！
【8月更文挑战第31天】在WPF应用开发中，动画能显著提升用户体验，使其更加生动有趣。本文将介绍WPF动画的基础知识和实现方法，包括平移、缩放、旋转等常见类型，并通过示例代码展示如何使用`DoubleAnimation`创建平移动画。此外，还将介绍动画触发器的使用，帮助开发者更好地控制动画效果，提升应用的吸引力。
土木林森
194 0
土木林森
|
3月前
|
C# Windows 开发者
超越选择焦虑：深入解析WinForms、WPF与UWP——谁才是打造顶级.NET桌面应用的终极利器？从开发效率到视觉享受，全面解读三大框架优劣，助你精准匹配项目需求，构建完美桌面应用生态系统
【8月更文挑战第31天】.NET框架为开发者提供了多种桌面应用开发选项，包括WinForms、WPF和UWP。WinForms简单易用，适合快速开发基本应用；WPF提供强大的UI设计工具和丰富的视觉体验，支持XAML，易于实现复杂布局；UWP专为Windows 10设计，支持多设备，充分利用现代硬件特性。本文通过示例代码详细介绍这三种框架的特点，帮助读者根据项目需求做出明智选择。以下是各框架的简单示例代码，便于理解其基本用法。
土木林森
177 0
mingupup
|
3月前
|
存储 C# 数据格式
WPF动画教程（PointAnimationUsingPath的使用）
WPF动画教程（PointAnimationUsingPath的使用）
mingupup
48 0
李杰-@yd
|
6月前
|
C#
WPF —— 动画缩放变换
`ScaleTransform`用于二维x-y坐标系中对象的缩放，可沿X或Y轴调整。在故事板中，通过RenderTransform.ScaleX和ScaleY属性控制缩放。示例代码展示了如何设置按钮的RenderTransformOrigin、Background等属性，并通过LayoutTransform应用ScaleTransform。当鼠标进入按钮时，EventTrigger启动DoubleAnimation实现X和Y轴的缩放动画。最后，展示了如何将动画集成到自定义按钮样式中。
李杰-@yd
178 0
Rick_1/2
|
C#
WPF技术之动画系列-上下运动
本例子展现动画小球上下循环运动
Rick_1/2
221 0
游客ywxcp53cgkqwi
|
C#
WPF中给TextBox/TextBlock设置提示文本
WPF中给TextBox/TextBlock设置提示文本
游客ywxcp53cgkqwi
1240 0
WPF中给TextBox/TextBlock设置提示文本
游客ywxcp53cgkqwi
|
C#
WPF界面异常:未将对象引用设置到对象实例
WPF界面异常:未将对象引用设置到对象实例
游客ywxcp53cgkqwi
237 0