TweenMax实现粒子聚散数字倒计时动画效果代码-html代码-BFW代码库

TweenMax实现粒子聚散数字倒计时动画效果代码

代码语言：html

所属分类：粒子

代码描述：TweenMax实现粒子聚散数字倒计时动画效果代码

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

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

<head>

  <meta charset="UTF-8">


  
  
<style>

body {
  background-color: #24282f;
  margin: 0;
  padding: 0;
}
canvas {
  position: absolute;
  top: 0;
  left: 0;
}
#canvas-number {
  width: 680px;
  height: 420px;
}
</style>


</head>

<body  >
  <canvas id="canvas-number"></canvas>
<canvas id="canvas-dots"></canvas>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
      <script >
/*
Desc: Define inital variables
*/
var numberStage,
numberStageCtx,
numberStageWidth = 680,
numberStageHeight = 420,
numberOffsetX,
numberOffsetY,

stage,
stageCtx,
stageWidth = window.innerWidth,
stageHeight = window.innerHeight,
stageCenterX = stageWidth / 2,
stageCenterY = stageHeight / 2,

countdownFrom = 10,
countdownTimer = 2800,
countdownRunning = true,

number,
dots = [],
numberPixelCoordinates,
circleRadius = 2,
colors = ['61, 207, 236', '255, 244, 174', '255, 211, 218', '151, 211, 226'];


/*
Desc: Init canvases & Number text
*/
function init() {

  // Init stage which will have numbers
  numberStage = document.getElementById("canvas-number");
  numberStageCtx = numberStage.getContext('2d');
  // Set the canvas to width and height of the window
  numberStage.width = numberStageWidth;
  numberStage.height = numberStageHeight;

  // Init Stage which will have dots
  stage = document.getElementById("canvas-dots");
  stageCtx = stage.getContext('2d');
  stage.width = stageWidth;
  stage.height = stageHeight;

  // Create offset so text appears in middle of screen
  numberOffsetX = (stageWidth - numberStageWidth) / 2;
  numberOffsetY = (stageHeight - numberStageHeight) / 2;
}

init();


/*
Desc: Dot object
*/
function Dot(x, y, color, alpha) {

  var _this = this;

  _this.x = x;
  _this.y = y;
  _this.color = color;
  _this.alpha = alpha;

  this.draw = function () {
    stageCtx.beginPath();
    stageCtx.arc(_this.x, _this.y, circleRadius, 0, 2 * Math.PI, false);
    stageCtx.fillStyle = 'rgba(' + _this.color + ', ' + _this.alpha + ')';
    stageCtx.fill();
  };

}

/*
Desc: Create a certain amount of dots
*/
for (var i = 0; i < 2240; i++) {

  // Create a dot
  var dot = new Dot(randomNumber(0, stageWidth), randomNumber(0, stageHeight), colors[randomNumber(1, colors.length)], .3);

  // Push to into an array of dots
  dots.push(dot);

  // Animate dots
  tweenDots(dot, '', 'space');
}


/*
Desc: Countdown
*/
function countdown() {

  // Send number to be drawn
  drawNumber(countdownFrom.toString());

  // When we hit zero stop countdown
  if (countdownFrom === 0) {
    countdownRunning = false;
    // Now that countdowns finised show the text Go
    drawNumber('GO');
  }

  // Decrement number down
  countdownFrom--;
}
countdown();


/*
Desc: Redraw loops
*/
function loop() {

  stageCtx.clearRect(0, 0, stageWidth, stageHeight);

  for (var i = 0; i < dots.length; i++) {
    dots[i].draw(stageCtx);
  }

  requestAnimationFrame(loop);
}

loop();


/*
Desc: Draw number
*/
function drawNumber(num) {

  // Create a number on a seperate canvas
  // Use a seperate canvas thats smaller so we have less data to loop over when using getImagedata()

  //	Clear stage of previous numbers
  numberStageCtx.clearRect(0, 0, numberStageWidth, numberStageHeight);

  numberStageCtx.fillStyle = "#24282f";
  numberStageCtx.textAlign = .........完整代码请登录后点击上方下载按钮下载查看