制作动画队列

Question

我一直在尝试使用 DoubleAnimation class 制作一个椭圆以遵循给定的轨迹。到目前为止还不太好。

我定制了一个 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++);
        }

    }`

在此class中，我为坐标列表中的每个点添加了 2 个动画。 1 为 x 轴运动设置动画，1 为 y 轴运动设置动画。添加是这样的：

 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();

    }

我认为我的问题出在 AnimationQueue.Start() 方法中。该程序启动动画，但它只执行第一个动画。之后它停止了。我尝试使用 animation.Completed 事件处理程序但没有成功。

Answer 1

BeginAnimation 异步启动动画。我想这可能会有所帮助：

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]);
    }
}`

制作动画队列

Making a AnimationQueue

queue

wpf

ellipse

wpf-animation

doubleanimation