为了账号安全,请及时绑定邮箱和手机立即绑定

看了这个最后那个完美的运动框架发现一个问题,同时运动的定时器并没有结束。。。。。定时器还在一直运行,只不过不在动画了而已。

正在回答

1 回答

  //获取当前样式
        function getStyle(obj,attr){
            if(obj.currentStyle){
                return  obj.currentStyle[attr];
            }
            return getComputedStyle(obj,false)[attr];

        }
        //运动框架
        /**
         * @param obj
         * @param json
         * @param fn
         */
        function startMove(obj,json,fn){
            clearInterval(obj.timer);

            var size = (function(){
                var tt = 0;
                for(var i in json){
                    tt++;
                }
                return tt;
            }());
            obj.timer = setInterval(function(){
                var count = 0;//判断同时运动是否结束
                for(var i in json){
                    //判断透明度
                    var icur = 0; //获取当前样式
                    if(i=="opacity"){
                        icur = Math.round(parseFloat(getStyle(obj,i))*100);
                    }else{
                        icur = parseInt(getStyle(obj,i));
                    }
                    var iTarget = json[i];
                    //缓冲运动获取speed (+ 越来越慢 -越来越慢)
                    var ispeed = iTarget-icur>0?Math.ceil((iTarget-icur)/8):Math.floor((iTarget-icur)/8);
                   //停止运动
                    if(icur != iTarget){
                        if(i=="opacity"){//透明度
                            obj.style.filter="alpha(opcoty:'"+(icur+ispeed)+")";
                            obj.style.opacity=(icur+ispeed)/100;
                        }else{
                            obj.style[i] = icur+ispeed+"px";
                        }
                    }else{
                       count++;
                       //判断所有运动是否结束
                       if(count==size){
                           clearInterval(obj.timer);
                           if(fn){
                               fn();
                            }
                        }
                    }
                }
            },30);
        }

1 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号