ZRender实现粒子网格动画实战

注：本博文代码基于ZRender 3.4.3版本开发，对应版本库地址：ZRender 库。

效果

实现分析

通过上面显示的效果图，可以看出，这种效果就是在Canvas中生成多个可移动的点，然后根据点之间的距离来确定是否连线，思路比较简单。

实现问题：

保持Canvas 100%显示
resize时，自动调节Canvas尺寸和内部变量
生成圆点
实现圆点的移动，及边界处理
实现原点的直线连接

Canvas设置

html:

<canvas id="main"></canvas>

css:

#main{position: absolute; //用于100%填充left:0;top:0;background: #000;z-index: -1; //方便做背景层使用}

ZRender部分

这里主要用到的形状就是Circle和Line，先引入这两个组件：

['zrender','zrender/graphic/shape/Circle','zrender/graphic/shape/Line'],
function(zrender, Circle, Line){}

设置全局及配置项用到的变量

var winH = window.innerHeight; //同步页面宽、高
var winW = window.innerWidth; //同步页面宽、高var opts = { //可配置参数background: '#000', //Canvas背景色paricalRadius: 2, //粒子半径paricalColor: 'rgb(0, 255, 0)', //粒子颜色lineColor: 'rgb(0, 255, 0)', //连线颜色joinLineDis: 300, //粒子间连线的要求距离particalAmount: 30, //生成的粒子数量speed: 1, //粒子速度
};
var tid; //setTimeout id，防抖处理
var particals = []; //用于存储partical对象

初始化ZRender

var zr= zrender.init(main, {width: winW, height: winH});zr.dom.style.backgroundColor = opts.background; //设置背景色

窗口 resize 处理

window.addEventListener('resize', function(){clearTimeout(tid);var tid = setTimeout(function(){ //防抖处理winW = zr.dom.width = window.innerWidth;winH = zr.dom.height = window.innerHeight;zr.refresh();}, 300); //这里设置了300ms的防抖间隔
}, false);

效果：

创建粒子类 Partical

总结一下这个类，需要以下属性：

坐标位置 x, y
粒子速度
粒子移动角度
粒子颜色
粒子半径
粒子的角度方向变量
粒子的ZRender形状实例

方法：

更新位置坐标
划线

这边直接用ES6的语法来创建类：

class Partical {}

构造器：

constructor(){this.lines = [], //用于存储连线//粒子坐标初始化this.x = winW * Math.random();this.y = winH * Math.random();this.speed = opts.speed + Math.random(); //这个random可不加，主要是为了制作不同的速度的this.angle = ~~(360 * Math.random());this.color = opts.paricalColor;this.radius = opts.paricalRadius + Math.random();this.vector = {x: this.speed * Math.cos(this.angle),y: this.speed * Math.sin(this.angle),} this.element = new Circle({shape: {cx: this.x,cy: this.y,r: this.radius,},style: {fill: this.color,}});
};

更新位置坐标方法：

updatePosition(){//边界判断if(this.x >= winW || this.x <= 0){this.vector.x *= -1;}if(this.y >= winH || this.y <= 0){this.vector.y *= -1;}if(this.x > winW){this.x = winW;}if(this.x < 0){this.x = 0;}if(this.y > winH){this.y = winH;}if(this.y < 0){this.y = 0;}//更新位置坐标this.x += this.vector.x;this.y += this.vector.y;//更新形状坐标this.element.shape.cx = this.x;this.element.shape.cy = this.y;this.element.dirty();
};

划线方法：

drawLines(){//清空lines，用于重绘线for(let i = 0; i < this.lines.length; i ++){let l = this.lines[i];zr.remove(l); //删除形状l = null; //并解除绑定}this.lines = []; //删除后，清空数组//遍历各个点之间的距离for(let i = 0; i < particals.length; i ++){let p = particals[i];//勾股定理，获取两点之间的距离let distance = Math.sqrt(Math.pow(this.x - p.x, 2) + Math.pow(this.y - p.y, 2));if(distance <= opts.joinLineDis && distance > 0){let opacity = 1 - distance / opts.joinLineDis; //根据距离大小来设置透明度let color = opts.lineColor.match(/\d+/g); //因为这里要用到透明度，所以需要重新组合rgba，先把各个颜色值取到数组中let l = new Line({shape: {x1: this.x,y1: this.y,x2: p.x,y2: p.y,},style: {stroke: 'rgba(' + color[0] + ',' + color[1] + ',' + color[2] + ',' + opacity + ')', //组建颜色fill: null},});this.lines.push(l); //存入lineszr.add(l); //加入ZRender Storage中}};
}

目前所有核心部分已完成，现在来初始化它：


var init = function(){for (let i = 0; i < opts.particalAmount; i++) {let p = new Partical();particals.push(p); // 把粒子实例 存入particals中，方便后面操作zr.add(p.element); //加入 ZRender Storage中}
};

效果：

开始动画函数，让粒子动起来，并生成连接线：

function loop(){for(let i = 0; i < particals.length; i ++){let p = particals[i];p.updatePosition(); //更新位置p.drawLines(); //绘制线段}window.requestAnimationFrame(loop);
};

最终效果：

全部代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="./esl.js"></script><style>#main{position: absolute;left:0;top:0;background: #000;z-index: -1;}</style>
</head>
<body><canvas id="main"></canvas><script>require.config({packages:[{name: 'zrender',location: './src',main: 'zrender',},],
});require(['zrender','zrender/graphic/shape/Circle','zrender/graphic/shape/Line'], function(zrender, Circle, Line){/** 作者：王乐平* 博客：http://blog.csdn.net/lecepin/*///-----全局var-----{var winH = window.innerHeight;var winW = window.innerWidth;var opts = {background: '#000', //Canvas背景色paricalRadius: 2,paricalColor: 'rgb(0, 255, 0)',lineColor: 'rgb(0, 255, 0)',joinLineDis: 300,particalAmount: 30,speed: 1,};var tid; //setTimeout id，防抖处理var particals = []; //用于存储partical对象//-----------------}var zr = zrender.init(main, {width: winW, height: winH});zr.dom.style.backgroundColor = opts.background;window.addEventListener('resize', function(){clearTimeout(tid);var tid = setTimeout(function(){winW = zr.dom.width = window.innerWidth;winH = zr.dom.height = window.innerHeight;zr.refresh();}, 300); //这里设置了300ms的防抖间隔}, false);class Partical {constructor(){this.lines = [], //用于存储连线//粒子坐标初始化this.x = winW * Math.random();this.y = winH * Math.random();this.speed = opts.speed + Math.random(); //这个random可不加，主要是为了制作不同的速度的this.angle = ~~(360 * Math.random());this.color = opts.paricalColor;this.radius = opts.paricalRadius + Math.random();this.vector = {x: this.speed * Math.cos(this.angle),y: this.speed * Math.sin(this.angle),} this.element = new Circle({shape: {cx: this.x,cy: this.y,r: this.radius,},style: {fill: this.color,}});};updatePosition(){if(this.x >= winW || this.x <= 0){this.vector.x *= -1;}if(this.y >= winH || this.y <= 0){this.vector.y *= -1;}if(this.x > winW){this.x = winW;}if(this.x < 0){this.x = 0;}if(this.y > winH){this.y = winH;}if(this.y < 0){this.y = 0;}this.x += this.vector.x;this.y += this.vector.y;this.element.shape.cx = this.x;this.element.shape.cy = this.y;this.element.dirty();};drawLines(){//清空linesfor(let i = 0; i < this.lines.length; i ++){let l = this.lines[i];zr.remove(l);l = null;}this.lines = [];//遍历各个点之间的距离for(let i = 0; i < particals.length; i ++){let p = particals[i];//勾股定理let distance = Math.sqrt(Math.pow(this.x - p.x, 2) + Math.pow(this.y - p.y, 2));if(distance <= opts.joinLineDis && distance > 0){let opacity = 1 - distance / opts.joinLineDis;let color = opts.lineColor.match(/\d+/g);let l = new Line({shape: {x1: this.x,y1: this.y,x2: p.x,y2: p.y,},style: {stroke: 'rgba(' + color[0] + ',' + color[1] + ',' + color[2] + ',' + opacity + ')',fill: null},});this.lines.push(l);zr.add(l);}};}}var init = function(){for (let i = 0; i < opts.particalAmount; i++) {let p = new Partical();particals.push(p);zr.add(p.element);}};function loop(){for(let i = 0; i < particals.length; i ++){let p = particals[i];p.updatePosition();p.drawLines();}window.requestAnimationFrame(loop);};init();loop();});
</script>
</body>
</html>

博客名称：王乐平博客

CSDN博客地址：http://blog.csdn.net/lecepin

本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。

ZRender实现粒子网格动画实战相关推荐

canvas动画之二 -- 创建动态粒子网格动画
最近看到一个粒子网格动画挺炫的,自己也就做了一个,当背景挺不错的.CSDN不能上传超过2M的图片,所以就简单截了一个静态图片: 可以点击这里查看动画. 下面就开始说怎么实现这个效果吧: 首先当然是添加 ...
粒子群算法实战分享－附原版动画PPT（技术分享也可以文艺范？）
版权声明:本文为博主原创文章,未经博主允许不得转载. 本文是针对博主使用粒子群优化算法解决水面无人艇静态.动态障碍物规避,及场地布局三类问题,做了更深入的总结分析. 与目前火热的机器学习不同,智能优化 ...
QML动画实战指南：打造华丽且高性能的用户界面动效
目录标题引言 QML与Qt Quick简介动画在现代UI设计中的重要性 QML Animation模块概述 QML动画基础概念属性动画(PropertyAnimation) 父动画(Parent ...
R语言ggplot2可视化抑制可视化网格中的竖线输出、抑制可视化网格中的横线线输出、抑制背景网格输出实战
R语言ggplot2可视化抑制可视化网格中的竖线输出.抑制可视化网格中的横线线输出.抑制背景网格输出实战目录
HTML做3D立体特效,html5 3D立体粒子波浪动画特效代码
特效描述:html5 3D立体粒子波浪动画.3D 粒子动画特效代码结构 1. 引入JS 2. HTML代码 /// Scene const sceneSettings = { width: () ...
利用Maya进行论文中网格动画数据的渲染
利用Maya进行论文中网格动画数据的渲染 Maya学习资料如何利用三维动画制作软件Maya,快速生成高质量的模型渲染效果,从而为论文和Demo增色,比如以下效果: 学习资料下载(91.0M) Sen ...
VTK：网格用法实战
VTK:网格用法实战程序输出程序完整源代码程序输出程序完整源代码 // This example shows how to create a rectilinear grid. // #inc ...
VTK：标记网格用法实战
VTK:标记网格用法实战程序输出程序完整源代码程序输出程序完整源代码 #include <vtkNew.h> #include <vtkSmartPointer.h>#
VTK：网格上插值网格用法实战
VTK:网格上插值网格用法实战程序输出程序完整源代码程序输出程序完整源代码 #include <vtkActor.h> #include <vtkCamera.h> #