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

效果如下:

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

总结

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

代码地址

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

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

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

版权

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

SkiaSharp 之 WPF 自绘 弹动小球(案例版)的更多相关文章

  1. SkiaSharp 之 WPF 自绘 粒子花园(案例版)

    此案例包含了简单的碰撞检测,圆形碰撞检测方法,也可以说是五环弹球的升级版,具体可以根据例子参考. 粒子花园 这名字是案例的名字,效果更加具有科技感,很是不错,搞搞做成背景特效也是不错的选择. Wpf ...

  2. SkiaSharp 之 WPF 自绘 五环弹动球(案例版)

    此案例基于拖曳和弹动球两个技术功能实现,如有不懂的可以参考之前的相关文章,属于递进式教程. 五环弹动球 好吧,名字是我起的,其实,你可以任意个球进行联动弹动,效果还是很不错的,有很多前端都是基于这个特 ...

  3. SkiaSharp 之 WPF 自绘 拖曳小球(案例版)

    感谢各位大佬和粉丝的厚爱和关心( 催更),我会再接再厉的,其实这也是督促自己的一种方式,非常感谢. 刚写了一篇万字长文,自己也休养生息(低调发育)了一段时间,接下来来几个小案例. 拖曳小球 WPF的拖 ...

  4. SkiaSharp 之 WPF 自绘 投篮小游戏(案例版)

    此案例主要是针对光线投影法碰撞检测功能的示例,顺便做成了一个小游戏,很简单,但是,效果却很不错. 投篮小游戏 规则,点击投篮目标点,就会有一个球沿着相关抛物线,然后,判断是否进入篮子里,其实就是一个矩 ...

  5. canvas检测边界和弹动的实例

    如图所示的效果,小球相互碰撞会相互弹开,这时要干的事就只有两件事了,一:用二次循环遍历小球是否互相碰撞,二:碰撞之后会弹向什么地方和弹出多少距离,第一件事我想学过二维数组循环的都没问题,第二件事也只是 ...

  6. Canvas学习笔记——弹动

    如果有一根橡皮筋拴住一个小球,将小球拉开一定距离后释放,小球将会弹动.距离越远,橡皮筋对小球施加的外力越大,小球的加速度就越大.也就是说,小球的加速度与距离是成正比例关系的.这和缓动很相似,缓动是速度 ...

  7. 新时代前端必备神器 Snapjs之弹动效果

    有人说不会 SVG 的前端开发者不叫开发者,而叫爱好者.前端不光是 Angularjs 了,这时候再不学 SVG 就晚了!(如果你只会 jQuery 就当我没说...)这里我就给大家分享一个前几天在别 ...

  8. canvas弹动

    弹动,和缓动类似,不过是在终点前反复运动几次达到反弹的效果,具体的算法就是用目标点(target)和物体(mouse)的距离乘以系数累加至坐标上,这样就会有简单的弹动效果,但是一般的弹动效果都是慢慢变 ...

  9. canvas弹动效果

    弹动效果,用物体与目标的距离乘上系数再累加至速度上,让物体呈加速度运动,再让速度乘与摩擦力系数,让物体最终停止运动 代码如下所示 var canvas = document.getElementByI ...

随机推荐

  1. 超越OpenCV速度的MorphologyEx函数实现(特别是对于二值图,速度是CV的4倍左右)。

    最近研究了一下opencv的 MorphologyEx这个函数的替代功能, 他主要的特点是支持任意形状的腐蚀膨胀,对于灰度图,速度基本和CV的一致,但是 CV没有针对二值图做特殊处理,因此,这个函数对 ...

  2. 【Rust】使用HashMap解决官方文档中的闭包限制

    问题概述 值缓存是一种更加广泛的实用行为,我们可能希望在代码中的其他闭包中也使用他们.然而,目前 Cacher 的实现存在两个小问题,这使得在不同上下文中复用变得很困难. 第一个问题是 Cacher  ...

  3. 华为OPS,自定义命令,动态执行命令

     OPS     开放可编程系统OPS(Open Programmability System)是指设备通过提供统一的应用程序接口API(Application Programming Interfa ...

  4. 面试官:BIO、NIO、AIO是什么,他们有什么区别?

    哈喽!大家好,我是小奇,一位热爱分享的程序员 小奇打算以轻松幽默的对话方式来分享一些技术,如果你觉得通过小奇的文章学到了东西,那就给小奇一个赞吧 文章持续更新 一.前言 书接上回,感觉上次的公司氛围不 ...

  5. 课堂练习——neo4j简单使用

    启动neo4j: neo4j.bat console 进入neo4j数据库的conf目录下,编辑neo4j.conf文件:将当前数据库设置为你要建立的数据库名称(数据库不能重名): dbms.acti ...

  6. CMU 15-445 数据库课程第四课文字版 - 存储2

    熟肉视频地址: CMU数据库管理系统课程[熟肉]4.数据库存储结构2(上) CMU数据库管理系统课程[熟肉]4.数据库存储结构2(下) 1. 面向日志的存储 上节课我们讲完了面向元组的存储,这节课从面 ...

  7. nazo.io 通关记录

    游戏网址 说在前面 答案错误页面 nazo.io/wrong 攻略 第0关 谜.io 纯粹是欢迎你来游戏. 所以他给你的start就是答案. 第1关 欢迎 它用灰体字写了key: welcome 直接 ...

  8. docker 快速上手

    Docker 属于 Linux 容器的一种封装,提供简单易用的容器使用接口 安装 docker 设置仓库 $ sudo yum install -y yum-utils $ sudo yum-conf ...

  9. PyTorch - torch.eq、torch.ne、torch.gt、torch.lt、torch.ge、torch.le

    PyTorch - torch.eq.torch.ne.torch.gt.torch.lt.torch.ge.torch.le 参考:https://flyfish.blog.csdn.net/art ...

  10. Prometheus安装教程

    Prometheus安装教程 欢迎关注H寻梦人公众号 参考目录 docker安装Prometheus 基于docker 搭建Prometheus+Grafana prometheus官方文档 dock ...