requestAnimationFrame을 사용하여 fps를 제어하는 ​​방법은 무엇입니까?

fps는 일반적으로 애니메이션을 사용해야 하는 비디오 및 게임과 관련된 용어입니다. fps는 초당 프레임 수의 약어이며 현재 화면이 다시 렌더링되는 횟수를 나타냅니다.

예를 들어 비디오는 연속된 이미지 행입니다. 이는 매우 짧은 간격으로 이미지를 표시하므로 사용자는 이미지를 개별적으로 표시하고 있다는 것을 알 수 없습니다. 영상의 fps를 낮추면 영상이 아닌 이미지 애니메이션처럼 보일 수도 있습니다. 따라서 fps가 높을수록 더 나은 결과를 얻을 수 있습니다. 기본적으로 fps는 화면이 1초에 몇 번 업데이트되어야 하는지 알려줍니다.

때때로 fps를 제어하기 위해 JavaScript를 사용해야 할 때가 있습니다. 우리가 사용할 수 있는 다양한 방법이 있으며, 이 튜토리얼에서는 이에 대해 배울 것입니다.

SetTime() 함수를 사용하세요

setTimeout() 함수는 콜백 함수를 첫 번째 매개변수로, 시간 간격을 두 번째 매개변수로 사용합니다. 여기에서는 매 시간 간격 후에 화면을 다시 렌더링하여 fps를 제어할 수 있습니다.

문법

사용자는 setTimeout() 함수를 사용하여 다음 구문에 따라 fps를 제어할 수 있습니다.

requestAnimationFrame() 메서드를 사용하여 위 구문에서 animate() 함수를 호출했습니다.

단계

• 1단계 - totalFrames 변수를 정의하고 0으로 초기화합니다. 총 프레임 수를 기록합니다.

• 2단계 - 또한 fps 변수를 정의하고 fps 값을 저장합니다.

• 3단계 - IntervalOffps 변수를 정의하고 여기에 간격을 저장합니다. 1000은 밀리초인 1000/fps를 저장하고 이를 fps로 나누어 시간 간격을 얻습니다.

• 4단계 - startTime 변수에 현재 시간을 저장합니다.

• 5단계 - animate() 함수를 호출합니다.

• 5.1단계 - 각 internvalOffps 후에 setTimeout() 함수를 사용하여 requestAnimationFrame() 함수를 호출합니다.

• 5.2단계 - setTimeout() 함수의 콜백 함수에서 사용자는 화면을 다시 렌더링하거나 캔버스에 도형을 그리는 코드를 작성할 수 있습니다.

• 5.3단계 - Date() 객체를 사용하여 현재 시간을 가져옵니다. 현재 시간에서 시작 시간을 빼서 경과 시간을 구합니다.

• 5.4단계 - 수학 함수를 사용하여 총 FPS와 총 시간을 구합니다.

예 1

아래 예에서는 setTimeout() 함수를 사용하여 fps를 제어합니다. fps 값으로 "3"을 사용합니다. 따라서 fps 간격은 1000/3과 같습니다. 따라서 1000/3밀리초마다 requestAnimationFrame() 메서드를 호출합니다.

Date() 객체 사용

Date() 객체를 사용하여 현재 시간과 이전 프레임 시간의 차이를 얻을 수 있습니다. 시간차가 프레임 간격을 초과하면 화면을 다시 렌더링합니다. 그렇지 않으면 단일 프레임이 완료될 때까지 기다립니다.

문법

사용자는 시간 간격을 사용하여 아래 구문에 따라 프레임 속도를 제어할 수 있습니다.

위 구문에서 경과 시간은 현재 시간과 마지막 프레임이 완료된 시간의 차이입니다.

예 2

아래 예에서는 현재 프레임과 마지막 프레임 간의 시간 차이를 사용합니다. 시간 차이가 시간 간격보다 크면 화면을 다시 렌더링합니다.

예 3

아래 예에서는 사용자가 입력 범위를 사용하여 fps를 설정할 수 있습니다. 이후 사용자가 버튼을 클릭하면 fps 간격을 설정하고 animate() 함수를 호출하는 startAnimation() 함수가 실행됩니다. animate() 함수는 drawShape() 함수를 호출하여 캔버스에 모양을 그리고 fps를 제어합니다.

여기서는 캔버스에 모양을 그리는 데 몇 가지 방법을 사용했습니다. 사용자는 입력 범위를 사용하여 fps를 변경하고, 모양에 애니메이션을 적용하고, 애니메이션의 차이를 관찰할 수 있습니다.

위 내용은 requestAnimationFrame을 사용하여 fps를 제어하는 ​​방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!