3d波纹动画

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

$(function() {
  var stageWidth;
  var stageHeight;
  var context = $("canvas")[0].getContext('2d');
  var objectList;
  var timeout;
  var isMouseOnStage = false;
  var mouseX = 0;
  var mouseY = 0;
  var cellXCount;
  var cellYCount;

var prms = {
    fps: 60,
    objectDistance: 40,
    objectRotationV: Math.PI * .01,
    objectRadius: 10,
    animationDelta: 0.005,
    animationSpringK: 0.03,
    animationFriction: 0.25,
    mouseForce: 80
  }

$(window).resize(reset);
  $("#wrapper").bind("mousemove", function(e) {
    mouseX = e.clientX;
    mouseY = e.clientY;
    isMouseOnStage = true;
  }).bind("mouseleave", function(e) {
    isMouseOnStage = false;
  });
  reset();

function reset() {

stageWidth = $("#wrapper").width();
    stageHeight = $("#wrapper").height();

$("#wrapper canvas").attr("width", stageWidth);
    $("#wrapper canvas").attr("height", stageHeight);

// 表示オブジェクトを作成
    objectList = [];

// 各Cellを作成
    var x = prms.objectDistance * .5;
    var y;
    cellXCount = Math.floor(stageWidth / prms.objectDistance);
    cellYCount = Math.floor(stageHeight / prms.objectDistance);

for (var xIndex = 0; xIndex < cellXCount; xIndex++) {
      y = prms.objectDistance * .5;
      for (var yIndex = 0; yIndex < cellYCount; yIndex++) {
        var xDistFromCenter = x - stageWidth * .5;
        var yDistFromCenter = y - stageHeight * .5;
        var distFromCenter =
          Math.sqrt(xDistFromCenter * xDistFromCenter) + Math.sqrt(yDistFromCenter * yDistFromCenter);
        var circleRotation = Math.PI * prms.animationDelta * distFromCenter;
        objectList.push(
          new Circle(
            x,
            y,
            circleRotation // _rotationV
          )
        );
        y += prms.objectDistance;
      }
      x += prms.objectDistance;
    }

//各Cellの上下左右のCellをセット
    var tempCell;
    var tempIndex;
    for (xIndex = 0; xIndex < cellXCount; xIndex++) {
      for (yIndex = 0; yIndex < cellYCount; yIndex++) {
        tempIndex = xIndex * cellYCount + yIndex;
        tempCell = objectList[tempIndex];
        //左のCellをセット
        if (xIndex > 0) {
          tempIndex = (xIndex - 1) * cellYCount + yIndex;
          tempCell.leftCircle = objectList[tempIndex];
        }
        //右のCellをセット
        if (xIndex < cellXCount - 1) {
          tempIndex = (xIndex + 1) * cellYCount + yIndex;
          tempCell.rightCircle = objectList[tempIndex];
        }
        //上のCellをセット
        if (yIndex > 0) {
          tempIndex = xIndex * cellYCount + yIndex - 1;
          tempCell.topCircle = objectList[tempIndex];
        }
        //下のCellをセット
        if (yIndex < cellYCount - 1) {
          tempIndex = xIndex * cellYCount + yIndex + 1;
          tempCell.bottomCircle = objectList[tempIndex];
        }

}
    }

// タイマ┼をリセット
    if (timeout) {
      clearTimeout(timeout);
    }
    timeout = setTimeout(onEnterFrame, 1000 / prms.fps);
  }

function Circle(_x, _y, _rotation) {
    this.x = _x;
    this.y = _y;
    this.vx = 0;
    this.vy = 0;
    this.ax = 0;
    this.ay = 0;
    this.rotation = _rotation;
    this.cx = _x;
    this.cy = _y;
    this.rightCircle = null;
    this.leftCircle = null;
    this.topCircle = null;
    this.bottomCircle = null;

}
  Circle.prototype.rotationV = prms.objectRotationV;
  Circle.prototype.radius = prms.objectRadius;
  Circle.prototype.tick = function() {
    this.rotation += this.rotationV;

var _x = this.radius * Math.cos(this.rotation) + this.cx;
    var _y = this.radius * Math.sin(this.rotation) + this.cy;

var springK = prms.animationSpringK;
    var friction = prms.animationFriction;
    var mouseF = prms.mouseForce;

if (isMouseOnStage) {
      //マウス位置からの距滕反比例して加速
      var distX = this.x - mouseX;
      var distY = this.y - mouseY;
      var dist = Math.sqrt(distX * distX + distY * distY);
      var rad = Math.atan2(distY, distX);
      this.ax = mouseF / dist * Math.cos(rad);
      this.ay = mouseF / dist * Math.sin(rad);
    } else {
      this.ax = 0;
      this.ay = 0;
    }

this.ax += -(this.x - _x) * springK - friction * this.vx;
    this.ay += -(this.y - _y) * springK - friction * this.vy;

this.vx += this.ax;
    this.vy += this.ay;

this.x += this.vx;
    this.y += this.vy;

if (this.x > this.cx + prms.objectDistance) {
      this.x = this.cx + prms.objectDistance;
    } else if (this.x < this.cx - prms.objectDistance) {
      this.x = this.cx - prms.objectDistance;
    }

if (this.y > this.cy + prms.objectDistance) {
      this.y = this.cy + prms.objectDistance;
    } else if (this.y < this.cy - prms.objectDistance) {
      this.y = this.cy - prms.objectDistance;
    }
  }

function onEnterFrame() {

var len = objectList.length;
    var object;
    // 表示オブジェクトの位置を?算

while (len > 0) {
      len -= 1;
      object = objectList[len];
      object.tick();
    }

// 表示オブジェクトを描画
    context.clearRect(0, 0, stageWidth, stageHeight);

var tempCell;
    context.strokeStyle = 'rgba(255,255,255,.12)';
    for (var x = 0; x < cellXCount; x++) {
      for (var y = 0; y < cellYCount; y++) {
        idx = x * cellYCount + y;
        tempCell = objectList[idx];

if (tempCell.rightCircle && tempCell.bottomCircle) {
          context.beginPath();
          var rCell = tempCell.rightCircle;
          var bCell = tempCell.bottomCircle;
          var rbCell = tempCell.rightCircle.bottomCircle;

var width1 = rbCell.x - tempCell.x;
          var width2 = rCell.x - bCell.x;
          var height1 = rbCell.y - tempCell.y;
          var height2 = bCell.y - rCell.y;

/*
          var vWidth1 = rbCell.vx - tempCell.vx;
          var vWidth2 = rCell.vx - bCell.vx;
          var vHeight1 = rbCell.vy - tempCell.vy;
          var vHeight2 = bCell.vy - rCell.vy;
          */

var hue = 160 + (tempCell.x + tempCell.y) / (stageWidth + stageHeight) * 50;

var lightness = Math.log(
            Math.sqrt((width1 * height1 / (prms.objectDistance * prms.objectDistance) + width2 * height2 / (prms.objectDistance * prms.objectDistance)) / 2)
          ) * 8 + 10;

var saturation = 100;
          context.fillStyle = 'hsl(' + hue + ',' + saturation + '%,' + lightness + '%)';
          context.moveTo(tempCell.x, tempCell.y);
          context.lineTo(tempCell.rightCircle.x, tempCell.rightCircle.y);
          context.lineTo(tempCell.rightCircle.bottomCircle.x, tempCell.rightCircle.bottomCircle.y);
          context.lineTo(tempCell.bottomCircle.x, tempCell.bottomCircle.y);
          context.closePath();
          context.stroke();
          context.fill();
        }

}
    }

// 次フレ┼ム呼び出し
    timeout = setTimeout(onEnterFrame, 1000 / prms.fps);
  }

})

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg