js实现canvas大火燃烧火焰动画效果代码
代码语言:html
所属分类:动画
代码描述:js实现canvas大火燃烧火焰动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <style> body { background: #000; height: 100vh; overflow: hidden; } canvas { -webkit-animation: fade-in 2000ms 1000ms forwards; animation: fade-in 2000ms 1000ms forwards; background: #000; background: radial-gradient(circle at 50% 75%, #311, #000); border-radius: 50%; bottom: 0; box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.05); left: 0; margin: auto; opacity: 0; position: absolute; right: 0; top: 0; } @-webkit-keyframes fade-in { to { opacity: 1; } } @keyframes fade-in { to { opacity: 1; } } .static { -webkit-animation: fade-in2 2000ms 1000ms forwards; animation: fade-in2 2000ms 1000ms forwards; border-radius: 50%; bottom: 0; height: 400px; margin: auto; left: 0; opacity: 0; position: absolute; right: 0; top: 0; width: 400px; } @-webkit-keyframes fade-in2 { to { opacity: 0.06; } } @keyframes fade-in2 { to { opacity: 0.06; } } </style> </head> <bod> <canvas width="400" height="400"></canvas> <div class="static"></div> <script> console.clear(); let $ = {}; /* |=|ˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉ/ [::{}{}{}{}|=| UTILITY |=|________________________________/ */ $.PI = Math.PI; $.TAU = $.PI * 2; $.rand = (min, max) => { return Math.random() * (max - min) + min; }; $.hsla = (h, s, l, a) => { return `hsla(${h}, ${s}%, ${l}%, ${a})`; }; $.baseRange = (base, range) => { return base + $.rand(-range, range); }; /* |=|ˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉ/ [::{}{}{}{}|=| POOL |=|________________________________/ */ $.Pool = class { constructor(base, preallocateAmount) { this.base = base; this.preallocateAmount = preallocateAmount || 0; this.alive = []; this.dead = []; this.length = 0; this.deadLength = 0; if (this.preallocateAmount) { this.preallocate(); } } preallocate() { for (var i = 0; i < this.preallocateAmount; i++) { this.dead.push(new this.base()); this.deadLength++; } } create(opt) { if (this.deadLength) { var obj = this.dead.pop(); obj.init(opt); this.alive.push(obj); this.deadLength--; this.length++; return obj; } else { var newItem = new this.base(); newItem.init(opt); this.alive.push(newItem); this.length++; return newItem; } } release(obj) { var i = this.alive.indexOf(obj); if (i > -1) { this.dead.push(this.alive.splice(i, 1)[0]); this.length--; this.deadLength++; } } empty() { this.alive.length = 0; this.dead.length = 0; this.length = 0; this.deadLength = 0; } each(action, asc) { var i = this.length; while (i--) { this.alive[i][action](i); } }}; /* |=|ˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉ/ [::{}{}{}{}|=| PARTICLE |=|________________________________/ */ $.Particle = class { constructor() {} init(opt) { Object.assign(this, opt); this.life = 1; } step() { this.velocity += this.acceleration; this.angle += $.rand(-this.wander, this.wander); this.x += Math.cos(this.angle) * this.velocity; this.y += Math.sin(this.angle) * this.velocity; this.life -= this.decay; this.alpha = this.fade ? this.life * 1.5: 1; if (this.life < 0) { this.parent.particles.release(this); } } draw() { $.ctx.beginPath(); $.ctx.arc(this.x, this.y, this.radius, 0, $.TAU); $.ctx.fillStyle = $.hsla(this.hue, this.saturation, this.lightness, this.alpha); $.ctx.fill(); }}; /* |=|ˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉ/ [::{}{}{}{}|=| PARTICLE EMITTER |=|________________________________/ */ $.ParticleEmitter = class { constructor(opt) { Object.assign(this, opt); this.particles = new $.Pool($.Particle, 100); } step() { if ($.tick % this.interval === 0) { this.particles.create({ parent: this, x: $.baseRange(this.x.base, this.x.range), y: $.baseRange(this.y.base, this.y.range), radius: $.baseRange(this.radius.base, this.radius.range), angle: $.baseRange(this.angle.base, this.angle.range), velocity: $.baseRange(this.velocity.base, this.velocity.range), acceleration: $.baseRange(this.acceleration.base, this.acceleration.range), decay: $.baseRange(this.decay.base, this.decay.range), hue: $.baseRange(this.hue.base, this.hue.range), saturation: $.baseRange(this.saturation.base, this.saturation.range), lightness: $.baseRange(this.lightness.base, this.lightness.range), wander: this.wander, fade: this.fade }); } this.particles.each('step'); } draw() { $.ctx.globalCompositeOperation = this.blend; this.particles.each('draw'); }}; /* |=|ˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉˉ/ [::{}{}{}{}|=| INIT |=|________________________________/ */ $.init = () => { $.c = document.querySelector('canvas'); $.ctx = $.c.getContext('2d'); $.w = $.c.width = 400; $.h = $.c.height = 400; $.particleEmitters = []; $.tick = 1; // Spark Emitter $.particleEmitters.push(new $.ParticleEmitter({ x: { base: $.w * 0.5, range: 20 }, y: { base: $.h, range: 20 }, radius: { base: 0.75, range: 0.4 }, angle: { base: -$.PI * 0.5, range: $.PI * 0.01 }, velocity: { base: 0.5, range: 0.5 }, acceleration: { base: 0.01, range: 0.01 }, decay: { base: 0.005, range: 0.001 }, hue: { base: 30, range: 30 }, saturation: { base: 80, range: 20 }, lightness: { base: 80, range: 20 }, wander: 0.06, blend: 'lighter', fade: true, interval: 5 })); // Negative Emitter 1 $.particleEmitters.push(new $.ParticleEmitter({ x: { base: $.w - 100, range: 25 }, y: { base: $.h, range: 5 }, radius: { base: 20, range: 10 }, angle: { base: -$.PI * 0.55, range: $.PI * 0.05 }, velocity: { base: 2, range: 0 }, acceleration: { base: 0.02, range: 0.01 }, decay: { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0