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

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.c.........完整代码请登录后点击上方下载按钮下载查看