用 particle 和鼠標軌跡裝飾我的網站

輕戳這裏查看粒子和軌跡效果。

粒子動畫使用了著名的 particles庫，至於鼠標軌跡則是借鑑了這裏的效果。到此爲止想寫一篇總結來記錄下使用這些工具的心得。關於這個粒子庫，其實已經十分紅熟了，以致於 jQuery 中也有其衍生的插件。這裏照着配置寫就是了。由於個人網站基於 react 因此使用 particle 須要用 react 的方式，以下：

import React from "react";
import Particles from "react-particles-js";
import propsP from "./particleProps";
import WordCard from "./utility/wordCard";
import MouseTrail from "./utility/MouseTrail";

export default class Home extends React.Component {

  render() {
    console.log(words);
    return (
      <div> <MouseTrail /> <Particles style={{ position: "fixed", zIndex: -1 }} params={propsP} /> </div> ) } } 複製代碼

接下來談談在實現鼠標手勢的時候，應用的一些有趣的東西。它們是：

• mathcMedia
• requestAnimationFrame
• React.createRef()

以上幾個知識點比較零碎，咱們仍是經過整理一份實現鼠標軌跡的 todolist，來逐步介紹。

關於最終實現，源碼在這裏。鼠標軌跡的場景十分簡單：當鼠標在頁面中劃過期留下一串軌跡，而後逐漸消失。那麼咱們須要有如下工做準備：

1. 一個容器用來繪製鼠標軌跡，有兩種方式：div 或者 canvas。因爲直接操做 DOM 帶來的開銷比較大，加上後面須要監聽鼠標繪製，若是大量對頁面進行 div 的操做，不免體驗很差，何況在 react 環境下，直接操做 DOM 也是不大建議的。
2. 初始化容器，用來主要是設置容器寬高，這裏須要注意一個高度問題。很少解釋，直接貼代碼應該好理解：

   document.body.clientHeight < window.innerHeight ? window.innerHeight : document.body.clientHeight,
   複製代碼

3. 監聽整個文檔的 mousemove 事件，在鼠標移動的時候，繪製相應位置的點，由變化的點組成軌跡。由於使用 canvas 繪製點位，須要用到相應 API，好比：getContext。這時候咱們的 React.createRef()，就能夠大顯身手了。關於它的使用注意，react 官方文檔有詳細說明，再也不贅述。
4. 須要注意的是，要判斷當前設備是否支持鼠標，這就用到了 matchMedia。我仍是初次認識這個東西，其實它能夠理解爲對 @media 進行的 get 操做。只是在咱們的例子中，只須要獲取 pointer: fine 的信息就足夠了。
5. 等到以上工做完成，只須要繪製動畫幀就好。有代碼以下：

   requestAnimationFrame(animatePoints);
    // setInterval(animatePoints, 1000/60)
   複製代碼

   關於 requestAnimationFrame 替代 setInterval 或 setTimeout 的優點以及做用，已經有不少文章能夠參考，相信咱們看的異曲同工。

關於鼠標軌跡的 todoList 差很少是這些，具體實現起來，仍是有一些細節須要注意，好比在拖拽時會產生大量的 point 繪製，如何及時有效地清空，能夠在每次渲染給每一個 point 添加增長生命時間，當最早繪製的點的生命時間超過咱們定義的週期時，就從繪製隊列裏剔除。至於繪製圖形的細節，這個就看我的喜愛了。

參考資料：

• 淺析 requestAnimationFrame