Question

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.

Answer 1

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.