WPF中的生涩动画

Question

我在WPF中有一个生涩的动画，我的WPF格式如下：

1280x800窗口包含一个2400x7 **网格，分为3列。

• 第1列是* width
• 第2列是148宽度
• 第3列是* width

这允许我使用动画将网格的边距变为左侧的〜-1000，使左侧列离开屏幕，将中间列移动到最右侧，然后将最右侧的列平移到屏幕上（想想它就像一个2页的平移设计。）

这一切都很棒，但是当我向左/向右滑动时，我的屏幕组件以不同的速度动画，有没有办法基本上双重缓冲我的整个绘图空间并将它们全部放在一起？或者这违反了WPF的精神。

Answer 1

我已经检查了您的代码，可以验证有趣的转换。但是，动画只有在向右移动时才会滞后。

当我用带有彩色边框的WebBrowser替换时，滞后就消失了。

所以结论是这里的问题是外部托管视觉的缓慢呈现。 WebBrowser是一个互操作ui元素，继承自HwndHost。

所以它绝对与XAML没有任何关系，我认为你会坚持使用它的性能。

Answer 2

另一种调查方法：

使用

代替XAML中的故事板

CompositionTarget.Rendering

动画事件（根据已用时间更改动画属性的值）。 可能，用

完成事件处理程序

thatBigGrid.UpdateLayout();

保证金是影响布局的属性。当在动画期间更改网格边距时，排列功能将排队，执行，并且内部每个Grid子元素的排列位置将在循环中更新。如果下一帧的渲染在此过程的中间开始，则一些元素将显示在新位置，一些元素将显示在旧位置 - 导致看起来不稳定。

如果这是真正发生的事情，解决方案是手动控制渲染事件并确保在绘制之前完全更新布局。

Answer 3

简单的缓冲对这个问题无济于事，因为似乎滞后不在图形中，而是在动画期间更新不同元素的属性背后的逻辑。以下应该有所帮助：

• 点击按钮，将整个网格渲染为RenderTargetBitmap。
• 在网格上的某个矩形上绘制结果图像（RenderTargetBitmap继承自BitmapSource）。
• 隐藏实际网格。
• 动画位图，将隐藏网格移动到新位置
• 显示网格
• 隐藏位图

至于WPF的精神，可以称之为必要的邪恶。您可以注意到在滚动期间WPF中的文本呈现如何发生变化，例如 - 使用RenderTargetBitmap并不会更糟。

免责声明：我没有尝试重现问题也没有阅读XAML，但上述方法自然避免了矢量图形或托管元素的所有问题。