WPF抖动与TranslateTransform和Canvas.SetLeft

本文关键字：Canvas SetLeft TranslateTransform 抖动 WPF | 更新日期: 2023-09-27 18:04:34

我在移动控件的X, Y坐标时遇到了"抖动"的问题。基本上，我让动画以两种不同的方式工作:1)X属性的TranslateTransform，以及2)调用Canvas.SetLeft的Timer。这两种方法都会导致图像移动，但不是平滑的。

XAML: 

<Canvas Margin="0" Name="CanvasContainer">
    <Canvas Margin="0" Name="FirstCanvas" Background="White">
        <Image Name="FirstImage" Opacity="1" Margin="0,0,0,0" Canvas.Left="0" Canvas.Top="0" Source="someImage.png" />
    </Canvas>
    <Canvas Margin="0" Name="SecondCanvas" Background="DarkOrange">
        <Image Name="SecondImage" Opacity="1" Margin="0,0,0,0"   Canvas.Left="0" Canvas.Top="0" Source="anotherImage.png" />
    </Canvas>
</Canvas>

TranslateTransform: 

    private void StartMovement(double startX, double endX, double milliseconds = 1000)
    {
        GuiDispatcher.Invoke(DispatcherPriority.Normal, new Action<Canvas, double, double, double>(MoveTo), Canvas, startX, endX, milliseconds);
    }
    private void MoveTo(Canvas canvas, double startX, double endX, double milliseconds)
    {
        canvas.RenderTransform = new TranslateTransform();
        var animation = new DoubleAnimation(startX, endX, TimeSpan.FromMilliseconds(milliseconds));
        canvas.RenderTransform.BeginAnimation(TranslateTransform.XProperty, animation);
    }

是否有更好的方法来完成这一点，或者我有什么设置错误?

WPF抖动与TranslateTransform和Canvas.SetLeft

对于WPF中的动画来说，这两种方法通常都很好。如果图像移动不流畅，我有几个问题。

  1. 图片有多大?
    • 大的图像需要更长的渲染时间，因此也不会有动画效果。
  2. 您是否以其原始分辨率渲染图像?
    • 像大图像一样，缩放会减慢渲染速度，因为它需要更长的时间来计算渲染像素。
    3. 你的显卡有多好?你的司机是最新的吗?
      WPF使用你的显卡来渲染，除非它不够好。如果必须退回到软件渲染，一切都会变得迟缓。
  3. 图像移动了多远?
    • 图像移动得越远，每秒绘制的帧数就越少，这可能会导致动画看起来不稳定。

如果是帧率问题，因为图像移动得太远太快，你可以通过设置Timeline.DesiredFrameRate属性来增加所需的帧率:

Timeline.SetDesiredFrameRate(animation, 120);;

在WPF中，默认的目标帧率是60，并不能保证。但是这个附加属性的主要用途之一是减少水平撕裂，所以它可能会有所帮助。

相关文章：