Question

我正在尝试在touchmove上创建一个动画，但我有点担心会对设备的硬件提出多少要求，所以我尝试使用requestAnimationFrame，但我不知道我是否正在这样做右。

$('.LeftIcon, .RightIcon, .MiddleMenu').live('touchmove', function(e){requestAnimationFrame(move(e))});

function move(e)
{
    e.preventDefault();
    var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
    var move_pixels = touch.pageX;

    $(fixed_elements).css('left',move_pixels+'px');
}

我会对一些反馈感到满意（;

Answer 1

这个主题有一个nice article on smashingmagazine：

// On button press…
animateLeft(elm, '250px', '500px', function() {
  console.log("Done!");
});

// The implementation
function animateLeft(elm, from, to, done) {
  // Turn our CSS values into numbers
  // We're being lazy and assuming they're in px
  from = parseInt(from, 10);
  to = parseInt(to, 10);
  // Work out the amount we need to move the box
  var diff = to - from;

  var duration = 3000;
  var startTime = performance.now();

  // Set initial position
  elm.style.transform = 'translate(' + from + 'px, 0)';

  function frame(time) {
    // How long has the animation been running?
    var animTime = time - startTime;
    // Are we done?
    if (animTime >= duration) {
      // It's likely that the last rendered position wasn't the
      // final position, so we set it here.
      elm.style.transform = 'translate(' + to + 'px, 0)';

      done();
    }
    else {
      // What position should the box be in?
      var position = from + (animTime / duration * diff);
      elm.style.transform = 'translate(' + position + 'px, 0)';
      // Request our next frame
      requestAnimationFrame(frame);
    }
  }
  // request our first frame
  requestAnimationFrame(frame);
}

window.requestAnimationFrame（）使用它吗？

1 个答案: