用 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