useDeviceMotion

カテゴリー

センサー

エクスポートサイズ

703 B

最終更新

先週

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

デモ

ソース

デバイスモーション

{
  "acceleration": {
    "x": null,
    "y": null,
    "z": null
  },
  "accelerationIncludingGravity": {
    "x": null,
    "y": null,
    "z": null
  },
  "rotationRate": {
    "alpha": null,
    "beta": null,
    "gamma": null
  },
  "interval": 0
}

使用法

import { useDeviceMotion } from '@vueuse/core'

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

状態	型	説明
acceleration	`object`	3つの軸X、Y、Zにおけるデバイスの加速度を与えるオブジェクト。
accelerationIncludingGravity	`object`	重力の影響を含めた、3つの軸X、Y、Zにおけるデバイスの加速度を与えるオブジェクト。
rotationRate	`object`	デバイスの向きの変化率を、3つの軸（alpha、beta、gamma）で与えるオブジェクト。
interval	`Number`	デバイスからデータが取得される時間間隔（ミリ秒単位）を表す数値。

MDNのステートに関する詳細情報はこちら。

コンポーネントの使用法

この関数は、@vueuse/componentsパッケージを介してレンダーレスコンポーネントバージョンも提供します。使用法について詳しくはこちら。

vue

<template>
  <UseDeviceMotion v-slot="{ acceleration }">
    Acceleration: {{ acceleration }}
  </UseDeviceMotion>
</template>

型宣言

typescript

export interface DeviceMotionOptions
  extends ConfigurableWindow,
    ConfigurableEventFilter {}
/**
 * Reactive DeviceMotionEvent.
 *
 * @see https://vueuse.dokyumento.jp/useDeviceMotion
 * @param options
 */
export declare function useDeviceMotion(options?: DeviceMotionOptions): {
  acceleration: Ref<
    DeviceMotionEventAcceleration | null,
    DeviceMotionEventAcceleration | null
  >
  accelerationIncludingGravity: Ref<
    DeviceMotionEventAcceleration | null,
    DeviceMotionEventAcceleration | null
  >
  rotationRate: Ref<
    DeviceMotionEventRotationRate | null,
    DeviceMotionEventRotationRate | null
  >
  interval: Ref<number, number>
}
export type UseDeviceMotionReturn = ReturnType<typeof useDeviceMotion>