wpfqueueellipsewpf-animationdoubleanimation

Making a AnimationQueue


I have been trying to make a Ellipse to follow a given trajectory with the DoubleAnimation class. So far not too good.

I made a custom class AnimationQueue :

    private class AnimationQueue
    {
        private List<DoubleAnimation> animation1 ;
        private DependencyProperty property1;
        private bool running1;
        private List<DoubleAnimation> animation2;
        private DependencyProperty property2;
        private bool running2;
        private int curent;
        private UIElement element;

        public AnimationQueue(UIElement element , DependencyProperty property )
        {
            curent = -1;
            this.element = element;
            animation1 = new List<DoubleAnimation>();
            animation2 = new List<DoubleAnimation>();
            this.property1 = property;
        }

        public AnimationQueue(UIElement element, DependencyProperty property1 , DependencyProperty property2)
        {
            curent = -1;
            this.element = element;
            animation1 = new List<DoubleAnimation>();
            animation2 = new List<DoubleAnimation>();
            this.property1 = property1;
            this.property2 = property2;
        }

        public void queueAnimation(DoubleAnimation animation1, DoubleAnimation animation2)
        {

            animation1.Completed += (s, e) =>
            {
                running1 = false;
            };
            animation2.Completed += (s, e) =>
            {
                running2 = false;
            };

            this.animation1.Add(animation1);
            this.animation2.Add(animation2);


        }



        public void start(int i)
        {
            if (animation1.Count != animation2.Count)
                Console.WriteLine("Animation Queue not equal");
            else
            {
                if (i == animation1.Count)
                    Console.WriteLine("Animation finished");
                else if (i <= animation1.Count && i <= animation2.Count)
                {
                    element.BeginAnimation(property1, animation1[i]);
                    element.BeginAnimation(property2, animation2[i]);

                    if (running1 == false && running2 == false)
                    {
                        i++;
                        start(i);
                    }
                } 
            }
        }

        public void start()
        {
            curent = 0;
            element.BeginAnimation(property1, animation1[curent]);
            element.BeginAnimation(property2, animation2[curent]);

            if(running1 == false && running2 == false)
                start(curent++);
        }

    }`

In this class I add 2 animations for each point in the coordinate list . 1 to animate the x axis movement and 1 to anymate the y axis movement . The adding goes like this :

 public void StartCourse()
    {
        int i = 0;
        List<Point> coordinates = course.firstFuntion();
        while (coordinates.Count != i)
        {
            queue1.queueAnimation(new DoubleAnimation(coordinates[i].X, new Duration(TimeSpan.FromMilliseconds(500))),
                                   new DoubleAnimation(coordinates[i].Y, new Duration(TimeSpan.FromMilliseconds(500)))
                                 );
            i++;
        }
        queue1.start();

    }

My problem is , I believe , in the AnimationQueue.Start() method. The program stars the animation , however it only executes the first animation . After that it stops . I tried to make use of the animation.Completed Event Handler but to no success.


Solution

  • BeginAnimation starts animation asynchrously. I suppose this may help:

    private class AnimationQueue
    {
        private List<DoubleAnimation> animation1 ;
        private DependencyProperty property1;
        private bool running1;
        private List<DoubleAnimation> animation2;
        private DependencyProperty property2;
        private bool running2;
        private int curent;
        private UIElement element;
    
        public AnimationQueue(UIElement element , DependencyProperty property )
        {
            curent = -1;
            this.element = element;
            animation1 = new List<DoubleAnimation>();
            animation2 = new List<DoubleAnimation>();
            this.property1 = property;
        }
    
        public AnimationQueue(UIElement element, DependencyProperty property1 , DependencyProperty property2)
        {
            curent = -1;
            this.element = element;
            animation1 = new List<DoubleAnimation>();
            animation2 = new List<DoubleAnimation>();
            this.property1 = property1;
            this.property2 = property2;
        }
    
        public void queueAnimation(DoubleAnimation animation1, DoubleAnimation animation2)
        {
            this.animation1.Add(animation1);
            this.animation2.Add(animation2);
    
            animation1.Completed += (s, e) =>
            {
                if (this.animation1.Contains(animation1))
                {
                    int index1 = this.animation1.IndexOf(animation1);
                    if (index1 + 1 < this.animation1.Count)
                    {
                        element.BeginAnimation(property1, animation1[index1 + 1]);
                    }
                }
            };
            animation2.Completed += (s, e) =>
            {
                if (this.animation2.Contains(animation2))
                {
                    int index2 = this.animation2.IndexOf(animation2);
                    if (index2 + 1 < this.animation2.Count)
                    {
                        element.BeginAnimation(property2, animation2[index2 + 1]);
                    }
                }
            };
        }
    
        public void start()
        {
            curent = 0;
            element.BeginAnimation(property1, animation1[curent]);
            element.BeginAnimation(property2, animation2[curent]);
        }
    }`