                        課程
                    
                        /前端開發(fā)
                        
                            /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);
????????????????};
????????????}
????????}

老師舉得例子是從快到慢的，請問如果是從慢到快應(yīng)該怎么做？ ?數(shù)學(xué)公式是什么？

嘛也不會

2016-10-19

源自：JS動畫效果 3-1

關(guān)注問題我要回答

945

操作

收起

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(){
????????????????//?數(shù)組正著讀就是由快到慢，?倒著讀就是慢到快
????????????????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);
????????????????};
????????????}
????????}