2014-12-08 2 views
0

Я использую цикл requestAnimationFrame для секундомера и некоторых других анимаций. Я использую временную метку, возвращаемую из rAF, чтобы получить время, но когда я останавливаю цикл, чтобы приостановить таймер, подождите несколько секунд, а затем запустите цикл снова, таймер отобразит общее время.Как приостановить и перезапустить таймер секундомера, используя requestAnimationFrame?

Мне нужно сделать паузу по таймеру и продолжить с паузы. Есть ли способ сбросить значение временной метки после приостановки таймера? Если вам нужно, чтобы я опубликовал часть своего кода, дайте мне знать, или если вам нужно, чтобы я объяснил, что сделаю это.

Редактировать

var frames = 0, 
    startTime = null, 
    lastTime = null, 
    fps = 1000/120, 
    isRunning = false, 
    pTime = 0, 
    timeElapsed; 

function loop(timeStamp){ 

     if(!startTime) startTime = timeStamp; 
     var timeDiff = lastTime ? (timeStamp - lastTime) : fps, 
      timeScale = timeDiff/fps, 
      timeElapsed += (timeStamp - startTime)/1000, 
      lastTime = timeStamp; 

     if(isRunning){ 
      requestAnimationFrame(loop); 
      gField.t.text = ++frames + "f/"+parseInt(timeElapsed - pTime)+"s = "+parseInt(frames/(timeElapsed-pTime)) + "fps\n"+(timeDiff).toFixed(2); 
     } 
     /*  
     canvas manipulation e.g. 
     particle.x += acc*timeElapsed; 
     */ 
     time.text = (timeElapsed).toFixed(2); 
     canvas.redraw(); 
}; 

Эта функция вызывается через обработчик события кнопки. Когда isRunning является ложным, цикл остановится, но, очевидно, времяStamp будет увеличиваться с того момента, когда цикл будет вызван снова.

+0

Используйте только ваш rAF для рисования, используйте отдельный таймер для секундомера (отдельный чертеж и расчет) – dwana

+0

Да, пожалуйста, разместите свой код (или, по крайней мере, части, связанные с таймером) – Bergi

+0

Я редактировал вопрос для вас – JimiiBee

ответ

0

Был ответ прежде, но я предполагаю, что парень удалил его потом, но я вспомнил и нашел способ сделать это, продолжая использовать timeStamp из rAF.

var startTime = null, 
    isRunning = false, 
    timeElapsed = 0, 
    pause = false, 
    pTime = 0; 

function loop(timeStamp){ 
    if(!startTime) startTime = timeStamp; 

    if(isRunning && !pause){ 
     timeElapsed = (timeStamp - startTime) - pTime; 

     time.text = (timeElapsed/1000).toFixed(2); 
     canvas.redraw(); 

     requestAnimationFrame(loop); 
    }else if(isRunning && pause){ 
     pTime = (timeStamp - startTime) - timeElapsed; 
     timeElapsed = (timeStamp - startTime) - pTime; 


     time.text = (timeElapsed/1000).toFixed(2); 
     canvas.redraw(); 

     pause = false; 

     requestAnimationFrame(loop); 
    }; 
}; 

Он работает, сохраняя разницу между timeStamp и оригинальным timeElapsed в pTime. Теперь, когда вы вычисляете прошедшее время, все, что вам нужно сделать, это вычесть pTime от (timeStamp - startTime).

Петля запускается кнопкой. Вот пример кода:

button.onClick({ 
    if(isRunning){ 
     isRunning = false; 
     pause = true; 
    }else{ 
     isRunning = true; 
     requestAnimationFrame(loop); 
    }; 
}); 

В случае, если кто-либо еще захочет вызвать этот цикл другими способами.

 Смежные вопросы

  • Нет связанных вопросов^_^