代码之家(www.adminjie.com)精品网站源码,微信源码,游戏源码分享平台。《交流群:1037940574》
当前位置:网站首页 免费源码 html5 css3 正文

html5 canvas酷炫的粒子波浪动画特效

时间:2020-06-03 [html5 css3]作者:adminjie 浏览:201 次

html5 canvas酷炫的粒子波浪动画特效

特效描述:html5 canvas酷炫的 粒子波浪动画特效,html5基于canvas绘制酷炫的3D波浪动画。

list-style: none; font-family: 微软雅黑, 宋体, "Helvetica Neue", Arial, Helvetica, sans-serif; font-weight: 500; line-height: 1.1; color: rgb(100, 100, 100); font-size: 24px; border-bottom: 1px solid rgb(235, 235, 235); background-color: rgb(255, 255, 255);">代码结构

1. HTML代码

<canvas></canvas>  <script>  !function(n,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r():"function"==typeof define&&define.amd?define(r):n.starlings=r()}(this,function(){"use strict";return function(n,r,t,o,e,u,i,f){var a=f.onSetup;void 0===a&&(a=null);var v=f.onRepeat;void 0===v&&(v=null);var c=f.modifier;void 0===c&&(c=null);var l=f.perspective;void 0===l&&(l=1);var d=f.pixelRatio;void 0===d&&(d=1);var m=f.triangles;void 0===m&&(m=!1);var s,p,y=r.length,w=function(n,r){var t=s.createShader(n);return s.shaderSource(t,r),s.compileShader(t),t},b=function(){for(var n=0;n<o.length;n+=1){for(var r=s.createBuffer(),e=o[n],u=e.data(0,0).length,i=new Float32Array(t*y*u),f=0;f<t;f+=1)for(var a=e.data(f,t),v=f*y*u,l=0;l<y;l+=1)for(var d=0;d<u;d+=1)null!==c&&e.name===c.attribute?i[v]=c.value(i[v],a,d,l):i[v]=a[d],v+=1;s.bindBuffer(s.ARRAY_BUFFER,r),s.bufferData(s.ARRAY_BUFFER,i,s.STATIC_DRAW);var m=s.getAttribLocation(p,o[n].name);s.enableVertexAttribArray(m),s.vertexAttribPointer(m,u,s.FLOAT,!1,!1,0,0)}},A=function(){e.push({name:"uMVP",type:"mat4"});for(var n=0;n<e.length;n+=1){var r=s.getUniformLocation(p,e[n].name);e[n].location=r}},F={float:function(n,r){return s.uniform1f(n,r)},vec2:function(n,r){return s.uniform2fv(n,r)},vec3:function(n,r){return s.uniform3fv(n,r)},vec4:function(n,r){return s.uniform4fv(n,r)},mat2:function(n,r){return s.uniformMatrix2fv(n,!1,r)},mat3:function(n,r){return s.uniformMatrix3fv(n,!1,r)},mat4:function(n,r){return s.uniformMatrix4fv(n,!1,r)}},g=function(){s.clear(16640),s.useProgram(p),null!==v&&v(s,p,e);for(var n=0;n<e.length;n+=1)F[e[n].type](e[n].location,e[n].value);s.drawArrays(m?s.TRIANGLES:s.POINTS,0,y*t),requestAnimationFrame(g)},h=function(){n.width=n.clientWidth*d,n.height=n.clientHeight*d;var r=s.drawingBufferWidth,t=s.drawingBufferHeight;s.viewport(0,0,r,t),e[e.length-1].value=[l/(r/t),0,0,0,0,l,0,0,0,0,-1,-1,0,0,1,1]};s=n.getContext("webgl"),p=s.createProgram(),s.attachShader(p,w(s.VERTEX_SHADER,u)),s.attachShader(p,w(s.FRAGMENT_SHADER,i)),s.linkProgram(p),A(),h(),b(),null!==a&&a(s),g(),window.addEventListener("resize",h,!1)}});  "use strict";  // Do you like rainbow waves?  var rainbow = false;  // Need more performance?  var HD = true;  var canvas = document.querySelector("canvas");  var background = document.querySelector(".background");  var bar = document.querySelector(".progress");  var initialize = function initialize(vertices) {    var pixelRatio = HD ? window.devicePixelRatio : 1;    var rows = HD ? 90 : 90;    var multiplier = rows * rows;    var duration = 0.4;    var geometry = [{ x: 0, y: 0, z: 0 }];    var pointSize = (HD ? 6 : 2).toFixed(1);    var step = 0.004;    var size = 5;    var attributes = [{      name: "aPositionStart",      data: function data(i, total) {        return [size - (i % rows / rows + 0.5 / rows) * (size * 2), -1, (size - (Math.floor(i / rows) / rows + 0.5 / rows) * size * 2) * -1];      }    }, {      name: "aControlPointOne",      data: function data(i) {        return [size - (i % rows / rows + 0.5 / rows) * (size * 2), -0.5 + getRandom(0.2), (size - (Math.floor(i / rows) / rows + 0.5 / rows) * size * 2) * -1];      }    }, {      name: "aControlPointTwo",      data: function data(i) {        return [size - (i % rows / rows + 0.5 / rows) * (size * 2), -0.5 + getRandom(0.2), (size - (Math.floor(i / rows) / rows + 0.5 / rows) * size * 2) * -1];      }    }, {      name: "aPositionEnd",      data: function data(i) {        return [size - (i % rows / rows + 0.5 / rows) * (size * 2), -1, (size - (Math.floor(i / rows) / rows + 0.5 / rows) * size * 2) * -1];      }    }, {      name: "aOffset",      data: function data(i) {        return [i * ((1 - duration) / (multiplier - 1))];      }    }, {      name: "aColor",      data: function data(i, total) {        return getHSL(rainbow ? i / total * 1.0 : 0.5 + i / total * 0.4, 0.5, 0.5);      }    }];    var uniforms = [{      name: "uProgress",      type: "float",      value: 0.8    }];    var vertexShader = "\n  attribute vec3 aPositionStart;\n  attribute vec3 aControlPointOne;\n  attribute vec3 aControlPointTwo;\n  attribute vec3 aPositionEnd;\n  attribute float aOffset;\n  attribute vec3 aColor;\n\n  uniform float uProgress;\n  uniform mat4 uMVP;\n\n  varying vec3 vColor;\n\n  vec3 bezier4(vec3 a, vec3 b, vec3 c, vec3 d, float t) {\n    return mix(mix(mix(a, b, t), mix(b, c, t), t), mix(mix(b, c, t), mix(c, d, t), t), t);\n  }\n\n  float easeInOutQuint(float t){\n    return t < 0.5 ? 16.0 * t * t * t * t * t : 1.0 + 16.0 * (--t) * t * t * t * t;\n  }\n\n  void main () {\n    float tProgress = easeInOutQuint(min(1.0, max(0.0, (uProgress - aOffset)) / " + duration + "));\n    vec3 newPosition = bezier4(aPositionStart, aControlPointOne, aControlPointTwo, aPositionEnd, tProgress);\n    gl_PointSize = " + pointSize + " + ((newPosition.y + 1.0) * 80.0);\n    gl_Position = uMVP * vec4(newPosition, 1.0);\n    vColor = aColor;\n  }\n";    var fragmentShader = "\n  precision mediump float;\n\n  varying vec3 vColor;\n\n  void main() {\n     vec2 pc = 2.0 * gl_PointCoord - 1.0;\n     gl_FragColor = vec4(vColor, 1.0 - dot(pc, pc));\n  }\n";    var onSetup = function onSetup(gl) {      gl.blendFunc(gl.SRC_ALPHA, gl.ONE);      gl.enable(gl.BLEND);    };    var onRepeat = function onRepeat() {      rotateY(uniforms[uniforms.length - 1].value, 0.002);      if (uniforms[0].value < 0) {        uniforms[0].value = 1;      }      uniforms[0].value -= step;    };    // const diff = (a, b) => Math.abs(a - b);    // const ratio = window.innerWidth / window.innerHeight;    // const halfWidth = window.innerWidth / 2;    // const halfHeight = window.innerHeight / 2;    // window.addEventListener('mousemove', (e) => {    //   uniforms[0].value = (((e.clientX - halfWidth) / halfWidth) * ratio).toFixed(4);    //   uniforms[1].value = (((e.clientY - halfHeight) / halfHeight)).toFixed(4) * -1;    // });    var options = {      onSetup: onSetup,      onRepeat: onRepeat,      pixelRatio: pixelRatio    };    starlings(canvas, geometry, multiplier, attributes, uniforms, vertexShader, fragmentShader, options);  };  var getRandom = function getRandom(value) {    return Math.random() * value - value / 2;  };  var rotateY = function rotateY(matrix, angle) {    var sin = Math.sin(angle);    var cos = Math.cos(angle);    var clone = JSON.parse(JSON.stringify(matrix));    matrix[0] = clone[0] * cos - clone[8] * sin;    matrix[1] = clone[1] * cos - clone[9] * sin;    matrix[2] = clone[2] * cos - clone[10] * sin;    matrix[3] = clone[3] * cos - clone[11] * sin;    matrix[8] = clone[0] * sin + clone[8] * cos;    matrix[9] = clone[1] * sin + clone[9] * cos;    matrix[10] = clone[2] * sin + clone[10] * cos;    matrix[11] = clone[3] * sin + clone[11] * cos;  };  var h2r = function h2r(p, q, t) {    if (t < 0) t += 1;    if (t > 1) t -= 1;    if (t < 1 / 6) return p + (q - p) * 6 * t;    if (t < 1 / 2) return q;    if (t < 2 / 3) return p + (q - p) * 6 * (2 / 3 - t);    return p;  };  var getHSL = function getHSL(h, s, l) {    h = (h % 1 + 1) % 1;    s = Math.max(0, Math.min(1, s));    l = Math.max(0, Math.min(1, l));    if (s === 0) return [l, l, l];    var p = l <= 0.5 ? l * (1 + s) : l + s - l * s;    var q = 2 * l - p;    return [h2r(q, p, h + 1 / 3), h2r(q, p, h), h2r(q, p, h - 1 / 3)];  };  initialize();</script>

html5 canvas酷炫的粒子波浪动画特效


大小 : 3.23 KB |  下载量 : 1  |  文件类型 : 压缩文件  

转载请注明来源:html5 canvas酷炫的粒子波浪动画特效

本文永久链接地址:https://www.adminjie.com/post/2714.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:点此维权 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 代码之家会员升级
  • 最新文章
    • 紫色店铺商家信息后台管理模板

      紫色店铺商家信息后台管理模板

      紫色店铺商家信息后台管理模板紫色店铺商家信息后台管理模板基于Bootstrap2.3.2制作,DIV+CSS布局,全套模板,包括登录、模块设置、样式模板设置、文...

    • 蓝色企业CMS网站后台管理模板

      蓝色企业CMS网站后台管理模板

      蓝色企业CMS网站后台管理模板蓝色企业CMS响应式后台管理模板基于Bootstrap3.0.0制作,自适应分辨率,兼容PC端和移动端,全套模板,包括产品管理、资...

    • 简洁商城系统后台管理模板

      简洁商城系统后台管理模板

      简洁商城系统后台管理模板简洁商城系统后台管理模板,简单,大气,全套模板,包括登录、旅游管理、系统管理、信息管理等后台模板页面。...

    • 公司网站发展时间轴特效

      公司网站发展时间轴特效

      公司网站发展时间轴特效一款简洁、美观的公司网站发展时间轴特效。...

    • 原生js日历控件年月日时间选择器代码

      原生js日历控件年月日时间选择器代码

      原生js日历控件年月日时间选择器代码特效描述:原生js日历控件年月日时间选择器,代码结构1.引入JS1<scriptsrc="laydat...

  • 阿里云大优惠
  • 热门文章