locked
How to Translate & Rotate an object...simultaneously RRS feed

  • Question

  • Hello,

    I have a problem I haven't been able to solve.
    I have a couple of objects in a WPF application that i need to Transform. I'm using C# (3.5) and the "System.Windows.Media.Animation" library - DoubleAnimation
    I can get my objects to Translate from point A to point B.
    I can get my objects to Rotate 360º (rotation central point is the objects central point)

    What i simply can't get to work is Translate an object from point A to point B and Rotate the object around itself while it's translating...
    (Imagine the planet Earth moves in a central line and not around the Sun. While it's moving it's also Rotating)

    Any help please (examples, demos, links, feedback, whatever...)?!

    Thanks in advance,
    SuperJB
    Thursday, March 18, 2010 9:41 AM

Answers

  • A TransformGroup can be used, e.g., in markup:

     

    <Grid

        xmlns       = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x     = "http://schemas.microsoft.com/winfx/2006/xaml">

        <Canvas>

            <Button Name="TargetElement" Width="100" Height="75" Content="Button">

                <Button.RenderTransform>

                    <TransformGroup>

                        <RotateTransform CenterX="75" CenterY="50" Angle="0" />

                        <TranslateTransform X="100" Y="100" />

                    </TransformGroup>

               </Button.RenderTransform>

     

                <Button.Triggers>

                    <EventTrigger RoutedEvent="FrameworkElement.Loaded">

                        <EventTrigger.Actions>

                            <BeginStoryboard>

                                <BeginStoryboard.Storyboard>

                                    <Storyboard Duration="0:0:2">

                                        <DoubleAnimation

                                            Storyboard.TargetProperty   = "(Button.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)"

                                            Storyboard.TargetName       = "TargetElement"

                                            By                          = "180"

                                        />

                                        <DoubleAnimation

                                            Storyboard.TargetProperty   = "(Button.RenderTransform).(TransformGroup.Children)[1].(TranslateTransform.X)"

                                            Storyboard.TargetName       = "TargetElement"

                                            By                          = "150"

                                        />

                                        <DoubleAnimation

                                            Storyboard.TargetProperty   = "(Button.RenderTransform).(TransformGroup.Children)[1].(TranslateTransform.Y)"

                                            Storyboard.TargetName       = "TargetElement"

                                            By                          = "150"

                                        />

                                    </Storyboard>

                                </BeginStoryboard.Storyboard>

                            </BeginStoryboard>

                        </EventTrigger.Actions>

                    </EventTrigger>

                </Button.Triggers>

            </Button>

        </Canvas>

    </Grid>

    • Proposed as answer by puckpuck Saturday, March 20, 2010 2:18 AM
    • Marked as answer by Linda Liu Monday, March 22, 2010 10:19 AM
    Thursday, March 18, 2010 4:39 PM