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:
|
<<: Installation und Verwendung der MySQL MyCat-Middleware
>>: Implementierung eines Tomcat-Images, das mit Dockerfile basierend auf Alpine erstellt wurde
Artikel empfehlen
Detaillierte Erläuterung der Konfigurationsmethode „Groß-/Kleinschreibung ignorieren“ für MySQL-Tabellennamen
Standardmäßig unterscheidet MySQL unter Linux zwi...
Implementierung eines Docker-Cross-Host-Netzwerks (Overlay)
1. Docker-Cross-Host-Kommunikation Zu den hostübe...
Rendern im Vue-Scaffolding verstehen
Im Vue-Gerüst können wir sehen, dass im neuen Vue...
HTML-Grundlagen-Zusammenfassungsempfehlung (Textformat)
HTML-Tags zur Textformatierung 標簽 描述 <b> 定義...
VMware Workstation 14 Pro installiert CentOS 7.0
Die spezifische Methode zur Installation von Cent...
Verstehen Sie das Prinzip des Seitenersetzungsalgorithmus anhand von Codebeispielen
Algorithmus zum Ersetzen von Seiten: Das Wesentli...
Tutorial zur Installation und Konfiguration von VMware Tools für Ubuntu
Vor einiger Zeit hat der Blogger das Ubuntu-Syste...
Detaillierte Erklärung der Semiotik in Html/CSS
Basierend auf Theorien wie Saussures Sprachphilos...
So starten Sie das Spring-Boot-Projekt mit dem integrierten Linux-System in Win10
1. Installieren Sie das integrierte Linux-Subsyst...
Das WeChat-Applet „Scroll-View“ implementiert eine Lösung zum doppelten Laden von Daten beim Hochziehen
In der Scroll-Ansicht des WeChat-Applets treten b...
Installations- und Nutzungsanalyse von Portainer, einem visuellen UI-Verwaltungstool für Docker
Portainer ist ein hervorragendes grafisches Verwa...
Auszeichnungssprache - Anker
Zurück: Markup Language - Phrasenelemente Original...
Verwenden Sie eine DIV-Maske, um das Problem zu lösen, dass das direkte Aktivieren des Kontrollkästchens mit der Maus ungültig ist
Während des Front-End-Entwicklungsprozesses trat e...
JavaScript zur Implementierung eines einziehbaren sekundären Menüs
Der spezifische Code zur Implementierung des einz...
CenterOS7 Installations- und Konfigurationsumgebung jdk1.8 Tutorial
1. Deinstallieren Sie zuerst das mit CenterOS gel...