자바스크립트로 바이브레이션 애니메이션 구현하기

18 Oct 2023

많은 웹사이트와 앱에서 바이브레이션 애니메이션을 사용하여 사용자에게 더욱 생동감 있는 경험을 제공할 수 있습니다. 이번 글에서는 자바스크립트를 사용하여 바이브레이션 애니메이션을 구현하는 방법을 알아보겠습니다.

1. `window.navigator.vibrate()` 메소드 사용

window.navigator.vibrate() 메소드는 디바이스의 진동 기능을 사용할 수 있도록 해줍니다. 이 메소드를 사용하여 바이브레이션 애니메이션을 구현할 수 있습니다.

// 1초간 진동
window.navigator.vibrate(1000);

위의 코드는 1초 동안 디바이스를 진동시킵니다. 진동 시간은 밀리초 단위로 설정하며, window.navigator.vibrate() 메소드에 원하는 진동 시간을 전달하면 됩니다.

window.navigator.vibrate() 메소드는 진동 패턴을 설정하여 보다 다양한 애니메이션을 구현할 수 있습니다. 숫자 배열을 전달하여 진동의 길이와 일시적으로 멈추는 시간을 지정할 수 있습니다.

// 1초 동안 0.5초 진동 후 0.3초 정지, 그리고 다시 0.5초 진동
window.navigator.vibrate([500, 300, 500]);

위의 코드는 1초 동안 0.5초 진동 후 0.3초 정지를 1회 반복하는 진동 애니메이션을 구현합니다. 패턴은 숫자 배열로 전달되며, 진동 시간과 정지 시간이 번갈아가며 반복됩니다.

window.navigator.vibrate() 메소드를 호출하여 진동을 멈출 수도 있습니다.

// 진동 멈추기
window.navigator.vibrate(0);

위의 코드는 현재 진행 중인 진동 애니메이션을 멈춥니다. 0을 전달하여 진동 시간을 0으로 설정하면 진동이 멈추게 됩니다.

window.navigator.vibrate() 메소드를 사용하기 전에 지원 여부를 확인하는 것이 좋습니다. window.navigator.vibrate 속성을 확인하여 진동 기능이 지원되는지 확인할 수 있습니다.

// 진동 기능이 지원되는지 확인
if (window.navigator.vibrate) {
  // 진동 애니메이션 구현 코드 작성
} else {
  console.log('이 브라우저는 진동 기능을 지원하지 않습니다.');
}

위의 코드는 진동 기능이 지원되는 경우 진동 애니메이션을 구현할 수 있는 코드를 작성하고, 지원되지 않는 경우 콘솔에 메시지를 출력합니다.

위에서 소개한 방법을 사용하여 자바스크립트로 바이브레이션 애니메이션을 구현할 수 있습니다. 다양한 진동 패턴과 진동 시간을 조합하여 보다 다채로운 애니메이션을 구현해보세요. 사용자에게 더욱 생동감 있고 흥미로운 경험을 제공할 수 있을 것입니다.