前兩天分享了許多 Libraries，竟然分享了就要實作看看，星期一就選一個輕鬆好玩的 Particle.js 來玩玩吧！今天起範例會離開 Codepen 進入真實專案開發的環境，並以 React 作為前端框架搭配 TypeScript 撰寫，最後這幾個 Libraries 的範例會一起上到 github～感興趣的讀者到時候可以 clone 下來看看。

登登這就是今天的目標，此畫面背景的特效就是以 Particle 實作出來的：

起手式

npm install 起來，主要需要安裝 react-tsparticles，是 Particles.js 官方針對 ReactJS component ＋ Typescript 所設計的套件，tsParticles 則是把一些 v1 版本的 features 加入 tsparticles-engine，而 tsparticles-engine 為創建 particles 會需要用到的 TypeScript library，也就是 type 型別定義的檔案。

// Official tsParticles ReactJS component
npm install react-tsparticles

// tsParticles full bundle loads all the v1 features to a tsparticles-engine instance
npm install tsparticles

// A lightweight TypeScript library for creating particles
npm install tsparticles-engine

安裝完成後一步步把需要的東西 import 進來，因為現在是 v2，但我們也會用到 v1 的 features，所以在此處 loadFull 就是在初始時把 v1 的 features 通通載入，載入後再建立 Particles。

import { useCallback } from 'react';
import Particles from 'react-tsparticles';

// this is the new common package
import type { Engine } from 'tsparticles-engine';

// this function loads all the features contained in v1 package
import { loadFull } from 'tsparticles';

透過 options 設計你的 Particles

完成上述的設定之後，我們只要把 import 的 Particles 變成 jsx 的格式，並且給與 init、options 等設定值，讓動畫產生的關鍵都在 options 的參數當中，這邊舉幾個有趣的設定跟大家分享，其他的細節歡迎大家自己設定時玩玩看，就會知道這些參數分別代表的意義，也能組出屬於你自己獨一無而的動畫背景。

1. particles：主要的圖形設定
a. number：圖形的數量，越多畫面越滿
b. line_linked：圖形之間是否有連線，有的話樣式為何
c. move：圖形移動的特性

2. interactivity：與滑鼠 / 觸控的互動效果，已經幫你封裝好不用慢慢監聽
a. onhover：滑鼠移到上方的特效，主要有 grab(會把他們抓在一起)、bubble（泡泡效果） repulse（會有躲開的效果），但躲開就點擊不太到了啊 XD ?
b. onclick：點擊的特效，主要有 push（會有生出更多的效果）、remove（點擊的地方會消失）、bubble（泡泡效果，超大泡泡！）、repulse（一樣是躲開）
c. modes：可以自己自訂上述特效的效果參數

3. background：顧名思義就是你的動畫背景啦～你也可以在此處匯入 image 當作背景

const ParticlesPage = () => {
    
	// 確保載入所有需要的 features
		const particlesInit = useCallback(async (engine: Engine) => {
        await loadFull(engine);
    }, []);

	// 重頭戲在 options
    return (
        <div className="particleWrapper">
            <Particles
                init={particlesInit}
                options={{
                    fullScreen: {
                        enable: true,
                        zIndex: 1,
                    },
                    particles: {
                        number: {
                            value: 50,
                            density: {
                                enable: false,
                                value_area: 800,
                            },
                        },
                        color: {
                            value: '#fff',
                        },
                        shape: {
                            type: 'polygon',
                        },
                        opacity: {
                            value: 0.8,
                            random: false,
                            anim: {
                                enable: false,
                                speed: 1,
                                opacity_min: 0.1,
                                sync: false,
                            },
                        },
                        size: {
                            value: 4,
                            random: false,
                            anim: {
                                enable: false,
                                speed: 50,
                                size_min: 0.1,
                                sync: false,
                            },
                        },
                        rotate: {
                            value: 0,
                            random: true,
                            direction: 'clockwise',
                            animation: {
                                enable: true,
                                speed: 5,
                                sync: false,
                            },
                        },
                        line_linked: {
                            enable: true,
                            distance: 150,
                            color: '#ffffff',
                            opacity: 0.4,
                            width: 1,
                        },
                        move: {
                            enable: true,
                            speed: 2,
                            direction: 'none',
                            random: false,
                            straight: false,
                            out_mode: 'out',
                            attract: {
                                enable: false,
                                rotateX: 600,
                                rotateY: 1200,
                            },
                        },
                    },
                    interactivity: {
                        events: {
                            onhover: {
                                enable: true,
                                mode: ['repulse'],
                            },
                            onclick: {
                                enable: false,
                                mode: 'push',
                            },
                            resize: true,
                        },
                        modes: {
                            grab: {
                                distance: 400,
                                line_linked: {
                                    opacity: 1,
                                },
                            },
                            bubble: {
                                distance: 400,
                                size: 40,
                                duration: 2,
                                opacity: 8,
                                speed: 3,
                            },
                            repulse: {
                                distance: 200,
                            },
                            push: {
                                particles_nb: 4,
                            },
                            remove: {
                                particles_nb: 2,
                            },
                        },
                    },
                    retina_detect: true,
                    background: {
                        color: '#1C1454',
                        image: '',
                        position: '50% 50%',
                        repeat: 'no-repeat',
                        size: 'cover',
                    },
                }}
            />
        </div>
    );
};

export default ParticlesPage;

以上就是今天的 Particles 教學～ 希望大家玩得開心，網頁都能讓麻瓜覺得好像很厲害！