SkiaSharp 之 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同名)

    原文作者:蓝创精英团队
    原文地址: https://www.cnblogs.com/kesshei/p/16530559.html
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞