TranslateTransform 和 Canvas.SetLeft 引起的 WPF 抖动

发布于 2024-11-28 13:18:57 字数 1364 浏览 0 评论 0原文

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

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);
    }

是否有更好的方法来完成此任务,或者我是否设置错误?任何帮助将不胜感激。

I'm running into a problem of "jitters" when moving the X, Y coordinates of controls. Basically, I got an animation to work two different ways: 1) TranslateTransform of the X property, and 2) A Timer that calls Canvas.SetLeft. Both of which cause the image to move, but not smoothly.

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);
    }

Is there a better method for accomplishing this, or do I have something set up wrong? Any help would be appreciated.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

恏ㄋ傷疤忘ㄋ疼 2024-12-05 13:18:57

这两种方法通常都适用于 WPF 中的动画。如果图像移动不顺畅,我有几个问题。

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

如果由于图像移动得太远太快而导致帧速率问题,您可以通过设置 Timeline.DesiredFrameRate 属性:

Timeline.SetDesiredFrameRate(animation, 120);;

在 WPF 中,默认目标帧率为 60,并且没有意味着有保证。但这种附加属性的主要用途之一是减少水平撕裂,因此它可能会有所帮助。

Either of those methods are generally fine for animations in WPF. If the image isn't moving smoothly, I have a few of questions.

  1. How big is the image?
    • Large images take longer to render, and will therefore not animate as well.
  2. Are you rendering the image at its native resolution?
    • Like large images, scaling can slow down the render, as it takes longer to calculate the rendered pixels.
  3. How good is your graphics card? And are your drivers up to date?
    • WPF uses your graphics card to render, unless it isn't good enough. If it has to fallback to software rendering, everything gets sluggish.
  4. How far is the image moving?
    • The further the image moves, the fewer frames will be drawn per second, which could leave to the appearance of the animation being jerky.

If it is a framerate issue because the image is moving too far too quickly, you can increase the desired framerate by setting the Timeline.DesiredFrameRate property:

Timeline.SetDesiredFrameRate(animation, 120);;

In WPF, the default target framerate is 60, and is by no means guaranteed. But one of the primary uses for this attached property is to decrease horizontal tearing, so it might help.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文