TweenMax实现文字汇聚进度条动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：进度条

代码描述：TweenMax实现文字汇聚进度条动画效果代码，无穷无尽的文字汇聚到中间，进度条也不断的增长。

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    body {
   font-family: helvetica;
}
.world {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}
.world > .particle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0px;
  height: 0px;
  color: #ff4742;
  -webkit-backface-visibility: hidden;
  text-rendering: auto;
}

.progress {
  color: #1aa6d3;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin-left: -75px;
  margin-top: -75px;
  font-size: 24px;
  line-height: 150px;
  text-align: center;
}
</style>

</head>
<body>
<!-- partial:index.partial.html -->
<div class="world"></div>
<div class="progress"><span class="count">0</span></div>
<!-- partial -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
<script >
      
      function ProgressCircle($config) {
    this.canvas = document.createElement('canvas'),
    this.context = this.canvas.getContext('2d');

    this.radius = $config.radius;
    this.hole = $config.hole;
    this.color = $config.color;

    this.canvas.width = $config.width * devicePixelRatio;
    this.canvas.height = $config.width * devicePixelRatio;
    this.canvas.style.webkitTransform = 'scale(' + (1 / devicePixelRatio) + ')';
    this.canvas.style.webkitTransformOrigin = '0 0';
}

ProgressCircle.prototype.update = function(percent) {
    var x = this.canvas.width / 2
      , y = this.canvas.height / 2
      , r = this.canvas.width / 2 * this.radius
      , hole = this.hole;

    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);

    this.context.fillStyle = this.color;

    this.context.beginPath();
    this.context.moveTo(x, y);
    this.context.arc(x, y, r, 0, Math.PI * 2 * percent, false);
    this.context.fill();

    this.context.globalCompositeOperation = 'destination-out';
    this.context.beginPath();
    this.context.arc(x, y, r * hole, 0, Math.PI * 2, false);
    this.context.fill();
    this.context.globalCompositeOperation = 'source-over';
}
;

var progress = new ProgressCircle({
    width: 150,
    height: 150,
    radius: .8,
    hole: .9,
    color: '#1aa6d3'
});

progress.canvas.style.position = 'absolute';
progress.canvas.style.top = '0';
progress.canvas.style.left = '0';
document.querySelector('.progress').appendChild(progress.canvas);

var timeline = new TimelineMax({});

var world = document.querySelector('.world');

function ParticlePool($config) {
    this._container = $config.container;
    this._items = [];
    this.length = 0;
}
;
ParticlePool.prototype = {
    push: function(item) {
        this._items.push(item);
        this.length++;
    },

    pop: function() {
        if (this._items.length) {
            this.length--;
            return this._items.pop();
        } else {
            return this.create();
        }
    },

    create: function() {
        var particle = document.createElement('div');
        particle.className = 'particle';
        particle.style.cssText = 'display: none';
        this._container.appendChild(particle);
        return particle;
    }
};

var pool = new ParticlePool({
    container: world
})

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function placeParticle(word, callback) {
    var particle = pool.pop(), x, y, scale = 1 + Math.random() * 3, boxSize = 200, delay = Math.random() * 2;

    var side = getRandomInt(0, 3);

    if (side === 0) {
        // left
        x = -window.innerWidth / 2 - boxSize;
        y = getRandomInt(-window.innerHeight / 2 - 1, window.innerHeight / 2 - 1);
    } else if (side === 1) {
        // top
        x = getRandomInt(-window.innerWidth / 2 - 1, window.innerWidth / 2 - 1);
        y = -window.innerHeight / 2 - boxSize;
    } else if (side === 2) {
        // right
        x = window.innerWidth / 2 + boxSize;
        y = getRandomInt(-window.in.........完整代码请登录后点击上方下载按钮下载查看