使用jQuery在一段时间内更改一个值？

Question

我正在开发一个需要循环进度条的项目。我找到了一个可以解决问题的方法：

http://codepen.io/shankarcabus/pen/GzAfb

但我需要做的是在页面加载时设置它的动画，以便每次都会增加值：

<div class="progress-pie-chart" data-percent="43">

所以在＆＃34; page1.htm＆＃34;，我需要数据百分比值从0到20自动递增。在＆＃34; page2.htm＆＃34;从20-33等等我对jQuery很新，所以老实说我不知道​​从哪里开始。

如何创建一个能够将数据百分比值增加到500毫秒的函数？

Answer 1

使用setInterval我们可以生成类似的东西。我们还使用一些数学计算基于fps的步骤来创建平滑动画。小数也可用于百分比

＆＃13;

＆＃13;

var start = 0;
var end = 30;
var time = 800; //in ms
var fps = 30;

var increment = ((end-start)/time)*fps;

$('.progress-pie-chart')[0].dataset.percent = start;

var timer = setInterval(function() {
  $('.progress-pie-chart')[0].dataset.percent = parseFloat($('.progress-pie-chart')[0].dataset.percent) + increment;

  if (parseFloat($('.progress-pie-chart')[0].dataset.percent) >= end) {
    clearInterval(timer);
  }

  var $ppc = $('.progress-pie-chart'),
    percent = parseFloat($ppc[0].dataset.percent),
    deg = 360 * percent / 100;

  if (percent > 50) {
    $ppc.addClass('gt-50');
  }
  $('.ppc-progress-fill').css('transform', 'rotate(' + deg + 'deg)');
  $('.ppc-percents span').html(parseInt(percent, 10) + '%');
}, fps);

＆＃13;

.progress-pie-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #E5E5E5;
  position: relative;
}
.progress-pie-chart.gt-50 {
  background-color: #81CE97;
}
.ppc-progress {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 100px);
  top: calc(50% - 100px);
  width: 200px;
  height: 200px;
  clip: rect(0, 200px, 200px, 100px);
}
.ppc-progress .ppc-progress-fill {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 100px);
  top: calc(50% - 100px);
  width: 200px;
  height: 200px;
  clip: rect(0, 100px, 200px, 0);
  background: #81CE97;
  transform: rotate(60deg);
}
.gt-50 .ppc-progress {
  clip: rect(0, 100px, 200px, 0);
}
.gt-50 .ppc-progress .ppc-progress-fill {
  clip: rect(0, 200px, 200px, 100px);
  background: #E5E5E5;
}
.ppc-percents {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 173.91304px/2);
  top: calc(50% - 173.91304px/2);
  width: 173.91304px;
  height: 173.91304px;
  background: #fff;
  text-align: center;
  display: table;
}
.ppc-percents span {
  display: block;
  font-size: 2.6em;
  font-weight: bold;
  color: #81CE97;
}
.pcc-percents-wrapper {
  display: table-cell;
  vertical-align: middle;
}
body {
  font-family: Arial;
  background: #f7f7f7;
}
.progress-pie-chart {
  margin: 50px auto 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="progress-pie-chart" data-percent="0">
  <div class="ppc-progress">
    <div class="ppc-progress-fill"></div>
  </div>
  <div class="ppc-percents">
    <div class="pcc-percents-wrapper">
      <span>%</span>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;