Question

我试图记录用户的鼠标和键输入，然后＆＃34;播放它们＆＃34;通过按时间顺序触发事件，同时发生事件。这句话有点令人困惑，所以我会解释我的代码：

var $dancerContainer = $('.dancerContainer');

var count = 3;  
var captured;
var countInterval;

$dancerContainer是我想要动画的元素，它是一个div。 count是“录制”的持续时间。相。 captured最终将成为一个保存事件的对象，以记录开始后经过的时间（以毫秒为单位）来键入。

function captureInput() {
  var mouseCapture = [];
  var keyCapture = [];
  var start = new Date().getTime();

$(document).on('mousemove.capture', function(event) {
  event.t = new Date().getTime() - start;
  mouseCapture.push(event);
});

$(document).on('keyup.capture', function(event) {
  event.t = new Date().getTime() - start;
  keyCapture.push(event);
});

setTimeout(function() {
  $(document).off('.capture');
  captured = chronoCaptures(mouseCapture, keyCapture);
}, 3000);
}

captureInput func标记事件经过的时间，然后将它们推送到鼠标和键盘数组mouseCapture和keyCapture，然后取消绑定侦听器。

function chronoCaptures(mouse, keyboard) {
  var greater = (mouse.length > keyboard.length) ? mouse.length : keyboard.length;
  var chrono = {};
  var j = 0;
  var k = 0;

  for (var i = 0; i < greater; i++) {
    if (keyboard[k] == undefined) {
      chrono[mouse[j].t] = mouse[j];
      j++; 
    } else if (mouse[j] == undefined) {
      chrono[keyboard[k].t] = keyboard[k];
      k++; 
    } else {
      if (mouse[j].t < keyboard[k].t) {
        chrono[mouse[j].t] = mouse[j];
        j++;
      } else {
        chrono[keyboard[k].t] = keyboard[k];
        k++;
      }
    }
  }
  return chrono;
}

chronoOrderCaptures然后获取两个事件数组并返回一个对象，其键是每个事件发生的时间。现在我再次查看这段代码，因为无论如何我将事件放入一个对象中，它们放入的顺序并不重要。我可能会用另一个事件覆盖一个事件，在这种情况下我想要优先考虑的关键事件（重构这一点，但这不是重点）。

function replayDance(captured, duration) {
  var d = duration * 1000;
  var start = new Date().getTime();
  var elapsed = 0;
  while (elapsed <= d) {
    elapsed = new Date().getTime() - start;
    var c = captured[elapsed];
    if (c) { 
      $dancerContainer.trigger(c)
    }
  }

}

最后，replayDance等待录制的持续时间并检查已经过了多长时间。如果captured对象包含@经过时间的条目，我会在文档上触发事件。

呼。谢谢你，如果你已经走到这一步。现在来问题!! （什么？）我遇到的问题是所有的鼠标事件都会被立即播放回来＃39;没有暂停发生，我没有看到它们按顺序执行，好像我实际上正在移动鼠标一样，尽管看起来它们应该在它们被记录的大致相同的时间被触发。

最后，这是mousemove事件的处理程序：

$(document).on('mousemove', followMouse);

function followMouse(event) {
  var width = $(window).width();
  var height = $(window).height();
  var mouseX = event.pageX - (width * 0.25);
  var mouseY = event.pageY - (height * 0.25);
  var angleX = (mouseY / height) * 45;
  var angleY = (mouseX / width) * 45;
  dancer.style.webkitTransform = "rotateX(" + angleX + "deg) rotateY(" + angleY + "deg)";       
}

录制和＆＃34;播放＆＃34; css 3d变换

0 个答案: