SkiaSharp 之 WPF 自绘 五环弹动球（案例版）

此案例基于拖曳和弹动球两个技术功能实现，如有不懂的可以参考之前的相关文章，属于递进式教程。

五环弹动球

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

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

1. Install-Package SkiaSharp.Views.WPF -Version 2.88.0

复制代码

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

1. skContainer.PaintSurface += SkContainer_PaintSurface;
2. _ = Task.Run(() =>
3. {
4.     while (true)
5.     {
6.         try
7.         {
8.             Dispatcher.Invoke(() =>
9.             {
10.                 skContainer.InvalidateVisual();
11.             });
12.             _ = SpinWait.SpinUntil(() => false, 1000 / 60);//每秒60帧
13.         }
14.         catch
15.         {
16.             break;
17.         }
18.     }
19. });

复制代码

弹球实体代码 (Ball.cs)

1. public class Ball
2. {
3.     public double X { get; set; }
4.     public double Y { get; set; }
5.     public double VX { get; set; }
6.     public double VY { get; set; }
7.     public int Radius { get; set; }
8.     public bool Dragged { get; set; } = false;
9.     public SKColor sKColor { get; set; } = SKColors.Blue;
10.     public bool CheckPoint(SKPoint sKPoint)
11.     {
12.         var d = Math.Sqrt(Math.Pow(sKPoint.X - X, 2) + Math.Pow(sKPoint.Y - Y, 2));
13.         return this.Radius >= d;
14.     }
15. }

复制代码

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

1. /// <summary>
2. /// 五环弹球
3. /// </summary>
4. public class FiveRings
5. {
6.     public SKPoint centerPoint;
7.     public int Radius = 0;
8.     public int BallLength = 8;
10.     public double TargetX;
11.     public double Spring = 0.03;
12.     public double SpringLength = 200;
13.     public double Friction = 0.95;
14.     public List<Ball>? Balls;
15.     public Ball? draggedBall;
16.     public void init(SKCanvas canvas, SKTypeface Font, int Width, int Height)
17.     {
18.         if (Balls == null)
19.         {
20.             Balls = new List<Ball>();
21.             for (int i = 0; i < BallLength; i++)
22.             {
23.                 Random random = new Random((int)DateTime.Now.Ticks);
24.                 Balls.Add(new Ball()
25.                 {
26.                     X = random.Next(50, Width - 50),
27.                     Y = random.Next(50, Height - 50),
28.                     Radius = this.Radius
29.                 });
30.             }
31.         }
32.     }
33.     /// <summary>
34.     /// 渲染
35.     /// </summary>
36.     public void Render(SKCanvas canvas, SKTypeface Font, int Width, int Height)
37.     {
38.         centerPoint = new SKPoint(Width / 2, Height / 2);
39.         this.Radius = 20;
40.         this.TargetX = Width / 2;
41.         init(canvas, Font, Width, Height);
42.         canvas.Clear(SKColors.White);
45.         //划线
46.         using var LinePaint = new SKPaint
47.         {
48.             Color = SKColors.Green,
49.             Style = SKPaintStyle.Fill,
50.             StrokeWidth = 3,
51.             IsStroke = true,
52.             StrokeCap = SKStrokeCap.Round,
53.             IsAntialias = true
54.         };
55.         SKPath path = null;
56.         foreach (var item in Balls)
57.         {
58.             if (path == null)
59.             {
60.                 path = new SKPath();
61.                 path.MoveTo((float)item.X, (float)item.Y);
62.             }
63.             else
64.             {
65.                 path.LineTo((float)item.X, (float)item.Y);
66.             }
67.         }
68.         path.Close();
69.         canvas.DrawPath(path, LinePaint);
72.         foreach (var item in Balls)
73.         {
74.             if (!item.Dragged)
75.             {
76.                 foreach (var ball in Balls.Where(t => t != item).ToList())
77.                 {
78.                     SpringTo(item, ball);
79.                 }
80.             }
81.             DrawCircle(canvas, item);
82.         }
84.         using var paint = new SKPaint
85.         {
86.             Color = SKColors.Blue,
87.             IsAntialias = true,
88.             Typeface = Font,
89.             TextSize = 24
90.         };
91.         string by = $"by 蓝创精英团队";
92.         canvas.DrawText(by, 600, 400, paint);
94.     }
95.     /// <summary>
96.     /// 画一个圆
97.     /// </summary>
98.     public void DrawCircle(SKCanvas canvas, Ball ball)
99.     {
100.         using var paint = new SKPaint
101.         {
102.             Color = SKColors.Blue,
103.             Style = SKPaintStyle.Fill,
104.             IsAntialias = true,
105.             StrokeWidth = 2
106.         };
107.         canvas.DrawCircle((float)ball.X, (float)ball.Y, ball.Radius, paint);
108.     }
109.     public void MouseMove(SKPoint sKPoint)
110.     {
111.         if (draggedBall != null)
112.         {
113.             draggedBall.X = sKPoint.X;
114.             draggedBall.Y = sKPoint.Y;
115.         }
116.     }
117.     public void MouseDown(SKPoint sKPoint)
118.     {
119.         foreach (var item in Balls)
120.         {
121.             if (item.CheckPoint(sKPoint))
122.             {
123.                 item.Dragged = true;
124.                 draggedBall = item;
125.             }
126.             else
127.             {
128.                 item.Dragged = false;
129.             }
130.         }
131.     }
132.     public void MouseUp(SKPoint sKPoint)
133.     {
134.         draggedBall = null;
135.         foreach (var item in Balls)
136.         {
137.             item.Dragged = false;
138.         }
139.     }
140.     public void SpringTo(Ball b1, Ball b2)
141.     {
142.         var dx = b2.X - b1.X;
143.         var dy = b2.Y - b1.Y;
144.         var angle = Math.Atan2(dy, dx);
145.         var targetX = b2.X - SpringLength * Math.Cos(angle);
146.         var targetY = b2.Y - SpringLength * Math.Sin(angle);
148.         b1.VX += (targetX - b1.X) * Spring;
149.         b1.VY += (targetY - b1.Y) * Spring;
151.         b1.VX *= Friction;
152.         b1.VY *= Friction;
154.         b1.X += b1.VX;
155.         b1.Y += b1.VY;
156.     }
157. }

复制代码

效果如下:


这个特效用的好，也能产生一些神奇的效果。
总结

这次是结合拖曳和弹动效果实现的综合案例，效果还是很不错的，之前也没想到原来还可以这样玩，拓展了玩法啊。
代码地址

https://github.com/kesshei/WPFSkiaFiveRingsDemo.git
https://gitee.com/kesshei/WPFSkiaFiveRingsDemo.git
阅

一键三连呦！，感谢大佬的支持，您的支持就是我的动力!
版权

蓝创精英团队（公众号同名，CSDN同名，CNBlogs同名）

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！