자바 스크립트 애니메이션 잘못

샘플 : http://codepen.io/anon/pen/xgZMVd/자바 스크립트 애니메이션 잘못

HTML 파일 :

<div class="game-page"> 
</div>

CSS 파일 :

.game-page { 
    width: 1024px; 
    height: 768px; 
    position: absolute; 
    background-color: grey; 
} 

.stick { 
    position: absolute; 
    left: 50%; 
    margin-left: -94px; 
    top: -60px; 
    width: 188px; 
    height: 50px; 
    background-color: black; 
}

JS 파일 :

$(document).ready(function() { 
    init(); 
}); 

var CSS_CLASS = { STICK: "stick" }, 
    changeSpeedTime = 1000, //in milliseconds 
    gameTime = 60, //in seconds 
    timer = 1, //in seconds 
    windowWidth = 1024, 
    windowHeight = 768, 
    stickTop = -60, 
    restStickTime = 0, //in milliseconds 
    initialStickInterval = 1000, //in milliseconds 
    stickInterval = null, //in milliseconds 
    initialStickDuration = 7, //in seconds 
    stickDuration = null, //in seconds 
    stickTweensArray = [], 
    changeSpeedInterval = null, 
    countdownTimerInterval = null, 
    generateSticksInterval = null, 
    generateSticksTimeout = null, 
    $gamePage = null; 

function init() { 
    initVariables(); 
    initGamePage(); 
} 

function changingSpeedFunction(x){ 
    var y = Math.pow(2, (x/20)); 
    return y; 
} 

function initVariables() { 
    $gamePage = $(".game-page"); 
    stickDuration = initialStickDuration; 
    stickInterval = initialStickInterval; 
} 

function initGamePage() { 
    TweenMax.ticker.useRAF(false); 
    TweenMax.lagSmoothing(0); 
    initGamePageAnimation(); 
} 

function initGamePageAnimation() { 
    generateSticks(); 

    changeSpeedInterval = setInterval(function() { 
    changeSpeed(); 
    }, changeSpeedTime); 

    countdownTimerInterval = setInterval(function() { 
    updateCountdown(); 
    }, 1000); 
} 

function changeSpeed() { 
    var x = timer; 
    var y = changingSpeedFunction(x); //change speed function 
    stickDuration = initialStickDuration/y; 
    stickInterval = initialStickInterval/y; 

    changeCurrentSticksSpeed(); 
    generateSticks(); 
} 

function changeCurrentSticksSpeed() { 
    stickTweensArray.forEach(function(item, i, arr) { 
    var tween = item.tween; 
    var $stick = item.$stick; 

    var oldTime = tween._time; 
    var oldDuration = tween._duration; 
    var newDuration = stickDuration; 
    var oldPosition = stickTop; 
    var newPosition = $stick.position().top; 
    var oldStartTime = tween._startTime; 

    var distance = newPosition - oldPosition; 
    var oldSpeed = distance/oldTime; 
    var newSpeed = oldSpeed * oldDuration/newDuration; 
    var newTime = distance/newSpeed; 
    var currentTime = oldStartTime + oldTime; 
    var newStartTime = currentTime - newTime; 

    item.tween._duration = newDuration; 
    item.tween._startTime = newStartTime; 
    }); 
} 

function generateSticks() { 
    if (restStickTime >= changeSpeedTime) { 
    restStickTime -= changeSpeedTime; 
    restStickTime = Math.abs(restStickTime); 
    } else { 
    generateSticksTimeout = setTimeout(function() { 
     generateSticksInterval = setInterval(function() { 
     generateStick(); 
     restStickTime -= stickInterval; 
     if (restStickTime <= 0) { 
      clearInterval(generateSticksInterval); 
      restStickTime = Math.abs(restStickTime); 
     } 
     }, stickInterval); 
     generateStick(); 
     restStickTime = changeSpeedTime - Math.abs(restStickTime) - stickInterval; 
     if (restStickTime <= 0) { 
     clearInterval(generateSticksInterval); 
     restStickTime = Math.abs(restStickTime); 
     } 
    }, restStickTime); 
    } 
} 

function generateStick() { 
    var $stick = $("<div class='" + CSS_CLASS.STICK + "'></div>").appendTo($gamePage); 

    animateStick($stick); 
} 

function animateStick ($stick) { 
    var translateYValue = windowHeight + -stickTop; 

    var tween = new TweenMax($stick, stickDuration, { 
    y: translateYValue, ease: Power0.easeNone, onComplete: function() { 
     $stick.remove(); 
     stickTweensArray.shift(); 
    } 
    }); 

    stickTweensArray.push({tween:tween, $stick:$stick}); 
} 

function updateCountdown() { 
    timer++; 

    if (timer >= gameTime) { 
    onGameEnd(); 
    clearInterval(changeSpeedInterval); 
    clearInterval(countdownTimerInterval); 
    clearInterval(generateSticksInterval); 
    clearTimeout(generateSticksTimeout); 
    } 
} 

function onGameEnd() { 
    var $sticks = $gamePage.find(".stick"); 
    TweenMax.killTweensOf($sticks); 
}

S o, 내가 조사 할 때, 나는 다음 상황을 가지고있다 :

탭이 비활성 일 때 TweenMax (그것이 requestAnimationFrame을 사용함)가 정지된다.
탭이 비활성 상태 일 때 setInterval 계속 진행 (탭이 비활성 상태 일 때 지연이 변경 될 수 있으며 브라우저에 따라 다름)
탭이 비활성 상태 일 때 변경되는 다른 javascript 기능이 있습니까? 탭이 비활성 상태 일 때,
1. 정지 전체 게임 :
은 그 때 나는이 개 솔루션을 가지고있다.
탭이 비활성 상태 인 경우 계속 진행합니다. (애니메이션을 정지)이 솔루션에 따라 TweenMax는 requestAnimationFrame을 사용하기 때문에, 그것은 올바른 작동하지만, 어떻게 간격 및 시간 제한을 재개 한 후 탭이 비활성 상태 일 때 간격 및 시간 제한을 동결 할 수 있습니다 : 최초의 솔루션으로

나는 다음 문제가?

TweenMax.lagSmoothing (0) 및 TweenMax.ticker.useRAF (false)를 애니메이션에 사용할 수 있으며 작동하지만 어쨌든 간격 및/또는 시간 초과가 잘못되었습니다. 탭이 비활성화되어있을 때 간격 지연이 1000+ ms로 바뀌었기 때문에 애니메이션이 잘못 될 것으로 예상했으나 (http://stackoverflow...w-is-not-active에 따르면) 가속을 사용하지 않도록 설정하고 지연을 2000ms로 설정하면 도움이되지 않았습니다.

적어도 하나의 솔루션으로 도와주세요. 두 가지를 다양하게 사용하는 것이 더 좋습니다.

출처

2017-01-11 Dima Glushko