                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /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

源自：JS动画效果 3-1

关注问题我要回答

866

操作

收起

2 回答

嘛也不会提问者
2016-10-19

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

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