How to: Move a circle along the circumference of another circle?

Question

1.00/5 (1 vote)

See more:

I need to move a circle along the circumference of another circle that is running a RotateTransform. The first circle can be rotated in place, about its center, with an angular offset passed to the animation routine. The second circle must simultaneously follow the rotation of the first circle, with its center tracing the path of the first circle's circumference at the same angular rate the first circle is rotating. The second circle may optionally execute its own RotateTransform during this operation as well. I have been playing with MatrixAnimationUsingPath with no success. I'm new to WPF as well.

Posted 31-Mar-14 11:58am

LEastburn

Add a Solution

Comments

Sergey Alexandrovich Kryukov 31-Mar-14 18:18pm

If, instead "playing with", you could sit down with a piece of paper and do elementary-school level calculations, you would solve this problem in no time. Please try it, and, if you face any problems, show us what have you tried.
—SA

LEastburn 31-Mar-14 19:13pm

Not sure why you feel the necessity to insult. Either offer something useful or don't. I said I'm new to WPF but I have done this with WinForms, so the elementary concepts are not an issue. My question has to do with which WPF animation methods are pertinent.

Sergey Alexandrovich Kryukov 31-Mar-14 19:47pm

What do you call insult? The suggestion to solve the problem yourself? Okay, this is the same very RotateTransform. It sounds like you can do it (you can animate any transform). All you need it to calculate parameters of such transform. Also note that rotation of a circle around its own center transforms a circle to itself. Does it make sense now?

—SA

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeHawkz · Answer 1 · 2014-04-01T15:01:00

Hi LEastburn,

Create a WPF application, open up the main form, put this inside your XAML. You may want to have the design view and the XAML view side by side.

XML

<Canvas x:Name="LayoutRoot" Background="AliceBlue">
    <Ellipse Height="150" Width="150" Canvas.Top="275" Canvas.Left="250" Stroke="LightSlateGray" StrokeThickness="2" />
    <Ellipse Height="150" Width="150" Canvas.Top="275" Canvas.Left="100" Stroke="LightSlateGray" StrokeThickness="2">
        <Ellipse.RenderTransform>
            <RotateTransform CenterX="225" CenterY="75" Angle="120" />
        </Ellipse.RenderTransform>
    </Ellipse>
</Canvas>

Try changing the 'Angle' property of the 'RotateTransform' object of the second circle. You'll see it moves along the circumference. So what SA is 'trying' to tell you is, do this calculation in your application. There are couple of things you should remember.
1. Find the center of the other circle relative to the circle you want to rotate and set it to 'CenterX' and 'CenterY' properties of the RotateTranform
2. 'CenterX' and 'CenterY' must be specified relative to the circle in which they belong to. I.e. it's the distance from top-left corner of the circle, not the Canvas.
3. Since you want to move the circle along the circumference, do the necessary math and place it adjacent to the other circle.

After that all you have to do is, change the 'Angle' in RotateTransform or animate it, it will move around the circle.

Hope this helps, Cheers