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 国际许可协议进行许可。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/401666.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

CSS动画实战：创建一个太极Loading图

CSS动画实战：创建一个太极Loading图

这里主要是使用CSS的animation和伪类来构建&#xff0c;分析设定关键帧的执行顺序和时间段。 效果 动画分析 首先通过效果对动画执行进行一下分析&#xff1a; 边框的四条边进行按顺序动画加载 。矩形边框变为圆行边框。太极图内部图案渐渐出现。太极图旋转。整个动画逆序执…
阅读更多...
PWA(Progressive Web App)入门系列：（二）相关准备

PWA(Progressive Web App)入门系列：（二）相关准备

前言 在上一章中&#xff0c;对PWA的相关概念做了基本介绍&#xff0c;了解了PWA的组成及优势。为了能够更快的进入PWA的世界&#xff0c;这一章主要对在PWA开发中&#xff0c;需要注意的问题&#xff0c;运行的环境及调试工具做介绍说明。 浏览器要求 因为目前各浏览器对于…
阅读更多...
PWA(Progressive Web App)入门系列：（三）PWA关键技术Manifest

PWA(Progressive Web App)入门系列：（三）PWA关键技术Manifest

前言 前面说过&#xff0c;让Web App能够达到Native App外观体验的主要实现技术就是PWA中的manifest技术&#xff0c;本章会详细说明manifest的实现&#xff0c;及各个参数的具体含义&#xff0c;还将了解如何定义Web App的启动图标、启动样式等。 简介 manifest是一种简单的…
阅读更多...
利用百度LBS做一个小Demo

利用百度LBS做一个小Demo

为什么80%的码农都做不了架构师&#xff1f;>>> 申请ak&#xff08;即获取密钥&#xff09;http://lbsyun.baidu.com/apiconsole/key?applicationkey 去这儿注册一个开发者账号即可拼写发送http请求的url譬如这样的调用http://api.map.baidu.com/geocoder/v2/?ad…
阅读更多...
PWA(Progressive Web App)入门系列：（四）Promise

PWA(Progressive Web App)入门系列：（四）Promise

前言 这一章说一下ES6的Promise对象。为什么要在PWA系列的文章中讲Promise呢&#xff1f;因为PWA中的许多技术API中都是以Promise返回的方式返回的&#xff0c;为了对后续章节中PWA技术API更好的理解&#xff0c;这里就来说一个Promise对象。 Promise出现的背景 在JavaScrip…
阅读更多...
图文详解如何搭建Windows的Android C++开发环境

图文详解如何搭建Windows的Android C++开发环境

原地址:http://www.apkbus.com/android-18595-1-1.html ////TITLE:// 图文详解如何搭建Windows的Android C开发环境&#xff08;一&#xff09;//AUTHOR:// norains//DATE:// Thursday 14-April-2011//Environment:// Cygwin 1.7.9// Android NDK r5//1. 下载A…
阅读更多...
PWA(Progressive Web App)入门系列：（五）Web Worker

PWA(Progressive Web App)入门系列：（五）Web Worker

前言 在说Service Worker前有必要说一下Web Worker&#xff0c;因为Service Worker本身就属于Web Worker的延伸&#xff0c;大部分功能也是基于Web Worker进行的扩展。 背景 众所周知&#xff0c;JavaScript引擎是以单线程调度的方式进行&#xff0c;我们无法同时运行多个Ja…
阅读更多...
Glob Patterns匹配模式使用

Glob Patterns匹配模式使用

前段时间在用workbox时&#xff0c;在做precache时&#xff0c;匹配模式基于的是Glob Pattern模式&#xff0c;于是就看了下相关文档。 下面翻译一下node-glob的使用&#xff0c;原文&#xff1a;https://github.com/isaacs/node-glob#glob-primer Glob 像在shell里面&#x…
阅读更多...
Workbox CLI v3.x 中文版

Workbox CLI v3.x 中文版

在写PWA应用时&#xff0c;用到WorkBox工具&#xff0c;使用过程中发现没有中文的帮助文档&#xff0c;为了体验好一些&#xff0c;也为了方便自己和他人查看&#xff0c;在这里翻译了一下workbox-cli。 Workbox CLI 是什么? Workbox命令行&#xff08;在workbox-cli包内&…
阅读更多...
Workbox.routing v3.x 中文版

Workbox.routing v3.x 中文版

NAMESPACE STATIC VERSION V3.6.1 类 NavigationRoute NavigationRoute可以轻松创建匹配浏览器navigation requests的Route。 它仅匹配mode设置为navigate的请求。 您可以只使用blacklist和whitelist参数中的一个或两个&#xff0c;将此路由应用于导航请求中。 RegExpRout…
阅读更多...
Workbox.strategies v3.x 中文版

Workbox.strategies v3.x 中文版

NAMESPACE STATIC VERSION V3.6.1 该模块提供了大多数serviceworker常用的缓存策略的简单实现。 类 CacheFirst cache-first请求策略的实现。 缓存优先策略对于带版本号的资源是非常有用的&#xff0c;像这种URLstyles/example.a8f5f1.css&#xff0c;因为它们可以长时间缓存…
阅读更多...
集算器访问HTTP数据的代码示例

集算器访问HTTP数据的代码示例

使用集算器&#xff08;esProc&#xff09;可以很方便的从http数据源读取数据进行处理。本例子中有一个servlet&#xff0c;对外提供json格式的雇员信息查询。Servlet访问数据库的员工表&#xff0c;保存了员工的信息&#xff0c;如下&#xff1a;EID NAME SURNAME …
阅读更多...
PWA(Progressive Web App)入门系列：Cache Storage Cache

PWA(Progressive Web App)入门系列：Cache Storage Cache

前言 目前浏览器的存储机制有很多&#xff0c;如&#xff1a;indexedDB、localStorage、sessionStorage、File System API、applicationCache 等等&#xff0c;那为什么又制定了一套 Cache API 呢&#xff1f;对比其他存储机制有什么优势&#xff1f; 简介 Cache API 是一套…
阅读更多...
「浏览器插件」无广告国内视频平台直接播放插件

「浏览器插件」无广告国内视频平台直接播放插件

前段时间发现一些比较不错的解析国内视频平台的一些 API 接口&#xff0c;很早之前基于这些接口做过一个 Android 端的播放软件&#xff0c;但为了更方便使用吧&#xff0c;于是做了一个 Chrome 的浏览器插件&#xff0c;解析接口也是在线更新的&#xff0c;所以用起来会比较方…
阅读更多...
kafka性能测试(转)KAFKA 0.8 PRODUCER PERFORMANCE

kafka性能测试(转)KAFKA 0.8 PRODUCER PERFORMANCE

来自:http://blog.liveramp.com/2013/04/08/kafka-0-8-producer-performance-2/ At LiveRamp, we constantly face scaling challenges as the volume of data that our infrastructure must deal with continues to grow. One such challenge involves the logging system. At…
阅读更多...
Workbox-Window v4.x 中文版

Workbox-Window v4.x 中文版

Workbox 目前发了一个大版本&#xff0c;从 v3.x 到了 v4.x&#xff0c;变化有挺大的&#xff0c;下面是在 window 环境下的模块。 什么是 workbox-window? workbox-window 包是一组模块&#xff0c;用于在 window 上下文中运行&#xff0c;也就是说&#xff0c;在你的网页内…
阅读更多...
媒体播放器三大底层架构

媒体播放器三大底层架构

2019独角兽企业重金招聘Python工程师标准>>> 媒体播放工具&#xff0c;这里主要指视频播放&#xff0c;因为要面临庞大的兼容性和纷繁复杂的算法&#xff0c;从架构上看&#xff0c;能脱颖而出的体系屈指可数。大体来说业界主要有3大架构&#xff1a;MPC、MPlayer和…
阅读更多...
PWA 可用性检测工具

PWA 可用性检测工具

针对移动端或者 PC 端浏览器是否对 PWA 可用的问题上&#xff0c;做了一个简单的站点&#xff0c;来实现上述问题的方便检测。让开发者较快的了解终端浏览器的特性支持度。 使用 工具地址&#xff1a;https://lecepin.gitee.io/detect-sw/ 地址二维码&#xff1a; 检测 可…
阅读更多...
PWA 应用列表及常用工具

PWA 应用列表及常用工具

引言 在做 PWA 的过程中自己写了一些相关的应用和工具&#xff0c;在这里整合下&#xff0c;方便记录及查找使用。 应用列表 PWA 支持检测工具番茄钟二维码生成新闻应用身体数据统计应用支付宝集福应用田英章书法字典应用抖音无水印下载应用很好用的备忘录精神氮泵 PWA 支持检…
阅读更多...
Struts2中访问HttpServletRequest和HttpSession

Struts2中访问HttpServletRequest和HttpSession

2019独角兽企业重金招聘Python工程师标准>>> 关键字: struts2 httpservletrequest httpsession 在没有使用Struts2之前,都习惯使用HttpServletRequest和HttpSession对象来操作相关参数,下面介绍一下在Struts2中访问隐藏的HttpServletRequest和HttpSession的两种方法…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023