c# Animation, using TranslateTransform and DoubleAnimation

Question

I have a simple map and a square that I would like to move from point A to D, through B and C. I've declared a method Animate:

    public void Animate(double[] FirstPoint, double[] SecondPoint, Image img)
    {
        double x1 = FirstPoint[0];
        double x2 = SecondPoint[0];

        double y1 = FirstPoint[1];
        double y2 = SecondPoint[1];

        TranslateTransform trans = new TranslateTransform();
        img.RenderTransform = trans;
        DoubleAnimation anim1 = new DoubleAnimation(y1, y2, TimeSpan.FromSeconds(1));
        DoubleAnimation anim2 = new DoubleAnimation(x1, x2, TimeSpan.FromSeconds(1));
        trans.BeginAnimation(TranslateTransform.YProperty, anim1);
        trans.BeginAnimation(TranslateTransform.XProperty, anim2);
    }

The main problem is that when I use those method like this:

obj.Animate(obj.A, obj.B, Car);
obj.Animate(obj.B, obj.C, Car);
obj.Animate(obj.C, obj.D, Car);

...there's animation shown only from point C to D. When I added a MessageBox.Show to Animate method, it displayed the animation properly.

I feel that I might not fully understand the concept behind using those classes to animate objects. Any thoughts?

Answer 1

You can use this code as the sample for understanding, how to work with multiple animations.

This is full code for MainWindow.xaml.cs.

public partial class MainWindow : Window
{
    private const string CarTransform = "CarTransform";
    private Image _car;

    public MainWindow()
    {
        InitializeComponent();
        Loaded += MainWindow_Loaded;
    }

    void MainWindow_Loaded(object sender, RoutedEventArgs e)
    {
        Loaded -= MainWindow_Loaded;
        // create and add Car image to LayoutRoot grid
        _car = new Image();
        _car.Source = new BitmapImage(new Uri("/car-icon-hi.png", UriKind.Relative));
        _car.Width = 64;
        _car.Height = 64;
        _car.HorizontalAlignment = System.Windows.HorizontalAlignment.Left;
        _car.VerticalAlignment = System.Windows.VerticalAlignment.Top;
        _car.Margin = new Thickness(5);
        _car.RenderTransform = new TranslateTransform();
        LayoutRoot.Children.Add(_car);
    }

    private DoubleAnimation CreateAnimationFor(double from, double to, TimeSpan? beginTime, string targetName, DependencyProperty propertyPath)
    {
        DoubleAnimation da = new DoubleAnimation();
        da.From = from;
        da.To = to;
        da.Duration = new Duration(TimeSpan.FromMilliseconds(1000));
        if (beginTime != null)
            da.BeginTime = beginTime;

        Storyboard.SetTargetName(da, targetName);
        Storyboard.SetTargetProperty(da, new PropertyPath(propertyPath));

        return da;
    }

    private void StartAnimationClick(object sender, RoutedEventArgs e)
    {
        TranslateTransform _trans = _car.RenderTransform as TranslateTransform;

        this.RegisterName(CarTransform, _trans); // register name for TranslateTransform instance, this action is needed for working a Storyboard with multiple animations

        Storyboard sb = new Storyboard();
        // from A to B
        sb.Children.Add(CreateAnimationFor(0, 100, null, CarTransform, TranslateTransform.XProperty));
        sb.Children.Add(CreateAnimationFor(0, 0, null, CarTransform, TranslateTransform.YProperty));
        // from B to C
        sb.Children.Add(CreateAnimationFor(100, 100, TimeSpan.FromSeconds(1), CarTransform, TranslateTransform.XProperty));
        sb.Children.Add(CreateAnimationFor(0, 100, TimeSpan.FromSeconds(1), CarTransform, TranslateTransform.YProperty));
        // from C to D
        sb.Children.Add(CreateAnimationFor(100, 300, TimeSpan.FromSeconds(2), CarTransform, TranslateTransform.XProperty));
        sb.Children.Add(CreateAnimationFor(100, 250, TimeSpan.FromSeconds(2), CarTransform, TranslateTransform.YProperty));
        sb.Begin(this);
    }
}

Result of this code: