Wpf一个简单的物体移动动画

[html]
<Window x:Class="Wpfdemo1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" Loaded="Window_Loaded" MouseLeftButtonDown="Window_MouseLeftButtonDown">
    <Canvas x:Name="body">



    </Canvas>
</Window>

[csharp]
/// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        Ellipse ell;

        public MainWindow()
        {
            InitializeComponent();

            ell = new Ellipse();

            ell.Fill = new SolidColorBrush(Colors.Red);
            ell.Width = 50;
            ell.Height = 50;

            body.Children.Add(ell);

            Canvas.SetLeft(ell, 100);
            Canvas.SetTop(ell,100);

        }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {

        }

        private void Window_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            moveTo(e.GetPosition(body));
        }

        private void moveTo(Point deskPoint)
        {
            //Point p = e.GetPosition(body);

            Point curPoint = new Point();
            curPoint.X = Canvas.GetLeft(ell);
            curPoint.Y = Canvas.GetTop(ell);

            double _s = System.Math.Sqrt(Math.Pow((deskPoint.X - curPoint.X), 2) + Math.Pow((deskPoint.Y - curPoint.Y), 2));

            double _secNumber = (_s / 1000) * 500;

            Storyboard storyboard = new Storyboard();

            //创建X轴方向动画

            DoubleAnimation doubleAnimation = new DoubleAnimation(

              Canvas.GetLeft(ell),

              deskPoint.X,

              new Duration(TimeSpan.FromMilliseconds(_secNumber))

            );
            Storyboard.SetTarget(doubleAnimation, ell);
            Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(Canvas.Left)"));
            storyboard.Children.Add(doubleAnimation);

            //创建Y轴方向动画

            doubleAnimation = new DoubleAnimation(
              Canvas.GetTop(ell),
              deskPoint.Y,
              new Duration(TimeSpan.FromMilliseconds(_secNumber))
            );
            Storyboard.SetTarget(doubleAnimation, ell);
            Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(Canvas.Top)"));
            storyboard.Children.Add(doubleAnimation);

            //动画播放

            storyboard.Begin();
        }
    }

通过动画析storyboard实现元素移动功能。

补充：web前端 , HTML 5 ,