jQuery realisiert dynamische Partikeleffekte

In diesem Artikel wird der spezifische Code von jQuery zur Erzielung dynamischer Partikeleffekte zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Rendern

Code

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

<Kopf>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-kompatibel" content="IE=edge">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <title>Dokument</title>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <div id="jsi-particle-container" class="container"></div>
  <Stil>
    html,
    Körper {
      Breite: 100 %;
      Höhe: 100%;
      Rand: 0;
      Polsterung: 0;
      Überlauf: versteckt;
    }
    
    .container {
      Breite: 100 %;
      Höhe: 100%;
      Rand: 0;
      Polsterung: 0;
      Hintergrundfarbe: #000000;
    }
  </Stil>
</Kopf>

<Text>
  <Skript>
    var RENDERER = {
      TEILCHENANZAHL: 1000,
      PARTIKELRADIUS: 1,
      MAX_ROTATION_ANGLE: Math.PI / 60,
      ÜBERSETZUNGSANZAHL: 500,

      init: Funktion (Strategie) {
        this.setParameters(Strategie);
        dies.createParticles();
        dies.setupFigure();
        diese.reconstructMethod();
        this.bindEvent();
        dies.drawFigure();
      },
      setParameters: Funktion(Strategie) {
        dies.$window = $(window);

        dies.$container = $('#jsi-particle-container');
        diese.Breite = diese.$container.Breite();
        diese.Höhe = diese.$container.Höhe();

        dies.$canvas = $('<canvas />').attr({
          Breite: diese.Breite,
          Höhe: diese.Höhe
        }).appendTo(diesen.$container);
        dies.Kontext = dies.$canvas.get(0).getContext('2d');

        dies.center = {
          x: diese.Breite / 2,
          y: diese.Höhe / 2
        };

        dies.rotationX = dies.MAX_ROTATION_ANGLE;
        dies.rotationY = dies.MAX_ROTATION_ANGLE;
        dieser.StrategieIndex = 0;
        diese.Übersetzungsanzahl = 0;
        dies.theta = 0;

        diese.strategien = strategie.getStrategies();
        diese.partikel = [];
      },
      Partikel erstellen: Funktion() {
        für (var i = 0; i < this.PARTICLE_COUNT; i++) {
          this.particles.push(neues TEILCHEN(this.center));
        }
      },
      Rekonstruktionsmethode: Funktion () {
        dies.setupFigure = dies.setupFigure.bind(dies);
        dies.drawFigure = dies.drawFigure.bind(dies);
        dies.changeAngle = dies.changeAngle.bind(dies);
      },
      bindEvent: Funktion() {
        dies.$container.on('klicken', dies.setupFigure);
        dies.$container.on('Mausbewegung', dies.changeAngle);
      },
      Winkel ändern: Funktion(Ereignis) {
        var offset = this.$container.offset(),
          x = event.clientX - offset.links + this.$window.scrollLeft(),
          y = event.clientY - offset.oben + this.$window.scrollTop();

        diese.rotationX = (diese.Mitte.y - y) / diese.Mitte.y * diese.MAX_ROTATION_ANGLE;
        diese.rotationY = (diese.Mitte.x - x) / diese.Mitte.x * diese.MAX_ROTATION_ANGLE;
      },
      setupFigure: Funktion() {
        für (var i = 0, Länge = diese.Partikel.Länge; i < Länge; i++) {
          diese.Partikel[i].setAxis(diese.Strategien[dieser.StrategieIndex]());
        }
        wenn (++dieser.StrategieIndex == diese.Strategien.Länge) {
          dieser.StrategieIndex = 0;
        }
        diese.Übersetzungsanzahl = 0;
      },
      zeichneAbbildung: function() {
        AnfrageAnimationFrame(diese.drawFigure);

        this.context.fillStyle = "rgba(0, 0, 0, 0,2)";
        dieser.Kontext.fillRect(0, 0, diese.Breite, diese.Höhe);

        für (var i = 0, Länge = diese.Partikel.Länge; i < Länge; i++) {
          var Achse = diese.Partikel[i].getAxis2D(diese.Theta);

          dieser.Kontext.beginPath();
          this.context.fillStyle = Achse.Farbe;
          this.context.arc(Achse.x, Achse.y, this.PARTICLE_RADIUS, 0, Math.PI * 2, false);
          dies.Kontext.füllen();
        }
        dies.theta++;
        dies.theta %= 360;

        für (var i = 0, Länge = diese.Partikel.Länge; i < Länge; i++) {
          diese.Partikel[i].rotateX(diese.RotationX);
          diese.Partikel[i].rotateY(diese.RotationY);
        }
        dies.translationCount++;
        diese.Übersetzungsanzahl %= diese.TRANSLATION_COUNT;

        wenn (this.translationCount == 0) {
          dies.setupFigure();
        }
      }
    };
    var STRATEGIE = {
      Streuradius: 150,
      KEGEL_ASPEKT_VERHÄLTNIS: 1,5,
      RING_COUNT: 5,

      getStrategies: Funktion() {
        var Strategien = [];

        für (var i in diesem) {
          wenn (dies[i] == argumente.callee || Typ von diesem[i] != 'Funktion') {
            weitermachen;
          }
          Strategien.push(dies[i].binden(dies));
        }
        Rückgabestrategien;
      },
      createSphere: Funktion() {
        var cosTheta = Math.random() * 2 - 1,
          sinTheta = Math.sqrt(1 - cosTheta * cosTheta),
          phi = Math.random() * 2 * Math.PI;

        zurückkehren {
          x: this.SCATTER_RADIUS * sinTheta * Math.cos(phi),
          y: this.SCATTER_RADIUS * sinTheta * Math.sin(phi),
          z: this.SCATTER_RADIUS * cosTheta,
          Farbton: Math.round(phi / Math.PI * 30)
        };
      },
      erstelleTorus: Funktion() {
        var theta = Math.random() * Math.PI * 2,
          x = dieser.SCATTER_RADIUS + dieser.SCATTER_RADIUS / 6 * Math.cos(theta),
          y = dieser.SCATTER_RADIUS / 6 * Math.sin(theta),
          phi = Math.random() * Math.PI * 2;

        zurückkehren {
          x: x * Math.cos(phi),
          j: j,
          z: x * Math.sin(phi),
          Farbton: Math.round(phi / Math.PI * 30)
        };
      },
      erstelleKegel: Funktion() {
        var status = Math.random() > 1 / 3,
          X,
          ja,
          phi = Math.random() * Math.PI * 2,
          Rate = Math.tan(30 / 180 * Math.PI) / this.CONE_ASPECT_RATIO;

        wenn (Status) {
          y = this.SCATTER_RADIUS * (1 - Math.random() * 2);
          x = (dieser.SCATTER_RADIUS – y) * Rate;
        } anders {
          y = -dies.SCATTER_RADIUS;
          x = this.SCATTER_RADIUS * 2 * Rate * Math.random();
        }
        zurückkehren {
          x: x * Math.cos(phi),
          j: j,
          z: x * Math.sin(phi),
          Farbton: Math.round(phi / Math.PI * 30)
        };
      },
      erstelleVase: Funktion() {
        var theta = Math.random() * Math.PI,
          x = Math.abs(dieser.SCATTER_RADIUS * Math.cos(theta) / 2) + dieser.SCATTER_RADIUS / 8,
          y = dieser.SCATTER_RADIUS * Math.cos(theta) * 1,2,
          phi = Math.random() * Math.PI * 2;

        zurückkehren {
          x: x * Math.cos(phi),
          j: j,
          z: x * Math.sin(phi),
          Farbton: Math.round(phi / Math.PI * 30)
        };
      }
    };
    var TEILCHEN = Funktion(Mitte) {
      dies.center = Mitte;
      dies.init();
    };
    PARTIKEL.prototyp = {
      FEDER: 0,01,
      REIBUNG: 0,9,
      FOKUS_POSITION: 300,
      FARBE: 'hsl(%Farbton, 100%, 70%)',

      init: Funktion() {
        dies.x = 0;
        dies.y = 0;
        dies.z = 0;
        dies.vx = 0;
        dies.vy = 0;
        dies.vz = 0;
        diese.Farbe;
      },
      setAxis: Funktion(Achse) {
        dies.übersetzen = wahr;
        dies.nächstesX = Achse.x;
        dies.nächstesY = Achse.y;
        dies.nächsteZ = Achse.z;
        dieser.Farbton = Achse.Farbton;
      },
      rotateX: Funktion(Winkel) {
        var sin = Math.sin(Winkel),
          cos = Math.cos(Winkel),
          nächstesY = dies.nächstesY * cos - dies.nächstesZ * sin,
          nextZ = dies.nextZ * cos + dies.nextY * sin,
          y = dies.y * cos - dies.z * sin,
          z = dies.z * cos + dies.y * sin;

        dies.nächstesY = nächstesY;
        dies.nextZ = nextZ;
        dies.y = y;
        dies.z = z;
      },
      rotateY: Funktion(Winkel) {
        var sin = Math.sin(Winkel),
          cos = Math.cos(Winkel),
          nächstesX = dies.nächstesX * cos - dies.nächstesZ * sin,
          nextZ = dies.nextZ * cos + dies.nextX * sin,
          x = dies.x * cos - dies.z * sin,
          z = dies.z * cos + dies.x * sin;

        dies.nächstesX = nächstesX;
        dies.nextZ = nextZ;
        dies.x = x;
        dies.z = z;
      },
      rotateZ: Funktion(Winkel) {
        var sin = Math.sin(Winkel),
          cos = Math.cos(Winkel),
          nächstesX = dies.nächstesX * cos - dies.nächstesY * sin,
          nächstesY = dieses.nächstesY * cos + dieses.nächstesX * sin,
          x = dies.x * cos - dies.y * sin,
          y = dies.y * cos + dies.x * sin;

        dies.nächstesX = nächstesX;
        dies.nächstesY = nächstesY;
        dies.x = x;
        dies.y = y;
      },
      getAxis3D: Funktion() {
        dies.vx += (dieses.nextX - dies.x) * dies.SPRING;
        dies.vy += (dieses.nextY - dies.y) * dies.SPRING;
        dies.vz += (dieses.nextZ - dies.z) * dies.SPRING;

        dies.vx *= dies.FRICTION;
        dies.vy *= dies.FRICTION;
        dies.vz *= dies.FRICTION;

        dies.x += dies.vx;
        dies.y += dies.vy;
        dies.z += dies.vz;

        zurückkehren {
          x: dies.x,
          y: dies.y,
          z: dies.z
        };
      },
      getAxis2D: Funktion (Theta) {
        var Achse = this.getAxis3D(),
          Skalierung = diese.FOCUS_POSITION / (diese.FOCUS_POSITION + Achse.z);

        zurückkehren {
          x: this.center.x + axis.x * Maßstab,
          y: this.center.y - axis.y * Skalierung,
          Farbe: this.COLOR.replace('%hue', this.hue + theta)
        };
      }
    };
    $(Funktion() {
      RENDERER.init(STRATEGIE);
    });
  </Skript>
</body>

</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren: