如何在Javascript中制作带有暂停和播放选项的动画

Question

function animate(elem,style,from,to,time) {
    if (!elem) return;
    var start = new Date().getTime(),
    timer = setInterval(function() {
        var step = Math.min(1, (new Date().getTime() - start) / time);
        elem.style[style] = (from + step * (to - from))+'px';
        if (step == 1) clearInterval(timer);
    }, 25);
    elem.style[style] = from + 'px';
}

这是我的代码。 我需要暂停并在其中播放

Answer 1

终于找到了答案

function animate(elem,style,to,time,callback)
{
if(!elem) return;
_animating = true;
curAnimElem = elem;  /*stores the current Element*/
curStyle = style;    /*stores the current style*/
curTo = to;          /*stores the current to 'px'*/
curCallback = callback;  /*stores the current callbak function*/
    if(style === 'left'){ from = elem.offsetLeft; }
else if(style === 'top'){ from = elem.offsetTop; }
var start = new Date().getTime(),
animTimer = setInterval(function()
{
    if(!pauseV)
    {
        pauseTime = Math.round(time - (new Date().getTime()-start));
        var step = Math.min(1,(new Date().getTime()-start)/time);
        elem.style[style] = (from+step*(to-from))+'px';         
        if( step == 1 ){ _animating = false; clearInterval(animTimer);    if(callback){callback(); callback = null;} }
    }
    else{clearInterval(animTimer);}
},25);
elem.style[style] = from + 'px';
}

上面的代码是动画元素（仅左侧或顶部）。 要暂停和播放，请在暂停/播放事件函数中包含以下代码。

function pauseFun()
{   
    if(pauseV)
    {   
        pauseV = false;
        if(_animating){ animate(curAnimElem,curStyle,curTo,pauseTime,curCallback); }
    }
   else if(!pauseV)
  {pauseV = true;}
}

它对我有用...谢谢。

Answer 2

使用 clearInterval(timer) 暂停动画，然后再次timer = setInterval(...)以恢复动画。您需要将setInterval回调分解为其自己的命名函数（在第一个函数的主体内），以便更轻松地恢复。

Answer 3

试试这个：

var doAnimation=true;
var timer=0;
var start=undefined;
function animate(elem,style,from,to,time)
 {
  if(!elem && doAnimation) return;  
     if(start==undefined)start = new Date().getTime();          
     timer = setInterval(function(){         
         var step = Math.min(1,(new Date().getTime()-start)/time);                  
         elem.style[style] = (from+step*(to-from))+'px';         
        if( step == 1){ 
            doAnimation=false;
            clearInterval(timer);
            elem.style[style] = from+'px';
            start=undefined;
        }},25);
  }

function fun(){        
    doAnimation=!doAnimation;    
    if(doAnimation){play();}
    else{pause();}  
}
function play(){          
     animate( document.getElementById('box'),'left',0 , 200, 7000);
}
function pause(){
    clearInterval(timer);
}
$(document).ready(function(){    
    play();
});

在这里查看小提琴： http://jsfiddle.net/sunnykumar08/V9MHN/1/