window.requestAnimationFrame（）使用它的权利？

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); 
}