jq+css实现饼图动画效果

上代码:

; (function() {
    var pieRight = $('.pieRight'); //右边的半圆
    var pieLeft = $('.pieLeft'); //左边的半圆
    var h1 = $('.pie h1'); //百分比数字
    var deg = 60; //旋转角度
    var time = 3000; //旋转时间 毫秒
    var sec = time / deg; //速度值
    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)'
    });

    //百分比效果定时器
    var times = setInterval(function() {

        //递增百分比数字 并赋值
        i++;
        h1.html(i + '%');

        //核心思路:
        //角度超过一半时 将右边的半圆层级+1 并隐藏左边的半圆
        //有个bug 速度过快或过慢时会有闪动出现(目前还没有解决思路)
        if (deg > 50 && i == 50) {
            pieRight.addClass('up');
            pieLeft.addClass('hide');
        }

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

    },
    sec);

})()

查看实例:饼图动画实例
下载源码:下载源码

发表评论

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