网格波动动画效果-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.........完整代码请登录后点击上方下载按钮下载查看