HTML5+jQuery实现动燃火焰特效

HTML5 herman 1333浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

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)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

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