useDeviceMotion

Demo

设备运动:

{
  "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`	一个对象，提供设备在三个轴 X、Y 和 Z 上的加速度。
accelerationIncludingGravity	`object`	一个对象，提供设备在三个轴 X、Y 和 Z 上受到重力影响后的加速度。
rotationRate	`object`	一个对象，提供设备在三个方向轴 alpha、beta 和 gamma 上方向变化的速率。
interval	`Number`	一个表示以毫秒为单位从设备获取数据的时间间隔的数字。

您可以在 MDN 上找到有关状态的更多信息。

组件用法

vue

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

类型声明

typescript

export interface DeviceMotionOptions
  extends ConfigurableWindow,
    ConfigurableEventFilter {}
/**
 * 响应式 DeviceMotionEvent.
 *
 * @see https://vueuse.org/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>