像素字文字动画效果-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：像素字文字动画效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<style>
html {
  width: 100%;
  height: 100%;
  background: #020302;
  overflow: hidden;
}

body {
  margin: 0;
  width: 100%;
  height: 100%;
}

#canvas {
  width: 100%;
  height: 100%;
}
</style>

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

<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 BACKGROUND_COLORS = ['#020302', '#202620'];
var _a = [Math.PI * 2, Math.PI / 2, Math.PI / 4],PI_DOUBLE = _a[0],PI_HALF = _a[1],PI_QUARTER = _a[2];
var COLOR_MAX = 255;
var BASE_COLOR = [.7, .9, .7];
var WORDS = ['\u2764', 'HELLO', 'WORLD', 'STAY', 'HOME', 'BE', 'SAFE'];
var getRGB = function (_a) {
  var red = _a[0],green = _a[1],blue = _a[2];
  return "rgb(" + Math.floor(red * COLOR_MAX) + ", " + Math.floor(green * COLOR_MAX) + ", " + Math.floor(blue * COLOR_MAX) + ")";
};
var Vector = /** @class */function () {
  function Vector(x, y) {
    if (x === void 0) {x = 0;}
    if (y === void 0) {y = 0;}
    this.x = x;
    this.y = y;
  }
  Vector.getLength = function (x, y) {
    return Math.sqrt(x * x + y * y);
  };
  Vector.getDistance = function (pointA, pointB) {
    return Vector.getLength(pointA.x - pointB.x, pointA.y - pointB.y);
  };
  Vector.getDifference = function (pointA, pointB) {
    return new Vector(pointA.x - pointB.x, pointA.y - pointB.y);
  };
  Object.defineProperty(Vector.prototype, "length", {
    get: function () {
      return Math.sqrt(this.x * this.x + this.y * this.y);
    },
    enumerable: true,
    configurable: true });

  Vector.prototype.add = function (_a) {
    var x = _a.x,y = _a.y;
    this.x += x;
    this.y += y;
  };
  Vector.prototype.multiply = function (value) {
    this.x *= value;
    this.y *= value;
  };
  Vector.prototype.angleTo = function (vector) {
    return Math.atan2(vector.y - this.y, vector.x - this.x);
  };
  Vector.prototype.distanceTo = function (vector) {
    return Vector.getDistance(this, vector);
  };
  return Vector;
}();
var Particle = /** @class */function () {
  function Particle(_a) {
    var _b = _a.position,x = _b.x,y = _b.y,radius = _a.radius,damping = _a.damping;
    this.radius = 1;
    this.mass = 1;
    this.acceleration = new Vector();
    this.velocity = new Vector();
    this.damping = 0;
    this.gravityObjects = [];
    this.position = new Vector(x, y);
    this.radius = radius;
    this.damping = damping;
  }
  Object.defineProperty(Particle.prototype, "x", {
    get: function () {
      return this.position.x;
    },
    enumerable: true,
    configurable: true });

  Object.defineProperty(Particle.prototype, "y", {
    get: function () {
      return this.position.y;
    },
    enumerable: true,
    configurable: true });

  Particle.prototype.applyPhysic = function () {
    var _this = this;
    this.gravityObjects.forEach(function (gravityObject) {
      var distance = Vector.getDistance(gravityObject, _this);
      var angle = _this.position.angleTo(gravityObject);
      var force = (gravityObject.mass + _this.mass) / (distance * distance) || 0;
      var gravity = new Vector(Math.cos(angle) * force, Math.sin(angle) * force);
      _this.velocity.add(gravity);
    });
    this.velocity.add(this.acceleration);
    this.velocity.multiply(1 - this.damping);
    this.position.add(this.velocity);
  };
  return Particle;
}();
var Spring = /** @class */function (_super) {
  __extends(Spring, _super);
  function Spring(_a) {
    var position = _a.position,center = _a.center,radius = _a.radius,stiffness = _a.stiffness,damping = _a.damping;
    var _this = _super.call(this, { position: position, radius: radius, damping: damping }) || this;
    _this.stiffness = 1;
    _this.center = new Vector(center.x, center.y);
    _this.stiffness = stiffness;
    return _this;
  }
  Spring.prototype.applyPhysic = function () {
    this.force = Vector.getDifference(this.center, this.position);
    this.force.multiply(this.stiffness);
    this.velocity.add(this.force);
    _super.prototype.applyPhysic.call(this);
  };
  return Spring;
}(Particle);
function main() {
  var canvasEl = document.getElementById('canvas');
  var context = canvasEl.getContext('2d');
  var width = canvasEl.width,height = canvasEl.height;
  .........完整代码请登录后点击上方下载按钮下载查看