五环弹动球

好吧，名字是我起的，其实，你可以任意个球进行联动弹动，效果还是很不错的，有很多前端都是基于这个特效，可以搞出一些很有科技感的效果出来。

Wpf 和 SkiaSharp

新建一个WPF项目，然后，Nuget包即可要添加Nuget包

Install-Package SkiaSharp.Views.WPF -Version 2.88.0

其中核心逻辑是这部分，会以我设置的60FPS来刷新当前的画板。

skContainer.PaintSurface += SkContainer_PaintSurface;
_ = Task.Run(() =>
{while (true){try{Dispatcher.Invoke(() =>{skContainer.InvalidateVisual();});_ = SpinWait.SpinUntil(() => false, 1000 / 60);//每秒60帧}catch{break;}}
});

弹球实体代码 (Ball.cs)

public class Ball
{public double X { get; set; }public double Y { get; set; }public double VX { get; set; }public double VY { get; set; }public int Radius { get; set; }public bool Dragged { get; set; } = false;public SKColor sKColor { get; set; } = SKColors.Blue;public bool CheckPoint(SKPoint sKPoint){var d = Math.Sqrt(Math.Pow(sKPoint.X - X, 2) + Math.Pow(sKPoint.Y - Y, 2));return this.Radius >= d;}
}

五环弹动核心类 (FiveRings.cs)

/// <summary>
/// 五环弹球
/// </summary>
public class FiveRings
{public SKPoint centerPoint;public int Radius = 0;public int BallLength = 8;public double TargetX;public double Spring = 0.03;public double SpringLength = 200;public double Friction = 0.95;public List<Ball>? Balls;public Ball? draggedBall;public void init(SKCanvas canvas, SKTypeface Font, int Width, int Height){if (Balls == null){Balls = new List<Ball>();for (int i = 0; i < BallLength; i++){Random random = new Random((int)DateTime.Now.Ticks);Balls.Add(new Ball(){X = random.Next(50, Width - 50),Y = random.Next(50, Height - 50),Radius = this.Radius});}}}/// <summary>/// 渲染/// </summary>public void Render(SKCanvas canvas, SKTypeface Font, int Width, int Height){centerPoint = new SKPoint(Width / 2, Height / 2);this.Radius = 20;this.TargetX = Width / 2;init(canvas, Font, Width, Height);canvas.Clear(SKColors.White);//划线using var LinePaint = new SKPaint{Color = SKColors.Green,Style = SKPaintStyle.Fill,StrokeWidth = 3,IsStroke = true,StrokeCap = SKStrokeCap.Round,IsAntialias = true};SKPath path = null;foreach (var item in Balls){if (path == null){path = new SKPath();path.MoveTo((float)item.X, (float)item.Y);}else{path.LineTo((float)item.X, (float)item.Y);}}path.Close();canvas.DrawPath(path, LinePaint);foreach (var item in Balls){if (!item.Dragged){foreach (var ball in Balls.Where(t => t != item).ToList()){SpringTo(item, ball);}}DrawCircle(canvas, item);}using var paint = new SKPaint{Color = SKColors.Blue,IsAntialias = true,Typeface = Font,TextSize = 24};string by = $"by 蓝创精英团队";canvas.DrawText(by, 600, 400, paint);}/// <summary>/// 画一个圆/// </summary>public void DrawCircle(SKCanvas canvas, Ball ball){using var paint = new SKPaint{Color = SKColors.Blue,Style = SKPaintStyle.Fill,IsAntialias = true,StrokeWidth = 2};canvas.DrawCircle((float)ball.X, (float)ball.Y, ball.Radius, paint);}public void MouseMove(SKPoint sKPoint){if (draggedBall != null){draggedBall.X = sKPoint.X;draggedBall.Y = sKPoint.Y;}}public void MouseDown(SKPoint sKPoint){foreach (var item in Balls){if (item.CheckPoint(sKPoint)){item.Dragged = true;draggedBall = item;}else{item.Dragged = false;}}}public void MouseUp(SKPoint sKPoint){draggedBall = null;foreach (var item in Balls){item.Dragged = false;}}public void SpringTo(Ball b1, Ball b2){var dx = b2.X - b1.X;var dy = b2.Y - b1.Y;var angle = Math.Atan2(dy, dx);var targetX = b2.X - SpringLength * Math.Cos(angle);var targetY = b2.Y - SpringLength * Math.Sin(angle);b1.VX += (targetX - b1.X) * Spring;b1.VY += (targetY - b1.Y) * Spring;b1.VX *= Friction;b1.VY *= Friction;b1.X += b1.VX;b1.Y += b1.VY;}
}