代码走起:

; (function() {
var pieRight = $('.pieRight'); //右边的半圆
var pieRight2 = $('.pieRight2'); //右边的第二个半圆
var h1 = $('.pie h1'); //百分比数字
var deg = 60; //旋转角度
var cha = deg - 50; //后半段角度的值
var timeall = 2000; //旋转时间 毫秒
var sec = timeall / deg; //速度值
var time2 = cha * sec; //后半段角度的旋转时间
var time = timeall - time2; //前半段角度的旋转时间
var i = 0; //临时变量 用来存储百分比数字

//角度小于一半 则 时间减半
if (deg < 50) { time = (time / 2); sec = time / deg; //turn代表圈 1 turn 就是一圈 $('.pies').css({ 'transition': 'transform ' + time + 'ms linear', 'transform': 'rotate(.' + deg + 'turn)' }); } else { $('.pies').css({ 'transition': 'transform ' + time + 'ms linear', 'transform': 'rotate(.5turn)' }); } //百分比效果定时器 var times = setInterval(function() { //递增百分比数字 并赋值 i++; h1.html(i + '%'); //核心思路: //右侧叠加两个半圆 //当角度超过一半时 启用第二个半圆动画 if (deg > 50 && i == 50) {

//改变第二个半圆的层级
pieRight2.addClass('up');
$('.pieRight2').css({
'transition': 'transform ' + time2 + 'ms linear',
'transform': 'rotate(.' + cha + 'turn)'
});
}

//达到目标角度 清除定时器
if (i >= deg) {
clearInterval(times);
}

},
sec);

})()

查看升级后的饼图实例:升级版饼图动画实例
下载源码:下载源码

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Captcha Code