一步步实现nest粒子特效
来源:互联网 发布:网络访问控制技术应用 编辑:程序博客网 时间:2024/06/05 20:18
本文首发于我的博客,这是我的github,欢迎star。
这篇博客是模仿nest.js实现一个demo
,由简单到复杂,来一步步的实现它。这里是效果预览。我的github里边还有很多别的前端的demo
,喜欢的话可以点个star
,你的支持就是我的动力。
从一道面试题开始
实现一个半径
10px
的小球在500px*500px
的方块中做直线运动,初始方向随机,速度保持不变,碰撞到墙壁后反弹。
看下效果,思路很简单,将小球定位在方块中,设置xy
方向上的速度,每帧动画给小球定位的值加上对应方向的速度值,在检测到小球碰撞墙壁的时候,将对应方向的速度置为反方向就可以了。这里是实现的代码,没有用到canvas
,但是思路一致。
尝试实现
画出一个弹射的小球很简单,那怎么用多个小球实现nest.js这样的效果呢。这样的特效肯定不能用Dom
直接做,太耗费性能,也做不出来,这时就显露出canvas
的强大之处了。
同样的,用canvas
生成多个弹来弹去的小球。首先不要管鼠标如何吸附这些小圆点,只做小球之间的连线。在每次绘制小球之前,判断一下它和之前的小球的距离是不是小于极限距离,小于就以它俩为端点绘制一条线。代码如下,思路都写在注释里:
const theCanvas = document.getElementById('theCanvas'), ctx = theCanvas.getContext('2d'), mix = 6000; //会产生连线的极限距离的平方//将canvas铺满浏览器let canvas_width = theCanvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, canvas_height = theCanvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight, points = [];theCanvas.style = "position: fixed; top: 0px; left: 0px;";//绘制函数,用requestAnimationFrame调用实现动画function draw() { //清屏 ctx.clearRect(0, 0, canvas_width, canvas_height); let i,pi,x_dist,y_dist; //遍历点集合绘制线条 points.forEach((p, index) => { p.x += p.xa, //按指定速度移动 p.y += p.ya, p.xa *= p.x > canvas_width || p.x < 0 ? -1 : 1, p.ya *= p.y > canvas_height || p.y < 0 ? -1 : 1, ctx.fillRect(p.x - 0.5, p.y - 0.5, 1, 1); //绘制点,其实是小方块 //类似于握手问题,两个点之间只绘制一次线 for(i = index + 1; i < points.length; i++) { pi = points[i]; x_dist = p.x - pi.x; y_dist = p.y - pi.y; dist = x_dist * x_dist + y_dist * y_dist; //判断点之间的距离是否小于极限距离 if(dist < mix) { ctx.beginPath(); ctx.moveTo(p.x, p.y); ctx.lineTo(pi.x, pi.y); ctx.stroke(); } } }),requestAnimationFrame(draw);}//随机生成100个点for(let i = 0; i < 100; i++ ) { let x = Math.random() * canvas_width, //初始坐标 y = Math.random() * canvas_height, xa = 2 * Math.random() - 1, //x速度 ya = 2 * Math.random() - 1; //y速度 points[i] = {x, y, xa, ya};}draw();
看下效果,丑陋,和人家的不一样,很生硬。因为连线不是突然出现突然消失的,点和点之间的连线是渐渐的出现,然后渐渐消失的。给连线添加动态的属性,用点和点的之间的距离来计算连线的粗细、透明度,在两点距离比较远的时候线会变淡,这样看起来就舒服多了。
for(i = index + 1; i < points.length; i++) { pi = points[i]; x_dist = p.x - pi.x; y_dist = p.y - pi.y; dist = x_dist * x_dist + y_dist * y_dist; //根据两点距离得到一个参数w w = (mix - dist) / mix; //判断点之间的距离是否小于极限距离 if(dist < mix) { ctx.beginPath(); //根据参数w设置连线宽度和透明度 ctx.lineWidth = w / 2; ctx.strokeStyle = `rgba(110,110,110,${w + 0.2})`; ctx.moveTo(p.x, p.y); ctx.lineTo(pi.x, pi.y); ctx.stroke(); }}
添加鼠标事件
先是加入对鼠标的响应。在鼠标进入浏览器时添加鼠标这个点,否则移除。
window.onmousemove = e => { e = e || window.event; current_point.x = e.clientX; current_point.y = e.clientY;};window.onmouseout = () => { current_point.x = null; current_point.y = null;};//将鼠标的点添加至点集合中all_points = [...random_points,current_point];
要实现一个鼠标吸附粒子的效果,思路就是粒子和鼠标的距离在一定范围内时,给粒子添加一个向着鼠标的速度,结果就好像是粒子受到鼠标的吸附一样。这是一段鼠标吸附效果的核心代码:
//当两点距离小于极限距离时产生连线,当第二个点是鼠标所产生点时,粒子如果在范围内就会产生向鼠标点的速度,实现吸附效果dist < pi.max && (pi === current_point && dist >= pi.max / 2 && (p.x -= 0.03 * x_dist, p.y -= 0.03 * y_dist));
加入鼠标的点之后再做一些调整,得到最终的代码。
其他的粒子特效
还可以利用canvas
的getImageData
属性,将图片粒子化,做成轮播图,点击这里预览,主要思路是用getImageData
取到图片像素点的信息,每隔一段取一个样本,以这个样本绘制粒子,绘制出类似于马赛克一样的图片,然后给粒子加上运动的效果就可以了,这里是具体的代码实现。
这篇博客到这就结束了,这是我的github,欢迎来访,欢迎star。
- 一步步实现nest粒子特效
- canvas实现粒子特效
- ClickSpark.js实现粒子特效
- 筑巢nest前端特效
- android JBOX2D实现粒子碰撞特效实例
- 粒子特效
- 粒子特效
- 粒子特效
- 粒子特效
- 粒子特效
- 粒子特效
- 网页粒子背景插件 -Canvas-nest.js
- 粒子特效(两种不同的实现)
- 粒子系统实现与用户交互的特效
- 使用 Cocos2d-x 和粒子编辑器实现场景特效
- Shader特效——“旋转粒子”的实现【GLSL】
- 粒子系统实现与用户交互的特效
- threeJS中粒子特效
- 移动端 富文本编辑器
- 《阿里巴巴Java开发手册》背后的故事与初心
- 承认吧!其实你不懂怎么学习编程
- 一个小小的项目
- [链表]
- 一步步实现nest粒子特效
- [LeetCode] DP之 Student Attendance Record II
- 使用 Annotations 改进代码检查
- python如何将变量名转化为同名字符串?#转自知乎#+不同模式打开文件的完全列表
- Java与MySQL数据类型对应类型
- 微信公众号支付 (四、支付结果通知)
- 如何能成为真正优秀的程序猿,这几点你必须知道!
- python type(object) 与 isinstance(object, base) 区别
- ubuntu16.04安装pycharm生成快捷方式以及命令使用说明