缓冲动画问题

源自：3-1 JS缓冲动画

缓冲动画问题

       var timer;

        function shareTabToggle(iTarget){
            var ele = document.getElementById("share");
            clearInterval(timer);
            var speed = 0;
            timer = setInterval(function() {
                if (ele.offsetLeft > iTarget) {
                    speed = (iTarget - ele.offsetLeft)/20;
                } else if (ele.offsetLeft < iTarget) {
                    speed = (iTarget - ele.offsetLeft)/20;
                } else {
                    clearInterval(timer);
                    return;
                }
                speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed);
                ele.style.left = ele.offsetLeft + speed +"px";
            },30);
        };

        window.onload = init;
        function init(){
            var shareTab =  document.getElementById("share");
            if(shareTab.addEventListener){
                shareTab.addEventListener('mouseover',function(event){ event.stopPropagation();shareTabToggle(0);},false);
                shareTab.addEventListener('mouseout',function(){shareTabToggle(-200);},false);
            }else if(shareTab.attachEvent){
                shareTab.attachEvent('onmouseover',function(event){ event.cancelBubble=true;shareTabToggle(0);});
                shareTab.attachEvent('onmouseout',function(){shareTabToggle(-200);});
            }else{
                shareTab.onmouseover = function(event){
                    event.stopPropagation();
                    shareTabToggle(0);
                };
                shareTab.onmouseout = function(){
                    shareTabToggle(-200);
                };
            }
        }

老师举得例子是从快到慢的，请问如果是从慢到快应该怎么做？数学公式是什么？

提问者：嘛也不会 2016-10-19 18:17

个回答

嘛也不会: 2016-10-19 21:54:43

已有解决方案虽然不够好但是好在代码简单

        var timer;
        function shareTabToggle(iTarget){
            clearInterval(timer);
            var ele = document.getElementById("share");
            var temp =  ele.offsetLeft;
            var speedLst = [];
            var speed = 0;
            while(true){
                speed = (iTarget - temp)/10;
                speed = speed > 0 ? Math.ceil(speed) : (speed < 0 ? Math.floor(speed) : speed);
                speedLst.push(speed);
                temp += speed;
                if(temp == iTarget){
                    break;
                }
            }
            var speedSize = speedLst.length-1;
            console.log(speedLst);
            timer = setInterval(function(){
                // 数组正着读就是由快到慢， 倒着读就是慢到快
                ele.style.left = ele.offsetLeft + speedLst[speedSize--] + "px";
                if(speedSize == -1){
                    clearInterval(timer);
                }
            },30);
        };
        window.onload = init;
        function init(){
            var shareTab =  document.getElementById("share");
            if(shareTab.addEventListener){
                shareTab.addEventListener('mouseover',function(event){ event.stopPropagation();shareTabToggle(0);},false);
                shareTab.addEventListener('mouseout',function(){shareTabToggle(-200);},false);
            }else if(shareTab.attachEvent){
                shareTab.attachEvent('onmouseover',function(event){ event.cancelBubble=true;shareTabToggle(0);});
                shareTab.attachEvent('onmouseout',function(){shareTabToggle(-200);});
            }else{
                shareTab.onmouseover = function(event){
                    event.stopPropagation();
                    shareTabToggle(0);
                };
                shareTab.onmouseout = function(){
                    shareTabToggle(-200);
                };
            }
        }

输输输

2016-10-19 20:12:28

调过来就行了，

0