HTML5动感的火焰燃烧动画特效 |
您所在的位置：网站首页 › 燃烧的火焰动画 › HTML5动感的火焰燃烧动画特效 |
HTML5动感的火焰燃烧动画特效
|
本文作者html5tricks，转载请注明出处 这又是一款基于HTML5的超炫动画特效，是一款动感的火焰燃烧动画效果。这款HTML5动画火焰燃烧非常逼真，之前我们也分享过一些其他的HTML5火焰燃烧动画，比如：HTML5 Canvas火焰燃烧动画和纯CSS3实现打火机火焰动画。一般像这样的HTML5动画都是基于Canvas的，今天的这款也不例外。
接下来我们要简单分析一下实现这款HTML5火焰燃烧动画的具体步骤和代码，主要由HTML代码、CSS代码和Javascript代码组成。 HTML代码：这里我们仅仅是定义了一个canvas容器，我们的火焰效果就是在canvas上绘制而成的。 接下来是CSS代码，也非常简单。 CSS代码： .wrapper { margin: 20px auto; text-align: center; } canvas { width: 100%; height: 100%; }只是用CSS定义了画布canvas的尺寸，那么火焰燃烧的效果是怎么来的呢？下面就要看Javascript的作用了。 Javascript代码： $( document ).ready(function() { // Set canvas drawing surface var space = document.getElementById("surface"); var surface = space.getContext("2d"); surface.scale(1,1); // Set Particles var particles = []; var particle_count = 150; for(var i = 0; i < particle_count; i++) { particles.push(new particle()); } var time = 0; // Set wrapper and canvas items size var canvasWidth=320; var canvasHeight=480; $(".wrapper").css({width:canvasWidth,height:canvasHeight}); $("#surface").css({width:canvasWidth,height:canvasHeight}); // shim layer with setTimeout fallback from Paul Irish 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(); });很显然，这已经封装成一个jQuery插件，主要是利用一些数学运算动态改变火焰的CSS属性，具体可以看代码。 在线演示源码下载 |
【本文地址】
今日新闻 |
推荐新闻 |