useDeviceMotion

useDeviceMotion

リアクティブなDeviceMotionEvent。デバイスの位置と向きの変化速度に関する情報をウェブ開発者に提供します。

使用法

import { useDeviceMotion } from '@vueuse/core'

const {
  acceleration,
  accelerationIncludingGravity,
  rotationRate,
  interval,
} = useDeviceMotion()

注: iOSの場合、triggerを使用し、ユーザーの操作と結びつける必要があります。 許可が与えられた後、APIは自動的に実行されます。

状態説明
accelerationobjectデバイスのX、Y、Zの3軸における加速度を示すオブジェクト。
accelerationIncludingGravityobject重力の影響を含む、デバイスのX、Y、Zの3軸における加速度を示すオブジェクト。
rotationRateobjectデバイスの向きの変化率を、アルファ、ベータ、ガンマの3つの向きの軸で示すオブジェクト。
intervalNumberデバイスからデータが取得される時間間隔をミリ秒で表す数値。
ensurePermissionsbooleanプラットフォームがAPIの使用に許可を必要とするかどうかを示します。
permissionGrantedbooleanユーザーが許可を与えたかどうかを示します。デフォルトは常にfalseです。
triggerPromise<void>ユーザーの許可を要求する非同期関数。許可が与えられるとAPIは自動的に実行されます。

MDNで状態に関する詳細情報を見つけることができます

コンポーネントの使用法

<template>
  <UseDeviceMotion v-slot="{ acceleration }">
    加速度: {{ acceleration }}
  </UseDeviceMotion>
</template>