pixi实现按钮萤火虫粒子飞舞动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：粒子
代码描述：pixi实现按钮萤火虫粒子飞舞动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">

<style>
    @import url('https://fonts.googleapis.com/css?family=Indie+Flower');

* {
  box-sizing: border-box;
  cursor: default;
  outline: none;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  background: #171623;
  overflow: hidden;
}

canvas {
  display: block;
}

#background {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.table {
  display: table;
  width: 100%;
  height: 100%;
}

.cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding-top: 10px;
  cursor: pointer;
}

.excitement {
  transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 300px;
  height: 120px;
  border-radius: 10px;
  box-shadow: 0 5px 10px 5px rgba(0,0,0,0.2);
  background: #333333;
  overflow: hidden;
  cursor: pointer;
  z-index: 1000;
}

.excitement:hover {
  transform: scale(1.08);
}

.excitement:active {
  transform: scale(1);
}

.excitement::before {
  position: absolute;
  width: 250px;
  height: 180px;
  content: "";
  display: block;
  top: 0;
  margin-left: 138px;
  transform-style: flat;
  transform: skew(20deg);
  background: -moz-linear-gradient(top, hsla(0,0%,100%,0.1) 0%, hsla(0,0%,100%,0) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla(0,0%,100%,0.2)), color-stop(100%,hsla(0,0%,100%,0)));
  background: -webkit-linear-gradient(top, hsla(0,0%,100%,0.1) 0%,hsla(0,0%,100%,0) 100%);
  background: -o-linear-gradient(top, hsla(0,0%,100%,0.1) 0%,hsla(0,0%,100%,0) 100%);
  background: -ms-linear-gradient(top, hsla(0,0%,100%,0.1) 0%,hsla(0,0%,100%,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#42ffffff', endColorstr='#00ffffff',GradientType=0 );
  background: linear-gradient(to bottom, hsla(0,0%,100%,0.1) 0%,hsla(0,0%,100%,0) 100%);
}

.excitement h1 {
  user-select: none;
  font-family: 'Indie Flower', cursive;
  text-shadow: 0 2px 2px black;
  color: #ffd800;
  font-size: 50px;
  letter-spacing: 3px;
  cursor: pointer;
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<div id="background"></div>

<div class="excitement">
  <div class="table">
    <div class="cell">
      <h1>Fireflies!!!</h1>
    </div>
  </div>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.2.11.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pixi.4.4.3.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
<script>
    var gui = new dat.GUI();
gui.close();

var firefliesConfig = {
  width: 300, // button width
  height: 120, // button height
  fireflyCount: 1500,
  radius: 10,
  spawnRate: 2,
  simplexStart: 20,
  fireflyColor: [ 200, 254, 117 ],
  blur: 0.7,
  backgroundColor: 0x171623,
  blendMode: PIXI.BLEND_MODES.ADD,
  blinkDelay: 0.7,
  blinkDecay: 0.01,
  liveTime: 200,
  scatterDecay: 0.03,
  scatterAccel: 0.3,
  scatterRate: 0.5,
  xVelocity: 1.4,
  yVelocity: 1
};

$(document).ready(function() {

  var state = true;
  var fireflies = new Fireflies($('#background')[0], firefliesConfig, function() {
    state = false;
  });

  $('.excitement').on('click', function() {
    state = !state;
    state ? fireflies.start() : fireflies.stop();
  });

  gui.addColor(firefliesConfig, 'fireflyColor').onChange(function() {
    fireflies.generateTexture();
  });

  gui.addColor(firefliesConfig, 'backgroundColor').onChange(function(val) {
    fireflies.app.renderer.backgroundColor = val;
  });

  //gui.add(firefliesConfig, 'blendMode', PIXI.BLEND_MODES);
  gui.add(firefliesConfig, 'blendMode', {
    NORMAL: PIXI.BLEND_MODES.NORMAL,
    ADD: PIXI.BLEND_MODES.ADD,
    MULTIPLY: PIXI.BLEND_MODES.MULTIPLY,
    SCREEN: PIXI.BLEND_MODES.SCREEN
  });

  gui.add(firefliesConfig, 'radius', 2, 100).onChange(function() {
    fireflies.generateTexture();
  });

  gui.add(firefliesConfig, 'blur', 0, 1).onChange(function() {
    fireflies.generateTexture();
  });

  gui.add(firefliesConfig, 'fireflyCount', 1000, 10000, 1);
  gui.add(firefliesConfig, 'spawnRate', 1, 10, 1);
  gui.add(firefliesConfig, 'simplexStart', 0, 100, 1);

  gui.add(firefliesConfig, 'blinkDelay', 0, 1);
  gui.add(firefliesConfig, 'blinkDecay', 0, 0.1);
  gui.add(firefliesConfig, 'liveTime', 0, 1000, 1);
  gui.add(firefliesConfig, 'scatterDecay', 0, 0.05);
  gui.add(firefliesConfig, 'scatterAccel', 0, 0.5);
  gui.add(firefliesConfig, 'scatterRate', 0, 1);
  gui.add(firefliesConfig, 'xVelocity', 0, 2);
  gui.add(firefliesConfig, 'yVelocity', 0, 2);

});

;(function(){
  'use strict';

  function extend( a, b ) {
    for( var key in b ) {
      if( b.hasOwnProperty( key ) ) {
        a[key] = b[key];
      }
    }
    return a;
  }

  var Firefly = function(params) {

    var fly = new PIXI.Sprite(params.texture);

    fly.blendMode = firefliesConfig.blendMode;
    fly.anchor.x = 0.5;
    fly.anchor.y = 0.5;

    this.sprite = fly;
    this.x = params.x;
    this.y = params.y;

    let xv = firefliesConfig.xVelocity;
    let yv = firefliesConfig.yVelocity;

    this.vx = (Math.random() * xv) - (xv / 2);
    this.vy = (Math.random() - yv);
    this.angle = Math.random() * Math.PI * 2;

    this.brightness = 1;
    this.decay = firefliesConfig.blinkDecay;
    this.blink = 0;
    this.rate = firefliesConfig.blinkDelay + (Math.random() * 0.2);
    this.counter = 0;
    this.simplex = 0;
    this.simplexStart = params.noise;

    var lt = firefliesConfig.liveTime;
    this.die = (params.birth + (Math.random() * (lt / 4) + lt)) >> 0;

    this.sprite.position.x = this.x;
    this.sprite.position.y = this.y;
    this.sprite.alpha = this.brightness;

  }

  Firefly.prototype.update = function(params) {

    if (params.kill) {

      this.brightness -= firefliesConfig.scatterDecay;
      var s = firefliesConfig.scatterRate;
      this.angle += Math.random() * s - (s / 2);
      this.vx += firefliesConfig.scatterAccel;
      this.vy += firefliesConfig.scatterAccel;
      this.x += Math.cos(this.angle) * this.vx;
      this.y += Math.sin(this.angle) * this.vy;

    }else{

      if(params.time > this.die) {
        this.brightness -= 0.02;
      }else if (this.blink >= this.rate) {
        this.brightness = 1;
        this.blink = 0;
      }else{
        this.brightness -= this.decay;
        this.brightness = Math.max(0.01, this.brightness);
        this.blink += 0.01;
      }

      this.x += this.vx;
      this.y += this.vy;

      if(this.counter > this.simplexStart) {
        this.simplex = params.simplex.noise3D(this.x / 100, this.y / 100, params.time / 100);
        this.x += this.simplex;
        this.y += this.simplex;
      }else{
        this.counter++;
      }

    }

    this.sprite.position.x = this.x;
    this.sprite.position.y = this.y;
    this.sprite.alpha = this.brightness;

  };

  var Fireflies = function(el, options, cb) {
    this.el = el;
    this.cb = cb;
    extend(this.options, options);
    this.fireflies = [];
    this.iW = (this.options.width / 2) - this.options.radius;
    this.iH = (this.options.height / 2) - this.options.radius;
    this.init();
    this.start();
  };

  Fireflies.prototype.options = firefliesConfig;

  Fireflies.prototype.init = function() {

    this.app = new PIXI.Application({
      backgroundColor: this.options.backgroundColor
    });

    this.simplex = new SimplexNoise();
    this.generateTexture();

    this.el.appendChild(this.app.renderer.view);
    window.onorientationchange = this.resize.bind(this);
    $(window).resize(this.resize.bind(this));

    this.resize();

  };

  Fireflies.prototype.generateTexture = function() {

    var r = this.options.radius;
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext("2d");
    var grad = ctx.createRadialGradient(r, r, 0, r, r, r);

    canvas.width = r * 2;
    canvas.height = r * 2;

    var color = this.options.fireflyColor.map(function(i) { return i >> 0; }).join(', ');

    grad.addColorStop(0, 'rgba(' + color + ', 1)');
    grad.addColorStop((1 - this.options.blur) / 2, 'rgba(' + color + ', 1)');
    grad.addColorStop(1 - this.options.blur, 'rgba(' + color + ', 0.05)');
    grad.addColorStop(1, 'rgba(' + color + ', 0)');

		ctx.fillStyle = grad;
		ctx.fillRect(0, 0, canvas.width, canvas.height);

    this.texture = PIXI.Texture.fromCanvas(canvas);

  };

  Fireflies.prototype.start = function() {

    if (this.fireflies.length) {
      cancelAnimationFrame(this.frame);
      this.fireflies.length = 0;
      for (var i = this.app.stage.children.length - 1; i >= 0; i--) {
        this.app.stage.removeChild(this.app.stage.children[i]);
      };
    }

    this.time = 0;
    this.count = 0;
    this.kill = false;
  	this.frame = requestAnimationFrame(this.update.bind(this));

  };

  Fireflies.prototype.stop = function() {
    this.kill = true;
  };

  Fireflies.prototype.resize = function() {
    this.screenWidth = $(window).width();
  	this.screenHeight = $(window).height();
  	this.app.renderer.resize(this.screenWidth, this.screenHeight);
  };

  Fireflies.prototype.update = function() {

    for(var i in this.fireflies) {

      var fly = this.fireflies[i];

      fly.update({
        time: this.time,
        kill: this.kill,
        simplex: this.simplex
      });

      if(fly.brightness <= 0) {
        this.fireflies.splice(i, 1);
        this.app.stage.removeChild(fly.sprite);
        continue;
      }

    }

    if (this.count < this.options.fireflyCount && !this.kill) {
      this.spawn();
    }

    if (this.fireflies.length) {
      this.time++;
      this.frame = requestAnimationFrame(this.update.bind(this));
    }else{
      console.log('finished');
      if (this.cb) this.cb();
    }

  };

  Fireflies.prototype.spawn = function() {

    for(var i = 0; i < this.options.spawnRate; i++) {

      this.count++;

      var x, y;

      if (Math.round(Math.random())) {
        x = (this.screenWidth / 2) - this.iW + (Math.round(Math.random()) * this.iW * 2);
        y = (this.screenHeight / 2) - this.iH + (Math.random() * (this.iH * 2));
      }else{
        x = (this.screenWidth / 2) - this.iW + (Math.random() * (this.iW * 2));
        y = (this.screenHeight / 2) - this.iH + (Math.round(Math.random()) * this.iH * 2);
      }

      var fly = new Firefly({
        noise: this.options.simplexStart,
        birth: this.time,
        texture: this.texture,
        x: x,
        y: y
      });

      this.fireflies.push(fly);
      this.app.stage.addChild(fly.sprite);

    }

  };

  window.Fireflies = Fireflies;

})();


/*
 * A fast javascript implementation of simplex noise by Jonas Wagner
 *
 * Based on a speed-improved simplex noise algorithm for 2D, 3D and 4D in Java.
 * Which is based on example code by Stefan Gustavson (stegu@itn.liu.se).
 * With Optimisations by Peter Eastman (peastman@drizzle.stanford.edu).
 * Better rank ordering method by Stefan Gustavson in 2012.
 *
 *
 * Copyright (C) 2012 Jonas Wagner
 *
 * Permission is hereby granted, free of charge, to any person obtaining
 * a copy of this software and associated documentation files (the
 * "Software"), to deal in the Software without restriction, including
 * without limitation the rights to use, copy, modify, merge, publish,
 * distribute, sublicense, and/or sell copies of the Software, and to
 * permit persons to whom the Software is furnished to do so, subject to
 * the following conditions:
 *
 * The above copyright notice and this permission notice shall be
 * included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
 * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
 * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
 * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
 * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
 * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 */
(function () {

var F2 = 0.5 * (Math.sqrt(3.0) - 1.0),
    G2 = (3.0 - Math.sqrt(3.0)) / 6.0,
    F3 = 1.0 / 3.0,
    G3 = 1.0 / 6.0,
    F4 = (Math.sqrt(5.0) - 1.0) / 4.0,
    G4 = (5.0 - Math.sqrt(5.0)) / 20.0;


function SimplexNoise(random) {
    if (!random) random = Math.random;
    this.p = new Uint8Array(256);
    this.perm = new Uint8Array(512);
    this.permMod12 = new Uint8Array(512);
    for (var i = 0; i < 256; i++) {
        this.p[i] = random() * 256;
    }
    for (i = 0; i < 512; i++) {
        this.perm[i] = this.p[i & 255];
        this.permMod12[i] = this.perm[i] % 12;
    }

}

SimplexNoise.prototype = {
    grad3: new Float32Array([1, 1, 0,
                            - 1, 1, 0,
                            1, - 1, 0,

                            - 1, - 1, 0,
                            1, 0, 1,
                            - 1, 0, 1,

                            1, 0, - 1,
                            - 1, 0, - 1,
                            0, 1, 1,

                            0, - 1, 1,
                            0, 1, - 1,
                            0, - 1, - 1]),
    grad4: new Float32Array([0, 1, 1, 1, 0, 1, 1, - 1, 0, 1, - 1, 1, 0, 1, - 1, - 1,
                            0, - 1, 1, 1, 0, - 1, 1, - 1, 0, - 1, - 1, 1, 0, - 1, - 1, - 1,
            .........完整代码请登录后点击上方下载按钮下载查看