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

技术分享 2年前 (2022-07-29) 0 999+

没想到粉丝对界面效果这么喜欢，接下来就尽量多来点特效，当然，特效也算是动画的一部分了。WPF里面已经包含了很多动画特效的功能支持了，但是，还是得自己实现，我这边就来个自绘实现的。

弹动小球

弹动小球是一个很常见的页面特效，类似于，拖动物体或者窗体，实现了抖动效果一样。还是值得学习一二的，实际上，也很简单，只需要一个弹动系数和摩擦系数即可。

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 R { get; set; }     public SKColor sKColor { get; set; } = SKColors.Blue; }

弹动核心类 (Shake.cs)

/// <summary> ///  弹动特效 /// </summary> public class Shake {     public SKPoint centerPoint;     public int Radius = 0;     /// <summary>     /// 弹动系数     /// </summary>     public double Spring = 0.02;     public double TargetX;     /// <summary>     /// 摩擦系数     /// </summary>     public double Friction = 0.95;     public Ball Ball;     public void Init(SKCanvas canvas, SKTypeface Font, int Width, int Height)     {         if (Ball == null)         {             Ball = new Ball();             Ball.X = 60;             Ball.Y = Height / 2;             Ball.R = 30;         }     }     /// <summary>     /// 渲染     /// </summary>     public void Render(SKCanvas canvas, SKTypeface Font, int Width, int Height)     {         Init(canvas, Font, Width, Height);         centerPoint = new SKPoint(Width / 2, Height / 2);         this.Radius = 30;         this.TargetX = Width / 2;         canvas.Clear(SKColors.White);          var ax = (TargetX - Ball.X) * Spring;          Ball.VX += ax;         Ball.VX *= Friction;         Ball.X += Ball.VX;           DrawCircle(canvas, Ball);          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.R, paint);     }     public void ReSet()     {         Ball.X = 60;     } }