尝试创建动画时滞后

Question

I'm trying to create a falling ball with some physics logic, When I launch the program the ball moves in a laggy and unexpected way.

I'm using a DispatcherTimer class to draw the ball every frame.

this is the code

        private void Draw(MyEllipse s)
        {
            var h = Canvas.GetTop(s.Ellipse);
            if (h >= cnvs.ActualHeight) //reachs the bottom
            {
                s.Velocity = s.Velocity * -1;
                s.YLoc = cnvs.ActualHeight - 1;

            }
            else //go down
            {
                s.YLoc = s.YLoc + s.Velocity;
                s.Velocity += PhysicsClass.Gravity;
            }
        }

My DispatcherTimer:

        private DispatcherTimer SetTimer()
        {
            var timer = new DispatcherTimer();
            timer.Interval = TimeSpan.FromMilliseconds(16);
            timer.Start();
            return timer;
        }

Properties of MyElipse

       private Ellipse ellipse;
        public Ellipse Ellipse
        {
            get { return ellipse; }
            private set { ellipse = value; }
        }

        public double XLoc
        {
            get { return Canvas.GetLeft(Ellipse); }
            set { Canvas.SetLeft(Ellipse, value); }
        }


        public double YLoc
        {
            get { return Canvas.GetTop(Ellipse); }
            set { Canvas.SetTop(Ellipse, value); }
        }


        public double Velocity { get; set; }

Could it be that wpf cannot render quick enough?

Answer 1

好的，我通过像这样添加到 dispatcherTimer 优先级来修复它

var timer = new DispatcherTimer(DispatcherPriority.Send);

Answer 2

Here's an alternative implementation.

This is a quick and dirty proof of concept.

Mainwindow:

        SizeToContent="WidthAndHeight" 
        ContentRendered="Window_ContentRendered"
        >
    <Window.DataContext>
        <local:MainWindowViewmodel/>
    </Window.DataContext>
    <Grid>
        <Canvas x:Name="canvas"  Height="800" Width="800">
            <Ellipse Height="20" Width="20" Fill="Blue"
                     Canvas.Left="{Binding X}"
                     Canvas.Top="{Binding Y}"
                     />
        </Canvas>
    </Grid>
</Window>

Very hacky start of thread:

    private void Window_ContentRendered(object sender, EventArgs e)
    {
        var mvm = this.DataContext as MainWindowViewmodel;
        mvm.SpinUp();
    }

Viewmodel ( prism core nuget ).

public class MainWindowViewmodel : BindableBase
{
    private double x = 200;
    public double X
    {
        get => x;
        set => SetProperty(ref x, value, nameof(X));
    }
    private double y = 0;
    public double Y
    {
        get => y;
        set => SetProperty(ref y, value, nameof(Y));
    }
    private const double MAX_HEIGHT = 790;
    private double speed = 0;
    private double acceleration = 0.0982;
    private async void animateBall()
    {
        while(1==1)
        {
            while (y < MAX_HEIGHT)
            {
                speed += acceleration;
                Y += speed;
                await Task.Delay(20);
            }
            Y = 0;
            await Task.Delay(1000);
            speed = 0;
        }
    }
    public void SpinUp()
    {
        new Thread(() =>
        {
            animateBall();
        }).Start();
    }
}

I'm using async await rather than dispatcher timer. This should give more consistent timings since tye timer used is more precise than dispatvher timer. It's also easier to read.

Note that the binding value change notification is automatically marshalled to the ui thread.

I've hard coded some stuff you'd want to calculate once like the gravity acceleration.

As I mentioned above this is pretty dirty code - but it gives reasonably smooth results. The ball kind of hangs up back at the top each repetition due to that 1 seconds await.