Next 8.x 水波纹动画

发表于 2024-01-05 分类于 hexo ， next Waline：

顶部的菜单栏的水波纹特效,做一个记录

在source/js中新建wobblewindow.js, 代码如下

(function() {
  function WobbleWindow(object, params) {
    var canvas,
      ctx;
    var mousePos = {
      x: 0,
      y: 0
    };
    var isResizing = false;
    var delayId = 0;
    var canvasContent = {};
    var points = {};

    var settings = {};
    settings.name = 'wobblew'; //名称
    settings.position = 'relative'; //相对或绝对定位
    settings.depth = -1; //zIndex的深度
    settings.overflowX = 'visible'; //水平溢出设置
    settings.overflowY = 'visible'; //垂直溢出设置
    settings.offsetX = 0; //正负值，div的大小
    settings.offsetY = 0; //正负值，div的大小
    settings.moveTypeIn = 'move'; //点跟随鼠标的方法
    settings.moveTypeOut = 'wobble'; //点返回初始位置的方法
    settings.wobbleFactor = 0.95; //控制摇晃效果
    settings.wobbleSpeed = 0.1; //控制摇晃速度
    settings.moveSpeed = 6; //控制移动速度
    settings.lineWidth = 1; //线宽

    settings.transplantLineColor = false; //true 使用对象的边框颜色
    settings.lineColor = ''; //没有值 = 没有线。使用十六进制/rgba值
    settings.transplantBodyColor = true; //true 使用对象的背景颜色
    settings.bodyColor = ''; //没有值 = 没有背景颜色。使用十六进制/rgba值
    settings.radius = 50; //半径
    settings.pointCountX = 7; //水平点的数量。必须是奇数
    settings.pointCountY = 5; //垂直点的数量。必须是奇数
    settings.movementLeft = false; //启用/禁用移动方向
    settings.movementRight = false; //启用/禁用移动方向
    settings.movementTop = false; //启用/禁用移动方向
    settings.movementBottom = true; //启用/禁用移动方向
    settings.autoResize = true; //如果为true，大小将自动调整
    settings.debug = false; //启用/禁用调试模式

    // ---
    if (params !== undefined) {
      for (var prop in params) {
        if (params.hasOwnProperty(prop) && settings.hasOwnProperty(prop)) {
          settings[prop] = params[prop];
        }
      }
    }

    // ---
    if (!object) {
      throw Error('\n' + 'No div element found');
    }
    if ((settings.pointCountX % 2) === 0) {
      throw Error('\n' + 'Param pointCountX must be an odd integer');
    }
    if ((settings.pointCountY % 2) === 0) {
      throw Error('\n' + 'Param pointCountY must be an odd integer');
    }

    // ---
    HTMLElement.prototype.__defineGetter__("currentStyle", function() {
      return this.ownerDocument.defaultView.getComputedStyle(this, null);
    });
    // ---
    function init() {
      canvas = document.createElement('canvas');
      canvas.id = settings.name;
      canvas.style.position = 'absolute';
      canvas.style.zIndex = settings.depth.toString();
      canvas.addEventListener('mousemove', mouseMoveHandler);
      canvas.addEventListener('mouseleave', mouseLeaveHandler);
      ctx = canvas.getContext('2d');
      // element.insertBefore(canvas, element.firstChild);
      object.appendChild(canvas);
      object.style.position = settings.position;
      object.style.zIndex = (settings.depth + 1).toString();
      if (settings.overflowX.length > 0) {
        object.parentElement.style.overflowX = settings.overflowX;
      };
      if (settings.overflowY.length > 0) {
        object.parentElement.style.overflowY = settings.overflowY;
      };
      if (settings.transplantBodyColor) {
        if (object.currentStyle.backgroundColor.length > 0) {
          settings.bodyColor = object.currentStyle.backgroundColor;
        }
      };
      if (settings.transplantLineColor) {
        if (object.currentStyle.borderColor.length > 0) {
          settings.lineColor = object.currentStyle.borderColor;
        }
      };
      canvasContent.elementWidth = object.offsetWidth;
      canvasContent.elementHeight = object.offsetHeight;
      // ---
      resizeCanvas();
      addWindow();
      animloop();
      // -----------
      if (settings.transplantBodyColor) {
        if (object.currentStyle.backgroundColor.length > 0) {
          if (object.className.length > 0) {
            object.className += ' wobbleTransparentBK';
          } else {
            object.className = ' wobbleTransparentBK';
          };
        }
      };
      if (settings.transplantLineColor) {
        if (object.currentStyle.borderColor.length > 0) {
          if (object.className.length > 0) {
            object.className += ' wobbleTransparentLine';
          } else {
            object.className = ' wobbleTransparentLine';
          };
        }
      };
    };

    // ---
    function resizeCanvas() {
      canvasContent.width = canvasContent.elementWidth + settings.offsetX * 2;
      canvasContent.height = canvasContent.elementHeight + settings.offsetY * 2;

      if (settings.radius > 0) { //round,  ceil
        settings.pointCountX = Math.round(canvasContent.width / settings.radius);
        settings.pointCountY = Math.round(canvasContent.height / settings.radius);
      };
      if (settings.pointCountX % 2 == 0) {
        settings.pointCountX = settings.pointCountX + 1;
      };
      if (settings.pointCountY % 2 == 0) {
        settings.pointCountY = settings.pointCountY + 1;
      };

      points.spaceX = Math.min(canvasContent.elementWidth, canvasContent.width / (settings.pointCountX - 1));
      points.spaceY = Math.min(canvasContent.elementHeight, canvasContent.height / (settings.pointCountY + 1));
      points.radius = Math.ceil(Math.max(points.spaceX, points.spaceY));

      ///--------------new1------------------
      canvasContent.left = 0;
      canvasContent.top = 0;
      settings.canvasWidth = canvasContent.elementWidth;
      if (settings.movementLeft) {
        canvas.style.left = -points.radius + 'px';
        settings.canvasWidth += points.radius;
        canvasContent.left = points.radius - settings.offsetX;
      } else {
        canvas.style.left = -settings.offsetX + 'px';
      };
      if (settings.movementRight)
        settings.canvasWidth += points.radius;

      settings.canvasHeight = canvasContent.elementHeight;
      if (settings.movementTop) {
        canvas.style.top = -points.radius + 'px';
        settings.canvasHeight += points.radius;
        canvasContent.top = points.radius - settings.offsetY;
      } else {
        canvas.style.top = -settings.offsetY + 'px';
      };
      if (settings.movementBottom)
        settings.canvasHeight += points.radius;

      canvas.width = settings.canvasWidth;
      canvas.height = settings.canvasHeight;
    };

    // ---
    function addWindow() {
      points.pointHolder = [];
      // ---
      var point;
      var flag;
      var i,
        l;
      // ---
      //top
      flag = true;
      for (i = 0, l = settings.pointCountX; i < l; i++) {
        if (settings.movementTop) {
          if (flag) {
            point = addPoint(canvasContent.left + i * points.spaceX, canvasContent.top, 0, 0, 0, true, points.spaceX, 'P', settings.debug);
            flag = false;
          } else {
            point = addPoint(canvasContent.left + i * points.spaceX, canvasContent.top, 0, 0, 0, true, points.spaceX, 'C', settings.debug);
            flag = true;
          }
          if (i === 0 || i === l - 1) {
            point.color = '#00FF00';
            point.movement = false;
          }
          points.pointHolder.push(point);
        } else {
          if (i === 0 || i === l - 1) {
            point = addPoint(canvasContent.left + i * points.spaceX, canvasContent.top, 0, 0, 0, false, 0, 'P', settings.debug);
          }
          points.pointHolder.push(point);
        }
      }

      // ---
      //right
      flag = false;
      for (i = 1, l = settings.pointCountY + 1; i < l; i++) {
        if (settings.movementRight) {
          if (flag) {
            point = addPoint(canvasContent.left + canvasContent.width, canvasContent.top + i * points.spaceY, 0, 0, 0, true, points.spaceY, 'P', settings.debug);
            flag = false;
          } else {
            point = addPoint(canvasContent.left + canvasContent.width, canvasContent.top + i * points.spaceY, 0, 0, 0, true, points.spaceY, 'C', settings.debug);
            flag = true;
          }
          points.pointHolder.push(point);
        } else {
          if (i === 1) {
            point = addPoint(canvasContent.left + canvasContent.width, canvasContent.top + (i - 1) * points.spaceY, 0, 0, 0, false, 0, 'P', settings.debug);
          } else if (i === settings.pointCountY) {
            point = addPoint(canvasContent.left + canvasContent.width, canvasContent.top + (i + 1) * points.spaceY, 0, 0, 0, false, 0, 'P', settings.debug);
          }
          points.pointHolder.push(point);
        }
      }

      // ---
      //bottom
      flag = true;
      for (i = settings.pointCountX - 1, l = -1; i > l; i--) {
        if (settings.movementBottom) {
          if (flag) {
            point = addPoint(canvasContent.left + i * points.spaceX, canvasContent.top + canvasContent.height, 0, 0, 0, true, points.spaceX, 'P', settings.debug);
            flag = false;
          } else {
            point = addPoint(canvasContent.left + i * points.spaceX, canvasContent.top + canvasContent.height, 0, 0, 0, true, points.spaceX, 'C', settings.debug);
            flag = true;
          }
          if (i === 0 || i === settings.pointCountX - 1) {
            point.color = '#00FF00';
            point.movement = false;
          }
          points.pointHolder.push(point);
        } else {
          if (i === 0 || i === settings.pointCountX - 1) {
            point = addPoint(canvasContent.left + i * points.spaceX, canvasContent.top + canvasContent.height, 0, 0, 0, false, 0, 'P', settings.debug);
          }
          points.pointHolder.push(point);
        }
      }

      // ---
      //left
      flag = false;
      for (i = settings.pointCountY, l = -1; i > l; i--) {
        if (settings.movementLeft) {
          if (flag) {
            point = addPoint(canvasContent.left, canvasContent.top + i * points.spaceY, 0, 0, 0, true, points.spaceY, 'P', settings.debug);
            flag = false;
          } else {
            point = addPoint(canvasContent.left, canvasContent.top + i * points.spaceY, 0, 0, 0, true, points.spaceY, 'C', settings.debug);
            flag = true;
          }
          points.pointHolder.push(point);
        } else {
          if (i === 0) {
            point = addPoint(canvasContent.left, canvasContent.top + i * points.spaceY, 0, 0, 0, false, 0, 'P', settings.debug);
          } else if (i === settings.pointCountY) {
            point = addPoint(canvasContent.left, canvasContent.top + (i + 1) * points.spaceY, 0, 0, 0, false, 0, 'P', settings.debug);
          }
          points.pointHolder.push(point);
        }
      }
    }

    // ---
    function addPoint(x, y, xp, yp, distance, movement, radius, type, visible) {
      var point = {};
      point.x = x;
      point.y = y;
      point.xp = x;
      point.yp = y;
      point.sx = 0;
      point.sy = 0;
      point.distance = distance;
      point.movement = movement;
      point.radius = radius;
      point.type = type;
      point.visible = visible;
      return point;
    };

    // ---
    window.requestAnimFrame = (function() {
      return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) {
        window.setTimeout(callback, 1000 / 60);
      };
    })();

    function animloop() {
      requestAnimFrame(animloop);
      render();
      if (settings.autoResize) {
        resize();
      }
    };

    // ---
    WobbleWindow.prototype.render = render;
    function render(color) {
      ctx.clearRect(0, 0, settings.canvasWidth, settings.canvasHeight);

      // ---
      var windowPoints = points.pointHolder;
      var i,
        l;

      // ---
      ctx.beginPath();
      ctx.moveTo(windowPoints[0].x, windowPoints[0].y);
      for (i = 1, l = windowPoints.length; i < l; i += 2) {
        var point = windowPoints[i];

        // ---
        var dx = mousePos.x - point.xp;
        var dy = mousePos.y - point.yp;
        point.distance = Math.sqrt(dx * dx + dy * dy);
        if (point.distance < point.radius) {
          if (settings.moveTypeIn === 'wobble') {
            point.sx = point.sx * settings.wobbleFactor + (mousePos.x - point.x) * settings.wobbleSpeed;
            point.sy = point.sy * settings.wobbleFactor + (mousePos.y - point.y) * settings.wobbleSpeed;
            point.x = point.x + point.sx;
            point.y = point.y + point.sy;
          } else if (settings.moveTypeIn === 'move') {
            point.x -= (point.x - mousePos.x) / settings.moveSpeed;
            point.y -= (point.y - mousePos.y) / settings.moveSpeed;
          }
        } else {
          if (settings.moveTypeOut === 'wobble') {
            point.sx = point.sx * settings.wobbleFactor + (point.xp - point.x) * settings.wobbleSpeed;
            point.sy = point.sy * settings.wobbleFactor + (point.yp - point.y) * settings.wobbleSpeed;
            point.x = point.x + point.sx;
            point.y = point.y + point.sy;
          } else if (settings.moveTypeOut === 'move') {
            point.x -= (point.x - point.xp) / settings.moveSpeed;
            point.y -= (point.y - point.yp) / settings.moveSpeed;
          }
        }

        // ---
        var pointBefor = windowPoints[i - 1];
        var pointAfter = windowPoints[i + 1];
        if (i > 2 && i < windowPoints.length - 2) {
          if (pointBefor.movement) {
            pointBefor.x = (windowPoints[i - 2].x + point.x) / 2;
            pointBefor.y = (windowPoints[i - 2].y + point.y) / 2;
          }
          if (pointAfter.movement) {
            pointAfter.x = (windowPoints[i + 2].x + point.x) / 2;
            pointAfter.y = (windowPoints[i + 2].y + point.y) / 2;
          }
        }
        ctx.quadraticCurveTo(point.x, point.y, pointAfter.x, pointAfter.y);
      }

      // ---
      if (settings.lineColor.length > 0) {
        ctx.lineWidth = settings.lineWidth;
        ctx.strokeStyle = settings.lineColor;
        ctx.stroke();
      }
      if (settings.bodyColor.length > 0) {
        ctx.fillStyle = settings.bodyColor;
        ctx.fill();
      }
      // ctx.globalCompositeOperation = 'source-out';
      // ctx.fillStyle = "rgba(0, 0, 0, 1)";
      // ctx.fill();

      // ---
      if (settings.debug) {
        for (i = 0, l = windowPoints.length; i < l; i++) {
          var point = windowPoints[i];
          if (point.visible) {
            if (point.type === 'P') {
              drawCircle(point.x, point.y, 3, '#FF0000');
            } else {
              drawCircle(point.x, point.y, 6, '#FF00FF');
            }
            if (point.color) {
              drawCircle(point.x, point.y, 12, point.color);
            }
          }
        }
        ctx.strokeStyle = '#000000';
        ctx.strokeRect(0, 0, settings.canvasWidth, settings.canvasHeight);
      }
    };

    // ---
    function delayFlag() {
      resizeCanvas();
      addWindow();
      isResizing = false;
    };

    function resize() {
      if (!isResizing) {
        if (canvasContent.elementWidth !== object.offsetWidth || canvasContent.elementHeight !== object.offsetHeight) {
          // -----------
          isResizing = true;
          canvasContent.elementWidth = object.offsetWidth;
          canvasContent.elementHeight = object.offsetHeight;
          // 防止闪白
          delayId = window.setTimeout(delayFlag, 10);
        }
      }
    };

    // ---
    function drawCircle(x, y, radius, color) {
      ctx.beginPath();
      ctx.arc(x, y, radius, 0, 2 * Math.PI);
      ctx.strokeStyle = color;
      ctx.stroke();
    };

    // ---
    function mouseMoveHandler(event) {
      mousePos = getMousePos(canvas, event);
    };

    function mouseLeaveHandler(event) {
      mousePos.x = -10000;
      mousePos.y = -10000;
    };

    // ---
    function getMousePos(canvas, event) {
      var rect = canvas.getBoundingClientRect();
      return {
        x: event.clientX - rect.left,
        y: event.clientY - rect.top
      };
    };

    // ---
    init();
  };
  window.WobbleWindow = WobbleWindow;
}());

在source/js 中新建 wobble-header.js, 代码如下

document.addEventListener('DOMContentLoaded', () => {
  header = document.querySelector('.column');
  if (header) {
    new WobbleWindow(header);
  }
});

在什么类上面添加水波纹的动画,就写哪个类

最后在source/_data/body-end.njk中把这两个js引入

1 2	<script src="/js/wobblewindow.js"></script> <script src="/js/wobble-header.js"></script>

如果_data下没有body-end.njk,需要新增一个,并且在 _config.yml 中开启

1 2	custom_file_path: bodyEnd: source/_data/body-end.njk

以上，就可以实现了，在我的博客里就可以看到效果，如有错误，欢迎大佬指出

-------------本文结束感谢您的阅读-------------