Translate and scale animation

I have a wpf application and image inside a canvas. The image is placed in 0,0.

I need to animate the image moving from 0,0 to 500,200 and in the same time growing (I like to make an effect like coming from f开发者_StackOverflow社区ar to near).

If I do this:

        TranslateTransform ttx = new TranslateTransform();
        TranslateTransform tty = new TranslateTransform();

        DoubleAnimationUsingKeyFrames dax = new DoubleAnimationUsingKeyFrames();
        dax.KeyFrames.Add(new LinearDoubleKeyFrame(500, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(1))));

        DoubleAnimationUsingKeyFrames day = new DoubleAnimationUsingKeyFrames();
        day.KeyFrames.Add(new LinearDoubleKeyFrame(200, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(1))));

        TransformGroup tg = new TransformGroup();
        tg.Children.Add(ttx);
        tg.Children.Add(tty);

        krug.RenderTransform = tg;

        ttx.BeginAnimation(TranslateTransform.XProperty, dax);
        tty.BeginAnimation(TranslateTransform.YProperty, day);

And this works fine. It animates the translation of the image "krug" from 0,0 to 500,200.

But when I add logic for zooming the image while translating like this:

        ScaleTransform zoom = new ScaleTransform();
        DoubleAnimationUsingKeyFrames zoomTimeline = new DoubleAnimationUsingKeyFrames();
        zoomTimeline.KeyFrames.Add(new LinearDoubleKeyFrame(2, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(1))));
        tg.Children.Add(zoom);
        zoom.BeginAnimation(ScaleTransform.ScaleXProperty, zoomTimeline);
        zoom.BeginAnimation(ScaleTransform.ScaleYProperty, zoomTimeline);

Then the image does not stop to 500, 200 but goes more far. If the zoom factor is bigger, the translation goes more future. How can I control the animation to stop at 500,200 ?

The problem you run into when combining scale and translate transforms is that it will scale the translate transform from the point of origin(ScaleTransform.CenterX, ScaleTransform.CenterY)

For example, if you want to slide it to the right by 50, and double it's scale, it will actually move a net distance of 100.

Try animating the ScaleTransform.CenterX and ScaleTransform.CenterY to match your translate transform. I believe that would let you scale on the fly like you want.

Put the animations in a single storyboard and set the duration of the storyboard to control the length of the animations.

Then start the storyboard.

I found a solution. I created separate user control that only does ScaleTransform. Then I apply TranslateTransform on the user control.