原生js实现可配置粒子跟随拖影动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：粒子

代码描述：原生js实现可配置粒子跟随拖影动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
/* Click/Touch to add more particles */

body {
  
    margin: 0px;
    overflow: hidden;
  
}
</style>

  
</head>

<body translate="no">

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
      <script >


var Orbit = {};

;(function (Orbit, undefined) {

  var self = window.Orbit || {},canvas,context,mouse = { x: innerWidth / 2, y: innerHeight / 2 },particles = [],FPS = 60;

  // Dat GUI default values
  var ease = 0.05,size = 10,speed = 0.02,orbit = 100,trail = 0.05,interactive = true;

  /*
   * Settings.
   */

  var Settings = function () {

    this.ease = 0.05;
    this.size = 10;
    this.speed = 0.02;
    this.orbit = 100;
    this.trail = 0.05;
    this.interactive = true;

    this.changeEase = function (value) {

      ease = value;

    };

    this.changeSize = function (value) {

      size = value;

    };

    this.changeSpeed = function (value) {

      speed = value;

    };

    this.changeOrbit = function (value) {

      orbit = value;

    };

    this.changeTrail = function (value) {

      trail = value;

    };

    this.enableInteractivity = function (value) {

      interactive = value;

      mouse = {

        x: innerWidth * 0.5,
        y: innerHeight * 0.5 };



    };

    this.deleteAll = function (value) {

      particles = [];

    };

  };

  /*
  	 * Init.
   */

  self.init = function () {

    var settings = new Settings();
    var GUI = new dat.GUI();

    // Dat GUI main
    GUI.add(settings, 'ease').min(0.01).max(0.09).onChange(settings.changeEase);
    GUI.add(settings, 'size').min(1).max(30).onChange(settings.changeSize);
    GUI.add(settings, 'speed').min(0.01).max(0.08).onChange(settings.changeSpeed);
    GUI.add(settings, 'orbit').min(100).max(300).onChange(settings.changeOrbit);
    GUI.add(settings, 'trail').min(0.01).max(0.09).onChange(settings.changeTrail);
    GUI.add(settings, 'interactive').onChange(settings.enableInteractivity);
    GUI.add(settings, 'deleteAll').onChange(settings.deleteAll);

    var body = document.querySelector('body');

    canvas = document.createElement('canvas');

    canvas.width = innerWidth;
    canvas.height = innerHeight;

    canvas.style.backgroundColor = 'rgba(255, 255, 255, 1.0)';
    canvas.style.position = 'absolute';
    canvas.style.left = 0;
    canvas.style.bottom = 0;
    canvas.style.left = 0;
    canvas.style.right = 0;
    canvas.style.zIndex = -1;

    body.appendChild(canvas);

    // Browser supports canvas?
    if (!!self.gotSupport()) {

      context = canvas.getContext('2d');

      // Events
      if ('ontouchstart' in window) {

        canvas.addEventListener('touchstart', self.onTouchStart, false);
        document.addEventListener('touchmove', self.onTouchMove, false);

      } else

      {

        canvas.addEventListener('mousedown', self.onMouseDown, false);
        document.addEventListener('mousemove', self.onMouseMove, false);

      }

      window.onresize = onResize;

      // Let's create our particles
      self.createParticles();

    } else

    {

      console.error("Sorry, your browser doesn't support canvas.");

    }

  };

  /*
   * On resize window event.
   */

  function onResize() {

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

  }

  /*
   * Check if browser supports canvas element.
   */

  self.gotSupport = function () {

    return canvas.getContext && canvas.getContext('2d');

  };

  /*
   * Mouse down event.
   */

  self.onMouseDown = function (event) {

    event.preventDefault();

    self.addParticles();

  };

  /*
   * Mouse move event.
   */

  self.onMouseMove = function (event) {

    event.preventDefault();

    if (interactive) {

      mouse.x = event.pageX - canvas.offsetLeft;
      mouse.y = event.pageY - canvas.offsetTop;

    }

  };

  /*
   * Touch start event.
   */

  self.onTouchStart = function (event) {

    event.preventDefault();

    self.addParticles();

  };

  /*
   * Touch move event.
   */

  self.onTouchMove = function (event) {

    event.preventDefault();

    if (interactive) {

      mouse.x = event.touches[0].pageX - canvas.offsetLeft;
      mouse.y = event.touches[0].pageY - canvas.offsetTop;

    }

  };

  /*
.........完整代码请登录后点击上方下载按钮下载查看