TweenMax实现文字汇聚进度条动画效果代码
代码语言: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', .........完整代码请登录后点击上方下载按钮下载查看
网友评论0