如何用cancelAnimationFrame停止旋转？

Question

我目前使用的是三个am和requestAnimationFrame方法。我试图通过按住按钮将相机旋转到右边。我的问题是，通过释放按钮，旋转不会停止，每次我再次按下按钮时，旋转速度就会加快。

HTML:

<button id="right" onmousedown="rotateRight()" onmouseup="rotatestopRight()">Right</button> 

JavaScript:

function rotateRight(){
    mainPivot.add(camera);
    mainPivot.rotation.y+=Math.PI/180;
    requestAnimationFrame( rotateRight );
}

function rotatestopRight(){
    cancelAnimationFrame( rotateRight );
}

我试图通过发布mainPivot.rotation.y-=Math.PI/180;来解决这个问题，但这并不是最好的解决方案，因为onmouseup事件很容易被绕过。知道怎么走吗？

Answer 1

你不正确地使用它。requestAnimationFrame返回您在调用cancelAnimationFrame时使用的id。

var id = requestAnimationFrame();

...

cancelAnimationFrame( id );