jq+css饼图动画效果升级版(修复闪动bug)

代码走起:

; (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);

})()

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

发表评论

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