基于帧的动画

基于帧的动画是什么呢！

它是要为静态的CompositionTarger.Rendering事件关联事件处理程序，一旦关联 这个处理程序，WPF就开始不断地调用这个事件处理程序，WPF将每秒调用60次。当动画 结束后，分离事件处理程序。首先要创建实体，创建一个椭圆，设置椭圆颜色，设置椭圆的宽，设置椭圆的高，设置椭圆位置，设置椭圆位置，将创建出来的椭圆加入到canvas面板中，再实例化EllipseInfo，然后将创建好的EllipseInfo加入到listEllipse集合中。

                

      后台代码展示：

        public class EllipseInfo

        {

            public Ellipse Ellipse { get; set; }

            public double VelocityY { get; set; }

 

            public EllipseInfo(Ellipse _ellipse,double _velocityY)

            {

                Ellipse = _ellipse;

                VelocityY = _velocityY;

            }

        }

        private List<EllipseInfo> listEllipse = new List<EllipseInfo>();         

private double acclerationY = 0.1;

        private int minStartingSpeed = 1;

        private int maxStartingSpeed = 50;        

private double speedRatio = 0.1;

        private int minEllipses = 2500;          

private int maxEllipses = 2500;         

private int ellipseRadius = 10;         

private bool rendering = false;

 

        public void CompositionTarget_Rendering(object sender, EventArgs e)

        {

            if (listEllipse.Count == 0)

            {

                int halfCanvasWidth = (int)canvas.ActualWidth / 2;

                Random random = new Random();

                int ellipseCount = random.Next(minEllipses, maxEllipses + 1);

                for (int i = 0; i < ellipseCount; i++)

                {

                    Ellipse ellipse = new Ellipse();              

                    ellipse.Fill = new SolidColorBrush(Colors.LimeGreen);

                    ellipse.Width = ellipseRadius;

                    ellipse.Height = ellipseRadius;

                    Canvas.SetLeft(ellipse, halfCanvasWidth + random.Next(-halfCanvasWidth, halfCanvasWidth));

                    Canvas.SetTop(ellipse, 0);

                    canvas.Children.Add(ellipse);

                    EllipseInfo info = new EllipseInfo(ellipse, speedRatio * random.Next(minStartingSpeed, maxStartingSpeed));

                    listEllipse.Add(info);

                }

            }

            else

            {

                for(int i = listEllipse.Count - 1; i >= 0; i--)

                {

                    EllipseInfo info = listEllipse[i];

                    double top = Canvas.GetTop(info.Ellipse);

                    Canvas.SetTop(info.Ellipse, top + 1 * info.VelocityY);

                    if (top >= canvas.ActualHeight - ellipseRadius * 2 - 10)

                    {

                        listEllipse.Remove(info);

                    }

                    else

                    {

                        info.VelocityY += acclerationY;

                    }

                    if (listEllipse.Count == 0)

                    {

                        StopRendering();

                    }

                }

            }

        }

        private void StopRendering()

        {

            CompositionTarget.Rendering -= CompositionTarget_Rendering;

            rendering = false;

        }

        private void btnStart_Click(object sender, RoutedEventArgs e)

        {

            if (rendering == false)

            {

                listEllipse.Clear();

                canvas.Children.Clear();

                CompositionTarget.Rendering += CompositionTarget_Rendering;

                rendering = true;

            }

        }

        private void btnStop_Click(object sender, RoutedEventArgs e)

        {

            StopRendering();

  }

原图：

效果图：