Teilen von Beispielen für Vue-Partikeleffekte

Dieser Artikel stellt Ihnen hauptsächlich den Beispielcode für Vue-Partikeleffekte vor. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber, um einen Blick darauf zu werfen. Ich hoffe, es kann allen helfen.

Erfolgseffekt:

Ja, die Punkte und Linien, die Sie oben sehen und dem Konstellationsdiagramm ähneln, werden von vue-Partikeln erstellt generiert und kann mit Mausereignissen des Benutzers interagieren.

Portal: vue-particles

Nutzungsanleitung

npm install vue-particles --save-dev

main.js-Datei:

import Vue from 'vue' 
import VueParticles from 'vue-particles' 
Vue.use(VueParticles)

App.vue-Datei – ein einfaches Beispiel:

<template> 
  <p id="app">
   <vue-particles color="#dedede"></vue-particles>
  </p>
 </template>

App.vue-Datei ——A vollständiges Beispiel:

<template> 
  <p id="app">
   <vue-particles
    color="#dedede"
    :particleOpacity="0.7"
    :particlesNumber="80"
    shapeType="circle"
    :particleSize="4"
    linesColor="#dedede"
    :linesWidth="1"
    :lineLinked="true"
    :lineOpacity="0.4"
    :linesDistance="150"
    :moveSpeed="3"
    :hoverEffect="true"
    hoverMode="grab"
    :clickEffect="true"
    clickMode="push"
   >
   </vue-particles>
  </p>
 </template>

Attribut:

• Farbe: String-Typ. Der Standardwert ist „#dedede“. Partikelfarbe.

• particleOpacity: Zahlentyp. Der Standardwert ist 0,7. Partikeltransparenz.

• particlesNumber: Zahlentyp. Der Standardwert ist 80. Anzahl der Partikel.

• shapeType: String-Typ. Der Standardwert ist „Kreis“. Verfügbare Partikeldarstellungstypen sind: „Kreis“, „Kante“, „Dreieck“, „Polygon“, „Stern“.

• particleSize: Zahlentyp. Der Standardwert ist 80. individuelle Partikelgröße.

• linesColor: String-Typ. Der Standardwert ist „#dedede“. Linienfarbe.

• linesWidth: Zahlentyp. Standard 1. Linienbreite.

• lineLinked: Boolescher Typ. Standardmäßig wahr. Ist das Kabel verfügbar?

• lineOpacity: Zahlentyp. Der Standardwert ist 0,4. Linientransparenz.

• linesDistance: Zahlentyp. Standard 150. Linienabstand.

• moveSpeed: Zahlentyp. Standard 3. Die Geschwindigkeit der Partikelbewegung.

• hoverEffect: Boolescher Typ. Standardmäßig wahr. Gibt es einen Schwebeeffekt?

• hoverMode: String-Typ. Standardmäßig wahr. Verfügbare Schwebemodi sind: „Greifen“, „Abstoßen“, „Blase“.

• clickEffect: Boolescher Typ. Standardmäßig wahr. Gibt es einen Klickeffekt?

• clickMode: String-Typ. Standardmäßig wahr. Die verfügbaren Klickmodi sind: „Push“, „Remove“, „Repulse“, „Bubble“.

Verwandte Empfehlungen:

Canvas implementiert schillernde Partikelbewegungseffekte

ThreeJS implementiert Sternenhimmelpartikel Beispiele für Bewegungseffekte teilen

Wie man mit Canvas Partikelfontänen-Animationseffekte erstellt

Das obige ist der detaillierte Inhalt vonTeilen von Beispielen für Vue-Partikeleffekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!