进度条小飞机移动动画

浏览数：28 / 时间：2015年06月11日

今天下午吃完饭就坐在电脑旁整一个进度条的动画效果，整这个效果自己也是醉了，虽然各方面都考虑到了，但是还会有点误差，因为进度条经过一个点的时候，前面半径发生变化，还要考虑到小飞机的长度问题，不能停留在圆点上，必须考虑一定的范围，刚开始没考虑圆点的直径问题，误差很大，后来把直径问题也考虑到了，但是还会有小误差，设计的点直径大小在飞机经过前后发生了变化。
技术分享

首页需要根据程序输出的数，总数、小飞机要执行的动画距离及两个要设置的点，算出它们各自所占的百分比，根据总长度，算出各自的值，然后定位；
在动画执行前需要用算出小飞机执行的长度，跟两个固定的点做比较，当执行动画长度大于某个点的left减去直径和飞机长度且小于这个点left值时候，取个固定的值，让飞机在点的左边；当到最后一个点和前一个点的时候，不再考虑直径问题，只考虑飞机长度；
主要实现js代码如果下：

 var proStepBox = $(‘div.proStepBox‘),
        proStep = $(‘.proStep‘,proStepBox),
        allW = proStep.width(),
        proHasDot = $(‘#proHasDot‘),
        perAlldot = $(‘div.perAlldot‘),
        perAllNum = parseInt(perAlldot.text()),
        perCur = parseInt(proHasDot.find(‘span‘).text())/perAllNum,
        layL = allW*perCur,
        dot = $(‘div.stepDot‘).not(‘div.stepDot:last‘);
    dot.each(function(){
        var _this = $(this),
            perc1= parseInt(_this.text())/perAllNum,
            prodot1L = allW*perc1;
        _this.css(‘left‘,prodot1L);
        if(layL>=prodot1L-36-39&&layL<prodot1L)
        layL=prodot1L-36-39;
    });
    if(layL>=allW-39&&layL<allW)
        layL=allW-39-10;
    if(allW == layL)
        layL = layL-39;

    $(function(){
        proHasDot.animate({
            ‘width‘:layL
        },{
      step: function(now, fx) { 
        $(".stepDot ").each(function(){
            var _this = $(this),
                l =parseInt($(this).css("left").replace(‘px‘,‘‘));
            if(now >= l){
                _this.addClass(‘stepPass‘);
                _this.find("em").addClass(‘dotY‘);

            }

        })
      },
    complete: function() {
        if(layL==allW-39){ //当达到百分之百的时候需要设置的
                $(".stepDot:last ").addClass(‘stepPass‘);
                $(".stepDot:last ").find("em").addClass(‘dotY‘);
                $(this).find(‘i‘).css(‘display‘,‘none‘);
            }

    }
},
        "slow")
    });