canvas实现立方体线条炫酷动画效果代码-html代码-BFW代码库

canvas实现立方体线条炫酷动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas实现立方体线条炫酷动画效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
  
<style>
body {
    background-color: #000;
    margin: 0;
    overflow: hidden;
}

#container {
    position: absolute;
    left: 50%;
    top: 50%;
}

canvas {
    position: absolute;
    background-color: rgba(0,0,0,0.1);
}
</style>


  
</head>

<body translate="no">
  <div id="container"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
      <script >
var mContainer = document.getElementById('container');

var mXPlanes = [],
mYPlanes = [],
mZPlanes = [],
mAllPlanes = [];

var mTrails = [];

var mPlaneSize = 300,
mDivisions = 5,
mSegmentSize = mPlaneSize / mDivisions;

window.onload = function () {
  init();
  requestAnimationFrame(loop);
};

function init() {
  TweenMax.set(mContainer, {
    perspective: 4000,
    transformStyle: 'preserve-3d' });


  createPlanes();
  createTrails();

  TweenMax.to(mContainer, 20, { ease: Linear.easeNone, rotationX: 360, rotationY: 360, repeat: -1 });
}

function createPlanes() {
  var i,
  startOffset = mPlaneSize * -0.5;

  // x
  for (i = 0; i <= mDivisions; i++) {
    mXPlanes.push(createPlane(
    new Point(startOffset + mSegmentSize * i, 0, 0),
    new Point(0, -90, 0),
    "#00f"));

  }
  // y
  for (i = 0; i <= mDivisions; i++) {
    mYPlanes.push(createPlane(
    new Point(0, startOffset + mSegmentSize * i, 0),
    new Point(90, 0, 0),
    "#0f0"));

  }
  // z
  for (i = 0; i <= mDivisions; i++) {
    mZPlanes.push(createPlane(
    new Point(0, 0, startOffset + mSegmentSize * i),
    new Point(),
    "#f00"));

  }
}

function createPlane(p, r, c) {
  var plane = new Plane(p, r, c);

  mAllPlanes.push(plane);
  mContainer.appendChild(plane.canvas);

  return plane;
}

function createTrails() {
  var x, y, z, position,
  h, s, l, color;

  for (var i = 0; i < 8; i++) {
    x = randomRange(0, mDivisions) | 0;
    y = randomRange(0, mDivisions) | 0;
    z = randomRange(0, mDivisions) | 0;
    position = new Point(x, y, z);

    h = randomRange(0, 180) | 0;
    s = randomRange(80, 100) | 0;
    l = randomRange(80, 100) | 0;
    color = 'hsl(' + h + ',' + s + '%,' + l + '%)';

    startTrailsAt(position, color);
  }
}
.........完整代码请登录后点击上方下载按钮下载查看