屏幕活动后停止动画

Question

我将代码设置为在屏幕不活动2秒后启动动画（我基本上是在做屏幕保护程序）。但我无法弄清楚如何在屏幕不再空闲（鼠标移动，屏幕点击等）后停止动画并且div恢复正常

这是JSFiddle - http://jsfiddle.net/Xw29r/7129/

我的代码：

var timeoutID;

function setup() {
this.addEventListener("mousemove", resetTimer, false);
this.addEventListener("mousedown", resetTimer, false);
this.addEventListener("keypress", resetTimer, false);
this.addEventListener("DOMMouseScroll", resetTimer, false);
this.addEventListener("mousewheel", resetTimer, false);
this.addEventListener("touchmove", resetTimer, false);
this.addEventListener("MSPointerMove", resetTimer, false);

startTimer();
}
setup();

function startTimer() {
// wait 2 seconds before calling goInactive
timeoutID = window.setTimeout(goInactive, 2000);
}

function resetTimer(e) {
window.clearTimeout(timeoutID);

goActive();
}

function goInactive() {
$(document).ready(function(){
animateDiv();

});

function makeNewPosition(){

// Get viewport dimensions (remove the dimension of the div)
var h = $('#wrap').height() - 50;
var w = $('#wrap').width() - 50;

var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);

return [nh,nw];    

}

function animateDiv(){
var newq = makeNewPosition();
var oldq = $('.a').offset();
var speed = calcSpeed([oldq.top, oldq.left], newq);

$('.a').animate({ top: newq[0], left: newq[1] }, speed, function(){
  animateDiv();        
});

};

function calcSpeed(prev, next) {

var x = Math.abs(prev[1] - next[1]);
var y = Math.abs(prev[0] - next[0]);

var greatest = x > y ? x : y;

var speedModifier = 0.1;

var speed = Math.ceil(greatest/speedModifier);

return speed;

}
}
function goActive() {
startTimer();
}

Answer 1

你去吧。添加额外的变量就可以了。

修改

Box回去开始活跃。

var timeoutID;
var isActive = true;
function setup() {
  this.addEventListener("mousemove", resetTimer, false);
  this.addEventListener("mousedown", resetTimer, false);
  this.addEventListener("keypress", resetTimer, false);
  this.addEventListener("DOMMouseScroll", resetTimer, false);
  this.addEventListener("mousewheel", resetTimer, false);
  this.addEventListener("touchmove", resetTimer, false);
  this.addEventListener("MSPointerMove", resetTimer, false);

  startTimer();
}
setup();

function startTimer() {
  // wait 2 seconds before calling goInactive
  timeoutID = window.setTimeout(goInactive, 2000);
}

function resetTimer(e) {
  window.clearTimeout(timeoutID);

  goActive();
}

function goInactive() {
  $(document).ready(function() {
    animateDiv();
    isActive = false;
  });

  function makeNewPosition() {

    // Get viewport dimensions (remove the dimension of the div)
    var h = $('#wrap').height() - 50;
    var w = $('#wrap').width() - 50;

    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);

    return [nh, nw];

  }

  function animateDiv() {
    var newq = makeNewPosition();
    var oldq = $('.a').offset();
    var speed = calcSpeed([oldq.top, oldq.left], newq);

    $('.a').animate({
      top: newq[0],
      left: newq[1]
    }, speed, function() {
    	if(!isActive)
      	animateDiv();
    });

  };

  function calcSpeed(prev, next) {

    var x = Math.abs(prev[1] - next[1]);
    var y = Math.abs(prev[0] - next[0]);

    var greatest = x > y ? x : y;

    var speedModifier = 0.1;

    var speed = Math.ceil(greatest / speedModifier);

    return speed;

  }
}

function goActive() {
  startTimer();
  isActive = true;
  $('.a').stop();
  $('.a').css('top', 8);
  $('.a').css('left', 8);
}

#wrap {
  width: 400px;
  height: 300px;
  background-color: #9ff;
}

div.a {
  width: 50px;
  height: 50px;
  background-color: red;
  position: fixed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="wrap">
  <div class='a'></div>
</div>