Question

我有这个工作画布javascript动画，但我想多次使用它，目前它只能有一个id为“星星”的画布元素并使用那个。我是否可以为他们添加一个类，并获取元素类和循环或什么是我实现这一目标的最佳解决方案？我想在不重复的情况下完成这项工作，因为我最终可能会在不同页面上使用动画。

// Settings
var particleCount = 40,
  flareCount = 0,
  motion = 0.05,
  tilt = 0.05,
  color = '#00FF7B',
  particleSizeBase = 1,
  particleSizeMultiplier = 0.5,
  flareSizeBase = 100,
  flareSizeMultiplier = 100,
  lineWidth = 1,
  linkChance = 75, // chance per frame of link, higher = smaller chance
  linkLengthMin = 5, // min linked vertices
  linkLengthMax = 7, // max linked vertices
  linkOpacity = 0.25; // number between 0 & 1
linkFade = 90, // link fade-out frames
  linkSpeed = 0, // distance a link travels in 1 frame
  glareAngle = -60,
  glareOpacityMultiplier = 0.4,
  renderParticles = true,
  renderParticleGlare = true,
  renderFlares = false,
  renderLinks = false,
  renderMesh = false,
  flicker = false,
  flickerSmoothing = 15, // higher = smoother flicker
  blurSize = 0,
  orbitTilt = true,
  randomMotion = true,
  noiseLength = 1000,
  noiseStrength = 3;

var canvas = document.getElementById('stars'),
  context = canvas.getContext('2d'),
  mouse = {
    x: 0,
    y: 0
  },
  m = {},
  r = 0,
  c = 1000, // multiplier for delaunay points, since floats too small can mess up the algorithm
  n = 0,
  nAngle = (Math.PI * 2) / noiseLength,
  nRad = 100,
  nScale = 0.5,
  nPos = {
    x: 0,
    y: 0
  },
  points = [],
  vertices = [],
  triangles = [],
  links = [],
  particles = [],
  flares = [];

function init() {
  var i, j, k;

  // requestAnimFrame polyfill
  window.requestAnimFrame = (function() {
    return window.requestAnimationFrame ||
      window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      function(callback) {
        window.setTimeout(callback, 1000 / 60);
      };
  })();

  // Size canvas
  resize();

  mouse.x = canvas.clientWidth / 2;
  mouse.y = canvas.clientHeight / 2;

  // Create particle positions
  for (i = 0; i < particleCount; i++) {
    var p = new Particle();
    particles.push(p);
    points.push([p.x * c, p.y * c]);
  }

  vertices = Delaunay.triangulate(points);

  var tri = [];
  for (i = 0; i < vertices.length; i++) {
    if (tri.length == 3) {
      triangles.push(tri);
      tri = [];
    }
    tri.push(vertices[i]);
  }

  // Tell all the particles who their neighbors are
  for (i = 0; i < particles.length; i++) {
    // Loop through all tirangles
    for (j = 0; j < triangles.length; j++) {
      // Check if this particle's index is in this triangle
      k = triangles[j].indexOf(i);
      // If it is, add its neighbors to the particles contacts list
      if (k !== -1) {
        triangles[j].forEach(function(value, index, array) {
          if (value !== i && particles[i].neighbors.indexOf(value) == -1) {
            particles[i].neighbors.push(value);
          }
        });
      }
    }
  }

  var fps = 15;
  var now;
  var then = Date.now();
  var interval = 1000 / fps;
  var delta;
  // Animation loop
  (function animloop() {
    requestAnimFrame(animloop);
    now = Date.now();
    delta = now - then;
    
    if (delta > interval) {
      then = now - (delta % interval);
      resize();
      render();
    }
  })();
}

function render() {
  if (randomMotion) {
    n++;
    if (n >= noiseLength) {
      n = 0;
    }
    nPos = noisePoint(n);
  }

  if (renderParticles) {
    // Render particles
    for (var i = 0; i < particleCount; i++) {
      particles[i].render();
    }
  }
}

function resize() {
  canvas.width = window.innerWidth * (window.devicePixelRatio || 1);
  canvas.height = canvas.width * (canvas.clientHeight / canvas.clientWidth);
}

// Particle class
var Particle = function() {
  this.x = random(-0.1, 1.1, true);
  this.y = random(-0.1, 1.1, true);
  this.z = random(0, 4);
  this.color = color;
  this.opacity = random(0.1, 1, true);
  this.flicker = 0;
  this.neighbors = []; // placeholder for neighbors
};

Particle.prototype.render = function() {
  var pos = position(this.x, this.y, this.z),
    r = ((this.z * particleSizeMultiplier) + particleSizeBase) * (sizeRatio() / 1000),
    o = this.opacity;

  context.fillStyle = this.color;
  context.globalAlpha = o;
  context.beginPath();

  context.fill();
  context.closePath();

  if (renderParticleGlare) {
    context.globalAlpha = o * glareOpacityMultiplier;

    context.ellipse(pos.x, pos.y, r * 100, r, (glareAngle - ((nPos.x - 0.5) * noiseStrength * motion)) * (Math.PI / 180), 0, 2 * Math.PI, false);
    context.fill();
    context.closePath();
  }

  context.globalAlpha = 1;
};

// Flare class


// Link class
var Link = function(startVertex, numPoints) {
  this.length = numPoints;
  this.verts = [startVertex];
  this.stage = 0;
  this.linked = [startVertex];
  this.distances = [];
  this.traveled = 0;
  this.fade = 0;
  this.finished = false;
};

// Utils
function noisePoint(i) {
  var a = nAngle * i,
    cosA = Math.cos(a),
    sinA = Math.sin(a),
    rad = nRad;
  return {
    x: rad * cosA,
    y: rad * sinA
  };
}

function position(x, y, z) {
  return {
    x: (x * canvas.width) + ((((canvas.width / 2) - mouse.x + ((nPos.x - 0.5) * noiseStrength)) * z) * motion),
    y: (y * canvas.height) + ((((canvas.height / 2) - mouse.y + ((nPos.y - 0.5) * noiseStrength)) * z) * motion)
  };
}

function sizeRatio() {
  return canvas.width >= canvas.height ? canvas.width : canvas.height;
}

function random(min, max, float) {
  return float ?
    Math.random() * (max - min) + min :
    Math.floor(Math.random() * (max - min + 1)) + min;
}

// init
if (canvas) init();

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: #000;
  background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0.00) 0%, #000000 100%);
}

#stars {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  position: absolute;
}

<script src="https://rawgit.com/ironwallaby/delaunay/master/delaunay.js"></script>
<script src="http://requirejs.org/docs/release/2.1.15/minified/require.js"></script>

<canvas id="stars" width="300" height="300"></canvas>

Answer 1

id =“identifier”是唯一的 class =“identifier”可以由项列表共享

正如您所提到的，使用class可能是一个选项，但您需要更改代码以选择该类之前的所有元素：

$(".identifier").each(function(a,b)
{
  // Actions for each element
}

使用javascript：

var elementList = document.getElementsByClassName("identifier");
var elementListSize=elementList.length;
for(var i=0;i<elementListSize;i++) {
   // Actions for each element (elementList[i])
}

对多个元素使用相同的动画

1 个答案: