炫彩logo粒子效果

h2{font-size:1.5em}p{text-indent:2em;}前端开发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() {
	//调用polyfill
	requestAnimationFrame(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前端开发,分享相关资源,欢迎点赞,欢迎拍砖。

---------------------------------------------------------------------------------------------------------

时间: 2024-10-09 00:47:51

炫彩logo粒子效果的相关文章

简直要逆天!超炫的 HTML5 粒子效果进度条

我喜欢粒子效果作品,特别是那些能够应用于实际的,例如这个由 Jack Rugile 基于 HTML5 Cavnas 编写的进度条效果.看着这么炫的 Loading 效果,即使让我多等一会也无妨:)你呢? 温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中浏览. 插件下载     效果演示 您可能感兴趣的相关文章 Web 开发中很实用的10个效果[附源码下载] 精心挑选的优秀jQuery Ajax分页插件和教程 12个让人惊叹的的创意的 4

iOS动画开发之五——炫酷的粒子效果

iOS动画开发之五--炫酷的粒子效果 在上几篇博客中,我们对UIView层的动画以及iOS的核心动画做了介绍,基本已经可以满足iOS应用项目中所有的动画需求,如果你觉得那些都还不够炫酷,亦或是你灵光一现,想用UIKit框架写出一款炫酷的休闲游戏,那个有一个东西可以帮到你:iOS的粒子效果引擎. 一.粒子发射器 iOS中的粒子效果有两部分组成,一部分为发射器,设置例子发射的宏观属性,另一部分是粒子单元,用于设置相应的粒子属性.粒子发射器是基于Layer层,没错,又是Layer,他的全名叫做: CA

利用51单片机做出一些炫彩效果

今天我们来讨论一下我们如何利用单片机做出一些炫彩的效果,而昨天好像是七夕节,很多人都把它当做了情人节,那么我们来做一个浪漫的"I  Love u":今天我就把代码写出来,而不再是截图挂出来.效果图我也就拍出来了,你们如果有单片机可以自己复制代码下来看一些效果.(其实这一次的代码有一点跨度大了,毕竟前面我并没有说的很深入,现在一下子又变得看不懂了,不过慢慢来,我会在以后的博客中把后边的讨论写详细一点)代码如下,注释我来写了一部分,但是不全,我会慢慢把它补齐. 效果大致如我以下描述:首先,

超炫的粒子效果!代码,就应该这么写!

最近瞎逛的时候发现了一个超炫的粒子进度效果,有多炫呢?请擦亮眼镜! 粗略一看真的被惊艳到了,而且很实用啊有木有!这是 Jack Rugile 写的一个小效果,源码当然是有的.聪慧如你,肯定觉得这个东西so easy 要看啥源码,给我3分钟我就写出来了吧.所以你的思路可能是: 1)进度条的实现没什么好说的,简单的一个 fillRect(0,0,long,20),long和20是分别进度条的长宽.然后每帧动画调用前将画布清除clearRect(0,0,canvas.width,canvas.heig

超多经典 canvas 实例,动态离子背景、移动炫彩小球、贪吃蛇、坦克大战、是男人就下100层、心形文字等等等

超多经典 canvas 实例 普及:<canvas> 元素用于在网页上绘制图形.这是一个图形容器,您可以控制其每一像素,必须使用脚本来绘制图形. 注意:IE 8 以及更早的版本不支持 <canvas> 元素. 贴士:全部例子都分享在我的 GayHub - https://github.com/bxm0927/canvas-special 尤雨溪个人主页炫彩三角纽带效果,点击还可变换 GitHub源码 . Demo演示 知乎登录注册页动态离子背景效果 GitHub源码 . Demo演

关于Unity中粒子效果的使用

粒子效果1: 游戏中会有很炫酷的特效,比如爆炸,水花,火焰等;2: unity提供粒子编辑器,方便特效人员来开发很炫酷的特效;3.粒子效果一般有专门的粒子特效师来做,我们只需要拿来用就好了,很多参数没必要掌握. Particle System组件面板 1: 粒子系统主体;2: 喷射(Emission);3: 形态(shape);4: 生命周期内的速度偏移(velocity over lifetime);5: 生命周期内的限制速度(limit velocity over lifetime);6:

C#学习日志 day9 -------------- cocos2d-x 3.0 粒子效果简介

cocos2d是一款实用的游戏引擎,其可以在windows phone中应用,但是比较差强人意的是其代码只能用c++来写. 因为我们的wp应用我负责粒子效果的实现,所以这里我介绍一下各种粒子效果. cocos2d中自带了十种粒子效果.可以说,一般的效果我们都可以用cocos2d自带的粒子效果实现.即使不能我们也可以通过对其自带粒子效果进行一些属性的调整从而实现我们想要的效果. 这里先贴出十种粒子效果的实现代码 ParticleRain *snow = ParticleRain::create()

html5轻量级炫酷js粒子动画库插件

这是一款基于html5 canvas的轻量级炫酷js粒子动画库插件.该粒子动画库js插件可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常酷. 同样的例子效果还有:HTML5 Canvas彩色的光粒子模拟粒子运动动画效果. 在线演示:http://www.htmleaf.com/Demo/201501301300.html 下载地址:http://www.htmleaf.com/html5/html5-canvas/201501301299.html

JParticles 2.0 发布,打造炫酷的粒子特效

JParticles 2.0 发布,打造炫酷的粒子特效.不好意思哈,在这么繁花似锦的世界里,标题不得不取得吸引眼球一点哈,不然...还是不啰嗦了,我们进入正题吧 简单介绍一下 JParticles 2.0 版本之前还叫 Particleground.js,相信在用的朋友应该不会陌生,关于 1.x 版本的宣传文案可以移步看这里哈,或许可以帮助你了解 JParticles 2.0 的一些东西. 我们一贯的理念 我们(我/笑哭)一贯的理念是信仰:"The Write Less, Do More&quo