前端开发whqet,csdn,王海庆,whqet,前端开发专家
昨天我们学习了利用requestAnimationFrame优化动画控制，然后就忍不住冲动，在fork别人codepen的基础上，实现了这个炫彩logo粒子效果，效果预览如下。
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------====炫彩logo粒子1==== ==全屏预览== ==在线编辑== ==下载收藏== ==赞助投票==---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
思路解析
1.canvas绘制图像
2.取得图像像素点
3.粒子效果附加在像素点上
实现步骤
html文档结构和css非常简单，不赘述，直接来代码。
<canvas id='c'></canvas>
html, body {height: 100%;}body {background: black;overflow: hidden;}canvas {max-width: 100%;}
然后是核心的JS，这里我们同样用到requestAnimationFrame，不再详述，不确切的同学可以参加上篇文章。
为了避免canvas的跨域问题，这里使用base64的方式使用logo图片，图片转base64的工具可以使用这个。base64的方式太占篇幅，我们放到一个变量里，扔在代码的最前方，然后设置canvas，加载图像。
//数据存储，Base64图片信息，太长了占屏太多，请使劲往下拉。var picUrl = "data:image/png;base64,……";//canvas基础设置var canvas = document.getElementById("c"),ctx = canvas.getContext("2d"),w = canvas.width = window.innerWidth,h = canvas.height = window.innerHeight,logoParticles = [],particleIndex = 0,logo = new Image(),hue = 0;//设置图像logo.src = picUrl;
当图像加载完成后，绘制图像，获取图像像素点，遍历像素点绑定粒子。
//加载完成后，获取图像像素，将粒子绑定在图像像素上logo.onload = function() {var posX = (w - this.width) / 2,posY = (h - this.height) / 2;//绘制图形ctx.drawImage(this, posX, posY);//获取像素点var imgData = ctx.getImageData(0, 0, w, h),pixels = imgData.data;//遍历像素点，绑定粒子for (var y = 0; y < imgData.height; y += 3) {for (var x = 0; x < imgData.width; x += 3) {var alpha = pixels[((imgData.width * y) + x) * 4 + 3];if (alpha > 0) {logoParticles.push(new Particle(x, y));}}}//调用动画animate();};
接着使用requestAnimationFrame动画机制动画粒子。
//requesetAnimationFrame的方式设置动画function animate() {//调用polyfillrequestAnimationFrame(animate);//本案例动画ctx.fillStyle = "rgba(0,0,0,.1)";ctx.fillRect(0, 0, w, h);for (var i in logoParticles) {logoParticles[i].draw();}hue += 1;}
粒子类的属性有：origX、origY代表原来的坐标，x、y代表即时坐标，color代表颜色，maxLife代表最大生命周期，lift代表生命时间，vx、vy代表x、y方向的速度，grav代表重力，index代表粒子序号。
粒子类的方法有：draw绘制方法，update动画机制，reset重置，random去随机数。详细代码如下。
//粒子类定义function Particle(x, y) {this.origX = this.x = x;this.origY = this.y = y;this.color = "white";this.maxLife = this.random(20);this.life = 0;this.vx = this.random(-1, 1);this.vy = this.random(-1, 1);this.grav = .04;this.index = particleIndex;logoParticles[particleIndex] = this;particleIndex++;}//粒子原型，draw、update、reset、random方法Particle.prototype = {constructor: Particle,//绘制draw: function() {ctx.fillStyle = this.color;ctx.fillRect(this.x, this.y, 1, 1);this.update();},//动画update: function() {if (this.life >= this.maxLife) {logoParticles[this.index].reset();}this.x += this.vx;this.y += this.vy;this.vy += this.grav;this.life++;},//重置reset: function() {this.x = this.origX;this.y = this.origY;this.life = 0;this.color = "hsl(" + hue + ", 100%, 50%)";this.vx = this.random(-1, 1);this.vy = this.random(-1, 1);},//取随机数random: function() {var min = arguments.length == 1 ? 0 : arguments[0],max = arguments.length == 1 ? arguments[0] : arguments[1];return Math.random() * (max - min) + min;}};
相关阅读
1.requestAnimationFrame动画控制详解
2. html5烟花绽放效果
3.html5式程序猿表白
4.单击控制爆炸粒子
5.小方框粒子
6.多彩折回弹起粒子
7.逼真火焰效果
8.WebGL酷炫粒子效果
感谢您耐心读完。
----------------------------------------------------------
前端开发whqet，关注web前端开发，分享相关资源，欢迎点赞，欢迎拍砖。
---------------------------------------------------------------------------------------------------------
