locked
Making a moving object animation using C# code RRS feed

  • Question

  • Hi, I'm trying to make a program where there's an object (an ellipse) on the screen at a set starting position, and when I click somewhere on the screen it gets the position of the click, and the object moves to that position.

    The problem I'm having is that I want the object to actually move there, not just have its position automatically set at the same position as the mouse. I want an animation that will have the object get to that position while moving at a set velocity. How might I be able to do this?

    Thank you for any help.

    Thursday, August 12, 2010 6:17 PM

Answers

  • Hi!

    I've made a very simple example for you. First of all i made the ellipse in XAML, and put it in a canvas so that I can work with the Canvas.Top and Canvas.Left properties for the animation.

    <Canvas Name="canvas"  Grid.Row="2" MouseLeftButtonDown="Canvas_MouseLeftButtonDown" Width="1920" Height="800" Background="White">
    <Ellipse Name="ellipseToMove" Canvas.Left="400" Canvas.Top="100" Fill="Red" Width="50" Height="50">
    </Ellipse>
    </Canvas>


    Just make the ellipse the way you want and put it at desired position in the canvas. Then in the code behind under the MouseLeftButtonDown-event you define the animation.

    private void Canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
            {
                double mousePositionX = e.GetPosition(canvas).X;
                double mousePositionY = e.GetPosition(canvas).Y;
    
                //Defines the X-axis animation
                DoubleAnimation animationX = new DoubleAnimation();
                animationX.To = mousePositionX;
                Storyboard.SetTarget(animationX, ellipseToMove);
                Storyboard.SetTargetProperty(animationX, new PropertyPath("(Canvas.Left)"));
    
                //Defines the Y-axis animation
                DoubleAnimation animationY = new DoubleAnimation();
                animationY.To = mousePositionY;
                Storyboard.SetTarget(animationY, ellipseToMove);
                Storyboard.SetTargetProperty(animationY, new PropertyPath("(Canvas.Top)"));
    
                Storyboard storyboard = new Storyboard();
    
                storyboard.Children.Add(animationX);
                storyboard.Children.Add(animationY);
                storyboard.Begin();
    }


    First is to get the position of the click in the canvas wich will give you the X and Y positions. Then just define the animations and add a storyboard. Finally start the storyboard. Notice that the animationX.To-property is the one who sets the new position.

    There is a lot of ways to "pimp" your animation, and a good way to start is here https://www.silverlight.net/learn/quickstarts/animations/

    Please mark the answer if this helped you!!

    Best regards //K

    Friday, August 13, 2010 10:00 AM

All replies

  • Hi!

    I've made a very simple example for you. First of all i made the ellipse in XAML, and put it in a canvas so that I can work with the Canvas.Top and Canvas.Left properties for the animation.

    <Canvas Name="canvas"  Grid.Row="2" MouseLeftButtonDown="Canvas_MouseLeftButtonDown" Width="1920" Height="800" Background="White">
    <Ellipse Name="ellipseToMove" Canvas.Left="400" Canvas.Top="100" Fill="Red" Width="50" Height="50">
    </Ellipse>
    </Canvas>


    Just make the ellipse the way you want and put it at desired position in the canvas. Then in the code behind under the MouseLeftButtonDown-event you define the animation.

    private void Canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
            {
                double mousePositionX = e.GetPosition(canvas).X;
                double mousePositionY = e.GetPosition(canvas).Y;
    
                //Defines the X-axis animation
                DoubleAnimation animationX = new DoubleAnimation();
                animationX.To = mousePositionX;
                Storyboard.SetTarget(animationX, ellipseToMove);
                Storyboard.SetTargetProperty(animationX, new PropertyPath("(Canvas.Left)"));
    
                //Defines the Y-axis animation
                DoubleAnimation animationY = new DoubleAnimation();
                animationY.To = mousePositionY;
                Storyboard.SetTarget(animationY, ellipseToMove);
                Storyboard.SetTargetProperty(animationY, new PropertyPath("(Canvas.Top)"));
    
                Storyboard storyboard = new Storyboard();
    
                storyboard.Children.Add(animationX);
                storyboard.Children.Add(animationY);
                storyboard.Begin();
    }


    First is to get the position of the click in the canvas wich will give you the X and Y positions. Then just define the animations and add a storyboard. Finally start the storyboard. Notice that the animationX.To-property is the one who sets the new position.

    There is a lot of ways to "pimp" your animation, and a good way to start is here https://www.silverlight.net/learn/quickstarts/animations/

    Please mark the answer if this helped you!!

    Best regards //K

    Friday, August 13, 2010 10:00 AM
  • Thank you so much!

    I've been experimenting with different things until I got your reply. I never managed to make it work on my own, though I do feel kind of proud of myself for crashing my browser with an application. First time I've ever done that.


    Thank you for the tutorial as well!

    Friday, August 13, 2010 1:34 PM