HTML5+jQuery实现动燃火焰特效

公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序

腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云

HTML5 配合 jQuery 能实现很多动画特效。我们今天要分享的是动燃火焰特效。

动燃火焰顾名思义就是看起来像燃烧的火焰一样的动画效果。

本文分享的又是一款基于HTML5的超炫动画特效，是一款动感的火焰燃烧动画效果。这款HTML5动画火焰燃烧非常逼真。

一般像这样的HTML5动画都是基于Canvas的，今天的这款也不例外。

上图就是我们今天要实现的效果。这张图截取的是静态的，实际demo是动态的。

接下来我们要简单分析一下实现这款HTML5火焰燃烧动画的具体步骤和代码，主要由HTML5代码、CSS代码和Javascript代码组成。

以下是HTML5代码：

<div>
<canvas id="surface"></canvas>
<!-- 业余草：www.xttblog.com -->
</div>

这里我们仅仅是定义了一个Canvas容器，我们的火焰效果就是在Canvas上绘制而成的。

接下来是CSS代码，也非常简单。

.wrapper {
  margin: 20px auto;
  text-align: center;
}
canvas {
  width: 100%;
  height: 100%;
}

只是用CSS定义了画布Canvas的尺寸，那么火焰燃烧的效果是怎么来的呢？下面就要看Javascript的作用了。

$( document ).ready(function() {
  // 业余草：www.xttblog.com
  var space = document.getElementById("surface");
  var surface = space.getContext("2d");
  surface.scale(1,1);
  var particles = [];
  var particle_count = 150;
  for(var i = 0; i < particle_count; i++) {
		particles.push(new particle());
	}
  var time = 0;
  var canvasWidth=320;
  var canvasHeight=480;
  $(".wrapper").css({width:canvasWidth,height:canvasHeight});
  $("#surface").css({width:canvasWidth,height:canvasHeight});
  window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame       ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame    ||
            function( callback ){
              window.setTimeout(callback, 6000 / 60);
            };
  })(); 
  function particle() {
		this.speed = {x: -1+Math.random()*2, y: -5+Math.random()*5};
     canvasWidth = (document.getElementById("surface").width);
     canvasHeight= (document.getElementById("surface").height);
     this.location = {x: canvasWidth/2, y: (canvasHeight/2)+35};
		this.radius = .5+Math.random()*1;
		this.life = 10+Math.random()*10;
		this.death = this.life;
		this.r = 255;
		this.g = Math.round(Math.random()*155);
		this.b = 0;
	}

  function ParticleAnimation(){
		surface.globalCompositeOperation = "source-over";
		surface.fillStyle = "black";
		surface.fillRect(0, 0, canvasWidth, canvasHeight);
		surface.globalCompositeOperation = "lighter";
		for(var i = 0; i < particles.length; i++)
		{
			var p = particles[i];
			surface.beginPath();
			p.opacity = Math.round(p.death/p.life*100)/100
			var gradient = surface.createRadialGradient(p.location.x, 
			p.location.y, 0, p.location.x, p.location.y, p.radius);
			gradient.addColorStop(0, "rgba("+p.r+", "+p.g+", "+p.b+", "+p.opacity+")");
			gradient.addColorStop(0.5, "rgba("+p.r+", "+p.g+", "+p.b+", "+p.opacity+")");
			gradient.addColorStop(1, "rgba("+p.r+", "+p.g+", "+p.b+", 0)");
			surface.fillStyle = gradient;
			surface.arc(p.location.x, p.location.y, p.radius, Math.PI*2, false);
			surface.fill();
			p.death--;
			p.radius++;
			p.location.x += (p.speed.x);
			p.location.y += (p.speed.y);

			//regenerate particles
			if(p.death < 0 || p.radius < 0){
				//a brand new particle replacing the dead one
				particles[i] = new particle();
			}
		}
  requestAnimFrame(ParticleAnimation);
}
ParticleAnimation();
});

本文主要是利用一些数学运算动态改变火焰的CSS属性，具体可以看源代码。链接：http://pan.baidu.com/s/1skQynpj 密码：4sxy

最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！

本文原文出处：业余草： » HTML5+jQuery实现动燃火焰特效