简易粒子爆炸效果

下载代码

html

css

分享到微信朋友圈

html

<form id="settings" onsubmit="return false">
  Particles<br/>
  <input type="text" id="inBubblesMin" value="150"/>
   To 
  <input type="text" id="inBubblesMax" value="150"/><br/>
  
  Size<br/>
  <input type="text" id="inSizeMin" value="2"/>
   To 
  <input type="text" id="inSizeMax" value="2"/><br/>
  
  Speed<br/>
  <input type="text" id="inSpeedMin" value="1"/>
   To 
  <input type="text" id="inSpeedMax" value="1"/><br/>
  
  Curve<br/>
  <input type="text" id="inCurveMin" value=".5"/>
   To 
  <input type="text" id="inCurveMax" value=".5"/><br/>
  <input type="checkbox" name="waveX" checked="checked"/>Wave X<br/>
  <input type="checkbox" name="waveY"/>Wave Y<br/>
  <button id="btnClear">Clear</button>
  <button id="btnSet">Burst!</button><br/>
  Presets:
  <button id="preset1">Time Dilation</button>
  <button id="preset2">Warp Speed</button>
  <button id="preset3">Kaleider</button>
  <button id="preset4">Star Dust</button>
  <button id="preset5">Kaleidonut</button>
  <button id="preset6">Loading...</button>
  <button id="preset7">Flower Out</button>
  <button id="preset8">Flower Out 2</button>
  <button id="preset0">Default</button>
</form>

css

JavaScript

// Create Canvas.
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// Store all particles.
var particles = [];
// A lighter colorset (I can't decide).
var colors = [
  'rgba(243,169,192,.95)',
  'rgba(255,229,154,.95)',
  'rgba(97,181,97,.95)',
  'rgba(58,144,176,.95)',
  'rgba(255,255,255,.95)'
];
// The default colorset.
var colors = [
  'rgba(69,204,255,.95)',
  'rgba(73,232,62,.95)',
  'rgba(255,212,50,.95)',
  'rgba(232,75,48,.95)',
  'rgba(178,67,255,.95)'
];

// Configure settings options
var config = {};
var settings = document.getElementById('settings');
initSettings();

// Init.
resize();
// Fire the Burst! button.
settings.btnSet.onclick();
// Attach canvas.
document.body.appendChild(canvas);
// Begin drawing.
window.requestAnimationFrame(draw);
// Sync canvas to window.
window.onresize = resize;

// Drawing.
function draw () {
  for (var i=0; i<particles.length; i++) {
    var p = particles[i];
    p.move();
    p.draw(ctx);
  }
  fade();
  window.requestAnimationFrame(draw);
}

config.waveX = settings.waveX.checked;
    config.waveY = settings.waveY.checked;
    burst();
  }

// Configure clear button
  settings.btnClear.onclick = clear;

// Presets.
  settings.preset0.onclick = function () {
    preset({
      inBubblesMin:150,
      inBubblesMax:150,
      inSizeMin:2,
      inSizeMax:2,
      inSpeedMin:1,
      inSpeedMax:1,
      inCurveMin:.5,
      inCurveMax:.5,
      waveX:true,
      waveY:false
    });
  }
  settings.preset1.onclick = function () {
    preset({
      inBubblesMin:300,
      inBubblesMax:300,
      inSizeMin:2,
      inSizeMax:2,
      inSpeedMin:100,
      inSpeedMax:100,
      inCurveMin:180,
      inCurveMax:180,
      waveX:true,
      waveY:false
    });
  }
  settings.preset2.onclick = function () {
    preset({
      inBubblesMin:500,
      inBubblesMax:500,
      inSizeMin:2,
      inSizeMax:3,
      inSpeedMin:1,
      inSpeedMax:50,
      inCurveMin:0,
      inCurveMax:0,
      waveX:true,
      waveY:false
    });
  }
  settings.preset3.onclick = function () {
    preset({
      inBubblesMin:80,
      inBubblesMax:80,
      inSizeMin:500,
      inSizeMax:500,
      inSpeedMin:1,
      inSpeedMax:10,
      inCurveMin:-.5,
      inCurveMax:.5,
      waveX:false,
      waveY:false
    });
  }
  settings.preset4.onclick = function () {
    preset({
      inBubblesMin:100,
      inBubblesMax:100,
      inSizeMin:.5,
      inSizeMax:.5,
      inSpeedMin:120,
      inSpeedMax:120,
      inCurveMin:5,
      inCurveMax:20,
      waveX:true,
      waveY:false
    });
  }
  settings.preset5.onclick = function () {
    preset({
      inBubblesMin:90,
      inBubblesMax:90,
      inSizeMin:200,
      inSizeMax:200,
      inSpeedMin:2,
      inSpeedMax:2,
      inCurveMin:.5,
      inCurveMax:.5,
      waveX:false,
      waveY:false
    });
  }
  settings.preset6.onclick = function () {
    preset({
      inBubblesMin:5,
      inBubblesMax:5,
      inSizeMin:16,
      inSizeMax:16,
      inSpeedMin:1.8,
      inSpeedMax:1.8,
      inCurveMin:1.8,
      inCurveMax:1.8,
      waveX:false,
      waveY:false
    });
  }
  settings.preset7.onclick = function () {
    preset({
      inBubblesMin:300,
      inBubblesMax:300,
      inSizeMin:2,
      inSizeMax:2,
      inSpeedMin:2,
      inSpeedMax:2,
      inCurveMin:1,
      inCurveMax:1,
      waveX:true,
      waveY:true
    });
  }
  settings.preset8.onclick = function () {
    preset({
      inBubblesMin:300,
      inBubblesMax:300,
      inSizeMin:.5,
      inSizeMax:.5,
      inSpeedMin:6,
      inSpeedMax:6,
      inCurveMin:1.5,
      inCurveMax:1.5,
      waveX:true,
      waveY:true
    });
  }
}

/* Common functions */

function rand(min, max) {
  return Math.random()*(max-min)+min;
}
function randColor(min, max) {
    var r = Math.floor(rand(min,max)),
        g = Math.floor(rand(min,max)),
        b = Math.floor(rand(min,max));
    return 'rgba('+r+','+g+','+b+',1)';
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg