网格波动动画效果-html代码-BFW代码库

代码语言：html
所属分类：动画
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
html, body {
    margin: 0px;
    padding: 0px;
    height: 100%; }

body {
    background-color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
}
#svg
{
    background-color: #333;
}
</style>

</head>
<body translate="no">
<svg id="svg" />

<script >
"use strict";
var __extends = this && this.__extends || function () {
  var extendStatics = function (d, b) {
    extendStatics = Object.setPrototypeOf ||
    { __proto__: [] } instanceof Array && function (d, b) {d.__proto__ = b;} ||
    function (d, b) {for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];};
    return extendStatics(d, b);
  };
  return function (d, b) {
    extendStatics(d, b);
    function __() {this.constructor = d;}
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  };
}();
var main;
var Main = /** @class */function () {
  function Main() {
    var _this = this;
    var interval = function () {
      _this.enterFrame();
    };
    var resize = function () {
      _this.resize();
    };
    this._viewManager = new ViewManager();
    window.addEventListener('resize', resize);
    var fps = 60 / 1000;
    setInterval(interval, fps);
  }
  Main.prototype.enterFrame = function () {
    this._viewManager.enterFrame();
  };
  Main.prototype.resize = function () {
    this._viewManager.resize();
  };
  return Main;
}();
var ViewManager = /** @class */function () {
  function ViewManager() {
    //
    this._dragPointList = [];
    var svg = document.getElementById("svg");
    var lineLayer = document.createElementNS("http://www.w3.org/2000/svg", "g");
    svg.appendChild(lineLayer);
    this._pointLayer = document.createElementNS("http://www.w3.org/2000/svg", "g");
    svg.appendChild(this._pointLayer);
    //
    this._lineManager = new LineManager(lineLayer);
    this.resize();
  }
  ViewManager.prototype.enterFrame = function () {
    /**/
    this._lineManager.enterFrame();
    var n = this._movePointList.length;
    for (var i = 0; i < n; i++) {
      var movePoint = this._movePointList[i];
      movePoint.enterFrame();
    }
  };
  ViewManager.prototype.resize = function () {
    var n = this._dragPointList.length;
    for (var i = 0; i < n; i++) {
      var dragPoint = this._dragPointList[i];
      dragPoint.remove();
    }
    this._dragPointList = [];
    this._movePointList = [];
    //
    this._lineManager.removeAll();
    //
    this.setPoints();
  };
  //
  ViewManager.prototype.setPoints = function () {
    var _this = this;
    var handler = function (eventData) {
      _this.mouseDown(eventData);
    };
    this._movePointList = [];
    this._dragPointList = [];
    var dragPoint;
    var svg = document.getElementById("svg");
    var width = document.body.clientWidth;
    var height = document.body.clientHeight;
    ViewManager.countX = Math.floor((width - 100) / ViewManager.DISTANCE);
    ViewManager.countY = Math.floor((height - 100) / ViewManager.DISTANCE);
    var marginX = 50 + (width - ViewManager.countX * ViewManager.DISTANCE) * 0.5;
    var marginY = 50 + (height - ViewManager.countY * ViewManager.DISTANCE) * 0.5;
    svg.setAttribute("width", width.toString());
    svg.setAttribute("height", height.toString());
    var n = ViewManager.countX * ViewManager.countY;
    for (var i = 0; i < n; i++) {
      if (Math.floor(i / ViewManager.countX) == 0 || Math.floor(i / ViewManager.countX) == ViewManager.countY - 1 || i % ViewManager.countX == 0 || i % ViewManager.countX == ViewManager.countX - 1) {
        dragPoint = new PinPoint(this._pointLayer);
        dragPoint.x = marginX + ViewManager.DISTANCE * (i % ViewManager.countX);
        dragPoint.y = marginY + ViewManager.DISTANCE * Math.floor(i / ViewManager.countX);
      } else
      {
        dragPoint = new MovePoint(this._pointLayer);
        if (dragPoint instanceof MovePoint) {
          this._movePointList.push(dragPoint);
        }
        dragPoint.x = 10 - 20 * Math.random() + marginX + ViewManager.DISTANCE * (i % ViewManager.countX);
        dragPoint.y = 10 - 20 * Math.random() + marginY + ViewManager.DISTANCE * Math.floor(i / ViewManager.countX);
      }
      dragPoint.addListener("mousedown", handler);
      this._dragPointList.push(dragPoint);
    }
    var left;
    var right;
    var top;
    var bottom;
    n = this._dragPointList.length;
    for (var i = 0; i < n; i++) {
      dragPoint = this._dragPointList[i];
      if (Math.floor(i / ViewManager.countX) != 0) {
        top = this._dragPointList[i - ViewManager.countX];
      }
      if (Math.floor(i / ViewManager.countX) != ViewManager.countY - 1) {
        bottom = this._dragPointList[i + ViewManager.countX];
      }
      if (i % ViewManager.countX != ViewManager.countX - 1) {
        right = this._dragPointList[i + 1];
      }
      if (i / ViewManager.countX != 0) {
        left = this._dragPointList[i - 1];
      }
      dragPoint.setPoints(top, bottom, right, left);
    }
    //Line
    this._lineManager.setPointList(this._dragPointList);
  };
  ViewManager.prototype.mouseDown = function (eventData) {
    var _this = this;
    var mouseup = function () {
      window.removeEventListener("mouseup", mouseup);
      window.removeEventListener("mousemove", mousemove);
      _this.mouseUp();
    };
    var mousemove = function (e) {
      _this.mousemoveHandler(e);
    };
    this._dragPoint = eventData.dragPoint;
    this._preX = eventData.mouseX;
    this._preY = eventData.mouseY;
    window.addEventListener("mouseup", mouseup);
    window.addEventListener("mousemove", mousemove);
  };
  ViewManager.prototype.mouseUp = function () {
    this._dragPoint.mouseUp();
  };
  ViewManager.prototype.mousemoveHandler = function (e) {
    var dx = e.screenX - this._preX;
    var dy = e.screenY - this._preY;
    this._dragPoint.x += dx;
    this._dragPoint.y += dy;
    this._preX = e.screenX;
    this._preY = e.screenY;
  };
  ViewManager.DISTANCE = 100;
  return ViewManager;
}();
var LineManager = /** @class */function () {
  function LineManager(g) {
    this._lineList = [];
    this._layer = g;
  }
  LineManager.prototype.enterFrame = function () {
    this.draw();
  };
  LineManager.prototype.setPointList = function (pointList) {
    this._lineList = [];
    var n = pointList.length - 1;
    for (var i = 0; i < n; i++) {
      if (i % ViewManager.countX != ViewManager.countX - 1) {
        var startPoint = pointList[i];
        var endPoint = pointList[i + 1];
        var line = new LineObject(this._layer, startPoint, endPoint);
        this._lineList.push(line);
      }
    }
    n = pointList.length - ViewManager.countX;
    for (var i = 0; i < n; i++) {
      var startPoint = pointList[i];
      var endPoint = pointList[i + ViewManager.countX];
      var line = new LineObject(this._layer, startPoint, endPoint);
      this._lineList.push(line);
    }
    this.draw();
  };
  LineManager.prototype.removeAll = function () {
    var n = this._lineList.length;
    for (var i = 0; i < n; i++) {
      var line = this._lineList[i].........完整代码请登录后点击上方下载按钮下载查看