具有TranslateTransform和Canvas.SetLeft的WPF抖动 [英] WPF Jitters with TranslateTransform and Canvas.SetLeft

问题描述

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

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:

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.

推荐答案

对于WPF中的动画，这些方法通常都适用.如果图像移动不平稳，我有几个问题.

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. 图片有多大?
   • 大图像需要更长的渲染时间，因此也不会设置动画.

1. How big is the image?
   • Large images take longer to render, and will therefore not animate as well.

• 就像大图像一样，缩放比例会降低渲染速度，因为计算渲染像素需要更长的时间.

• WPF使用您的图形卡进行渲染，除非效果不够好.如果必须回退到软件渲染，一切都会变慢.

• 图像移动得越远，每秒绘制的帧就会越少，这可能会使动画的外观变得生涩.

如果由于图像移动太快而造成帧速率问题，则可以通过设置

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

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

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.

这篇关于具有TranslateTransform和Canvas.SetLeft的WPF抖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！