用 particle 和鼠标轨迹装饰个人网站轻戳这里查看粒子和轨迹效果。粒子动画使用了著名的 particles库，至

轻戳这里查看粒子和轨迹效果。

粒子动画使用了著名的 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，来逐步介绍。

关于最终实现，源码在这里。鼠标轨迹的场景十分简单：当鼠标在页面中划过时留下一串轨迹，然后逐渐消失。那么我们需要有以下工作准备：

一个容器用来绘制鼠标轨迹，有两种方式：div 或者 canvas。由于直接操作 DOM 带来的开销比较大，加上后面需要监听鼠标绘制，如果大量对页面进行 div 的操作，难免体验不好，况且在 react 环境下，直接操作 DOM 也是不大建议的。
初始化容器，用来主要是设置容器宽高，这里需要注意一个高度问题。不多解释，直接贴代码应该好理解：
```
document.body.clientHeight < window.innerHeight ? window.innerHeight : document.body.clientHeight,
```
监听整个文档的 mousemove 事件，在鼠标移动的时候，绘制相应位置的点，由变化的点组成轨迹。因为使用 canvas 绘制点位，需要用到相应 API，比如：getContext。这时候我们的 React.createRef()，就可以大显身手了。关于它的使用注意，react 官方文档有详细说明，不再赘述。
需要注意的是，要判断当前设备是否支持鼠标，这就用到了 matchMedia。我还是初次认识这个东西，其实它可以理解为对 @media 进行的 get 操作。只是在我们的例子中，只需要获取 pointer: fine 的信息就足够了。
等到以上工作完成，只需要绘制动画帧就好。有代码如下：
```
 requestAnimationFrame(animatePoints);
 // setInterval(animatePoints, 1000/60)
```
关于 requestAnimationFrame 替代 setInterval 或 setTimeout 的优势以及作用，已经有很多文章可以参考，相信我们看的殊途同归。

关于鼠标轨迹的 todoList 差不多是这些，具体实现起来，还是有一些细节需要注意，比如在拖拽时会产生大量的 point 绘制，如何及时有效地清空，可以在每次渲染给每个 point 添加增加生命时间，当最先绘制的点的生命时间超过我们定义的周期时，就从绘制队列里剔除。至于绘制图形的细节，这个就看个人喜好了。

参考资料：

浅析 requestAnimationFrame