この記事では主にvueパーティクルエフェクトのサンプルコードを紹介していますが、編集者が非常に良いと思ったので、参考として共有させていただきます。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。
達成効果:
はい、上の図にあるコンスタレーション ダイアグラムに似た点と線は vue-particle によって生成され、ユーザーのマウス イベントと相互作用できます。
ポータル: vue-particles
使用方法チュートリアル
npm install vue-particles --save-dev
main.js ファイル:
import Vue from 'vue' import VueParticles from 'vue-particles' Vue.use(VueParticles)
App.vue ファイル - 簡単な例:
<template> <p id="app"> <vue-particles color="#dedede"></vue-particles> </p> </template>
アプリ .vue ファイル -完全な例:
<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>
プロパティ:
color: 文字列型。デフォルトは「#dedede」です。粒子の色。
particleOpacity: 数値タイプ。デフォルトは 0.7 です。粒子の透明度。
particlesNumber: 数値タイプ。デフォルトは 80 です。パーティクルの数。
shapeType: 文字列型。デフォルトは「円」です。利用可能なパーティクルの外観タイプは、「円」、「エッジ」、「三角形」、「多角形」、「星」です。
particleSize: 数値タイプ。デフォルトは 80 です。個々の粒子サイズ。
linesColor:文字列タイプ。デフォルトは「#dedede」です。線の色。
linesWidth: 数値タイプ。デフォルトは 1。線幅。
lineLinked: ブール型。デフォルトは true。ケーブルは利用可能ですか?
lineOpacity: 数値タイプ。デフォルトは 0.4 です。線の透明度。
linesDistance: 数値タイプ。デフォルトは 150。ラインの距離。
moveSpeed: 数値タイプ。デフォルトは 3。パーティクルの移動速度。
hoverEffect: ブール型。デフォルトは true。ホバー効果はありますか?
hoverMode: 文字列型。デフォルトは true。利用可能なホバー モードは、「グラブ」、「反発」、「バブル」です。
clickEffect: ブール型。デフォルトは true。クリック効果はありますか?
clickMode: 文字列型。デフォルトは true。利用可能なクリック モードは、「プッシュ」、「削除」、「反発」、「バブル」です。
関連する推奨事項:
Canvas は、めくるめくパーティクルの動きのエフェクトを実現します
threeJS は星空のパーティクルの動きのエフェクトを実装し、サンプルを共有します
Canvas を使用してパーティクルの噴水アニメーションエフェクトを作成する方法
以上がVue パーティクル エフェクトのサンプル共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。