SkiaSharp 之 WPF 自绘 弹动小球(案例版)

  • SkiaSharp 之 WPF 自绘 弹动小球(案例版)已关闭评论
  • 20 次浏览
  • A+
所属分类:.NET技术
摘要

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


没想到粉丝对界面效果这么喜欢,接下来就尽量多来点特效,当然,特效也算是动画的一部分了。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;     } } 

效果如下:

SkiaSharp 之 WPF 自绘 弹动小球(案例版)

这个特效原理是可以运用到任何物体上的,会产生很神奇的效果,后面可以再搞一些案例。

总结

第一次实现特效,当初学FLash,就见到过很多特效的效果,现在自己用敲出来特效感觉是挺不一样的。

代码地址

https://github.com/kesshei/WPFSkiaShakeDemo.git

https://gitee.com/kesshei/WPFSkiaShakeDemo.git

一键三连呦!,感谢大佬的支持,您的支持就是我的动力!

版权

蓝创精英团队(公众号同名,CSDN同名,CNBlogs同名)