WPF 动画下降的文本块

Question

我正在 WPF 中制作一个小数学游戏，我有一些“下降的文本块”，其中包含您必须在它们到达窗口底部之前正确回答的乘法。

目前是这样的

我现在正在做的是，每个文本块都是一个自定义 WPF 控件，其中包含一个表示表达式的文本块和一个文本框，用户可以在其中输入该表达式的答案。这些是在 40x20 网格内生成的，我使用DispatcherTimer 将它们不断地向下移动，直到到达网格的末端。

这种方法有两个主要问题：

1. 下降的“效果”不是很平滑，很不稳定，我已经能够通过向下扩展网格和减少DispatcherTimer 滴答声的间隔来提高运动的流动性，但它是充其量只是一个创可贴解决方案，我仍然可以看出这个运动非常机械。
2. 另一个问题与第一个问题密切相关，每当这些下降表达式的文本框被聚焦时，下降会变得更糟，它真的会慢到爬行我猜重绘每个控件，同时专注于文本框严重降低了导致此问题的性能。

无论如何，正因为如此，我正在寻找一种替代方法，最好它必须易于使用并且易于与我当前的代码集成。

Answer 1

您可以使用画布并在 DispatcherTimer 中更改它们的位置。

在网站上抓取的样机样机，实现用于拖动对象。

void onDragDelta(object sender, DragDeltaEventArgs e)
        {
            Canvas.SetLeft(myThumb, Canvas.GetLeft(myThumb) + e.HorizontalChange);
            Canvas.SetTop(myThumb, Canvas.GetTop(myThumb) + e.VerticalChange);
        }

这是一个相关的问题：Here

这里是主要的可拖动控件文章：Here

Answer 2

我认为你应该使用“StoryBoard”和“Animation”来处理你的 UserControl 下降。 内置动画基于“计时器”系统，但它已经处理了所有问题，例如“如果尚未提交先前的更改，则不要将 3 次更改发布到屏幕”，或者“如果 UI 线程没有提交，则中止先前的位置渲染” '没有时间开始渲染它"。

所以，我会以编程方式生成“故事板”。 知道每个 DependencyProperty 都可以“动画化”是很有用的。

见：Using a Storyboard animation on a programatically-added control

这是我为具有“双”类型的属性设置动画的代码：

    /// <summary>
    /// Create a linear animation
    /// </summary>
    /// <param name="duration"></param>
    public void CreateDoubleLinearAnimation(DependencyObject element, string name, string property, double? valueFrom, double valueTo, TimeSpan timeSpan, Storyboard sb)
    {

        // --- Animation toute bête
        DoubleAnimation animation = new DoubleAnimation();
        animation.Duration = new Duration(timeSpan);
        animation.To = valueTo;
        if (valueFrom != null)
            animation.From = valueFrom.Value;
        animation.SetValue(Storyboard.TargetNameProperty, name);
        animation.SetValue(Storyboard.TargetPropertyProperty, new PropertyPath(property));

        sb.Children.Add(animation);
    }

调用示例：

Storyboard sb = new Storyboard();
CreateDoubleLinearAnimation(element, "myElement", "(UIElement.Opacity)", 0, 1, TimeSpan.FromSeconds(1), sb);

“属性”参数示例：

(Shape.StrokeThickness)
(UIElement.Opacity)
(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)

最好的问候，