WPF弹性模拟动画

胡克定律：F=-kd

DispatcherTimer 帧计时器;

private void Window_ContentRendered(object sender, EventArgs e)

{

    帧计时器 = new DispatcherTimer();

    帧计时器.Tick += new EventHandler(帧计时器_Tick);

    帧计时器.Interval = TimeSpan.FromMilliseconds(10);

    帧计时器.Start();

}



double x = 0;

double y = 0;



void 帧计时器_Tick(object sender, EventArgs e)

{

    var X轴弹力 = (X - 目标位置.X) * -弹性系数;

    x += X轴弹力;

    x *= 1-流体摩擦力;

    X += x;

    var Y轴弹力 = (Y - 目标位置.Y) * -弹性系数;

    y += Y轴弹力;

    y *= 1 - 流体摩擦力;

    Y += y;

}

复制代码

计时器每次触发时，都将进行位置计算，并调整X、Y的值。

其中的目标位置是在鼠标单击时指定的，为此还要为Window增加PreviewMouseLeftButtonDown事件处理：

private void Window_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

    var p = e.GetPosition(this);

    目标位置 = new Point(p.X - Ball.ActualWidth / 2, p.Y - Ball.ActualHeight / 2);

}

复制代码

在此事件处理中，将目标位置设为鼠标当前坐标减去Ellipse元素的实际尺寸的一半，这样在移动完成后，球的中心点就位于鼠标的点击处了。

PS：将PreviewMouseLeftButtonDown事件改为MouseLeftButtonDown也是可行的，但是窗体内的控件如果截获并处理了点击事件，那么将不会引发球体移动。

现在编译和运行后，显示的程序界面效果如下：
通过点击可以使球移动，调整两个参数可以看到不同的移动效果。

你可以通过下面这个视频大略了解此示例的效果，但它与实际的流畅度有些差距，程序中的帧频应当是每秒100帧的，而视频只有每秒25帧。