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.innerHeight / 2 - 1, window.innerHeight / 2 - 1);
    } else if (side === 3) {
        // bottom
        x = getRandomInt(-window.innerWidth / 2 - 1, window.innerWidth / 2 - 1);
        y = window.innerHeight / 2 + boxSize;
    }

    particle.innerHTML = word;

    timeline.fromTo(particle, 1 / 2, {
        y: y,
        x: x,
        display: 'block',
        opacity: 1
    }, {
        y: 0,
        x: 0,
        onComplete: function() {
            TweenLite.set(particle, {
                clearProps: 'all',
                display: 'none'
            });
            pool.push(particle);
            callback();
        }
    }, timeline.time() + delay);
    timeline.fromTo(particle, 1 / 2, {
        scale: scale
    }, {
        scale: 0,
        ease: Quad.easeOut
    }, timeline.time() + delay);
    timeline.fromTo(particle, .5 / 2, {
        opacity: 1
    }, {
        opacity: 0,
        ease: Quad.easeOut
    }, timeline.time() + (.5 / 2) + delay);
}

var words = ['abandon', 'abduct', 'ably', 'abolish', 'abscond', 'abuse', 'accelerate', 'accomplish', 'accuse', 'accrue', 'achieve', 'achieve', 'acquire', 'act', 'activate', 'actively', 'adapt', 'add', 'address', 'adeptly', 'adjust', 'administer', 'advance', 'advantageously', 'advise', 'advocate', 'affirm', 'aggressively', 'aid', 'aim', 'alert', 'allocate', 'ambitiously', 'analyze', 'answer', 'anticipate', 'apprehend', 'approach', 'appropriate', 'appropriately', 'arbitrate', 'arrange', 'arrest', 'artfully', 'ascertain', 'assault', 'assemble', 'assess', 'assign', 'assist', 'assure', 'attack', 'attain', 'attract', 'audit', 'augment', 'authenticate', 'author', 'authoritatively', 'authorize', 'automate', 'avert', 'avidly', 'avoid', 'award', 'balance', 'bang', 'bank', 'bar', 'beat', 'beneficially', 'berate', 'bill', 'bite', 'blast', 'blend', 'block', 'blow', 'bolster', 'book', 'boost', 'brace', 'brief', 'brighten', 'broke', 'buck', 'budget', 'built', 'bump', 'bury', 'bushwhack', 'calculate', 'call', 'calm', 'campaign', 'cancel', 'capably', 'capitalize', 'catch', 'centralize', 'certify', 'chair', 'challenge', 'champion', 'change', 'channel', 'charge', 'chart', 'chase', 'check', 'choke', 'circumscribe', 'circumvent', 'clap', 'clarify', 'clash', 'classify', 'classify', 'climb', 'clip', 'clutch', 'coach', 'collaborate', 'collapse', 'collar', 'collate', 'collect', 'collide', 'combine', 'command', 'commandeer', 'communicate', 'competently', 'compile', 'complete', 'comply', 'compose', 'compute', 'compute', 'conceive', 'conclusively', 'condense', 'conduct', 'confer', 'configure', 'conserve', 'consistently', 'consolidate', 'construct', 'consult', 'contract', 'control', 'conveniently', 'convert', 'coordinate', 'correlate', 'counsel', 'count', 'cram', 'crash', 'crawl', 'create', 'creep', 'cripple', 'critique', 'crouch', 'cultivate', 'cure', 'customize', 'cut', 'dance', 'dart', 'dash', 'deal', 'debate', 'decide', 'decidedly', 'decisively', 'deck', 'decorate', 'decrease', 'deduct', 'define', 'delegate', 'delete', 'deliberate', 'delineate', 'deliver', 'demonstrate', 'derive', 'descend', 'describe', 'design', 'detail', 'detect', 'determine', 'develop', 'devise', 'devise', 'diagnose', 'dictate', 'dig', 'diligently', 'direct', 'discard', 'discover', 'dispatch', 'display', 'dissect', 'distinguish', 'distribute', 'distribute', 'ditch', 'dive', 'divert', 'do', 'dodge', 'dominate', 'dope', 'double', 'douse', 'draft', 'drag', 'drain', 'dramatize', 'drape', 'draw', 'dress', 'drill', 'drink', 'drip', 'drop', 'drown', 'drug', 'dry', 'duel', 'dunk', 'earn', 'ease', 'easily', 'edge', 'edit', 'edit', 'educate', 'effect', 'effectively', 'effectually', 'efficiently', 'effortlessly', 'eject', 'elect', 'elevate', 'eliminate', 'elope', 'elude', 'emerge', 'employ', 'enable', 'enact', 'encourage', 'endure', 'engage', 'engineer', 'enjoin', 'ensnare', 'ensure', 'enter', 'equip', 'erupt', 'escalate', 'escape', 'establish', 'establish', 'estimate', 'evacuate', 'evade', 'evaluate', 'evict', 'examine', 'execute', 'exert', 'exhale', 'exhibit', 'exit', 'expand', 'expand', 'expedite', 'expel', 'explode', 'experience', 'experiment', 'expertly', 'explain', 'explore', 'expose', 'extend', 'extirpate', 'extract', 'extricate', 'facilitate', 'fade', 'fake', 'fall', 'falter', 'fan', 'fashion', 'fast', 'faultlessly', 'favorably', 'fear', 'feed', 'feel', 'fend', 'field', 'fight', 'file', 'fill', 'finance', 'find', 'finger', 'finish', 'fix', 'flag', 'flap', 'flash', 'flatten', 'flaunt', 'flay', 'flee', 'flick', 'flinch', 'fling', 'flip', 'flit', 'float', 'flog', 'flounder', 'flout', 'flush', 'fly', 'focus', 'fondle', 'force', 'forecast', 'forge', 'formalize', 'form', 'formulate', 'fornicate', 'foster', 'found', 'fumble', 'functionally', 'fund', 'furnish', 'gain', 'gainfully', 'gallop', 'gather', 'generate', 'gesture', 'get', 'give', 'gnaw', 'gossip', 'gouge', 'govern', 'graduate', 'grab', 'grapple&#.........完整代码请登录后点击上方下载按钮下载查看