Vue パーティクル エフェクトのサンプル共有

この記事では主に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 サイトの他の関連記事を参照してください。