基于帧的动画
基于帧的动画是什么呢！
它是要为静态的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();
}
原图：
效果图：