生长自由js动画效果-html代码-BFW代码库

生长自由js动画效果

代码语言：html

所属分类：动画

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

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

<title> Freedom 4</title>
<style>
      body {
  background: black;
}
      canvas.drawer {
        position:fixed;
        top: 0px;
        left: 0px;
        width: 100vw;
        height: 100vh;
      }
    </style>

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

<script>
      // Liam Egan
// 2019

let initialise = function () {
  let application = new Application();
  // application.scaleFactor = 2;
  // application.clearOnRedraw = Application.FADE;
  application.fadeColour = 'rgba(0,0,0,.12)';
  application.fillColour = 'rgba(30,30,30,1)';
  application.onResize();
  let vfield = new VectorField();
  vfield.scale = 2000;
  vfield.amplitude = 10;
  // vfield.debug = true;

  application.addActor(vfield);

  let maxNum = 1000;
  let num = 0;

  let addTracer = (position, colour) => {
    if (num > maxNum) return;

    let tracer = new BranchTracer(position.x, position.y);
    tracer.field = vfield;
    let momentum = new Vector(Math.random(), Math.random());
    momentum.length = Math.random() * 2;
    tracer.momentum = momentum;
    tracer.friction = 0.97;

    if (colour) {
      tracer.colour = colour;
    } else {
      tracer.colour = 'RGBA(' + 100 + Math.round(Math.random() * 155) + ',' + 100 + Math.round(Math.random() * 155) + ',255,0.5)';
    }

    application.addActor(tracer);

    num = application.actors.length;

    return tracer;
  };
  let seed = addTracer(new Vector(window.innerWidth / 2, window.innerHeight / 2), 'RGBA(255, 100, 100, 0.5)');
  seed.initial = true;
  seed.branchChance = 15;
  seed.friction = 0.9975;
  seed.onBranch = addTracer;

  // setInterval(()=> {
  //   vfield.z = Math.random() * 10000;
  // }, 10000)


  let stage = application.stage;
  document.body.appendChild(stage);
  application.onPointerMove({ clientX: window.innerWidth / 2, clientY: window.innerHeight / 2 });
  application.render();
  application.animating = true;

  // application.runFor(60 * 120);

  return;
};










class Application {
  constructor() {
    this.stage = document.createElement('canvas');

    this.animate = this.animate.bind(this);

    this.onResize = this.onResize.bind(this);
    this.onPointerDown = this.onPointerDown.bind(this);
    this.onPointerup = this.onPointerup.bind(this);
    this.onPointerMove = this.onPointerMove.bind(this);

    this.initialiseEvents();
  }

  initialiseEvents() {
    window.addEventListener('resize', this.onResize, false);
    document.addEventListener('pointerdown', this.onPointerDown, false);
    document.addEventListener('pointerup', this.onPointerup, false);
    document.addEventListener('pointermove', this.onPointerMove, false);
  }

  deInitialiseEvents() {
    window.removeEventListener('resize', this.onResize, false);
    document.removeEventListener('pointerdown', this.onPointerDown, false);
    document.removeEventListener('pointerup', this.onPointerup, false);
    document.removeEventListener('pointermove', this.onPointerMove, false);
  }

  addActor(actor) {
    if (actor instanceof Actor) {
      this.actors.push(actor);
    }
  }

  runFor(ticks) {
    let interval = 1 / 60;
    let i = 0;

    for (i; i < ticks; i++) {
      this.triggerEvent('application-animate', { now: this.now, then: this.then, interval: interval, application: this });

      this.render();
    }

  }

  .........完整代码请登录后点击上方下载按钮下载查看