對多個元素使用相同的動畫

Question

我有這個工作的JavaScript畫布動畫，但是我想多次使用它，目前只能用id為“ stars”的一個canvas元素來使用它。 我是否可以為他們添加一個類，然后獲取元素類和循環，或者實現此目的的最佳解決方案是什么？ 我不想重復太多，因為我可以在不同頁面上使用動畫。

 // 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([px * c, py * 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])
}