跳转到内容
Capgo

加速度计入门

本指南将引导您将 Capacitor Accelerometer 插件集成到应用程序中。

安装

Section titled “安装”

使用 npm 安装插件:

Terminal window
npm install @capgo/capacitor-accelerometer
npx cap sync

平台配置

Section titled “平台配置”

iOS

Section titled “iOS”

无需额外配置。加速度计始终可用。

Android

Section titled “Android”

无需额外配置。加速度计始终可用。

Web

Section titled “Web”

插件使用 DeviceMotion API。生产环境需要 HTTPS。

基本用法

Section titled “基本用法”

导入插件

Section titled “导入插件”
import { Accelerometer } from '@capgo/capacitor-accelerometer';

开始监控

Section titled “开始监控”
const startAccelerometer = async () => {
  await Accelerometer.start({
    interval: 100 // 更新间隔(毫秒)
  });


  console.log('加速度计已启动');
};

监听加速度事件

Section titled “监听加速度事件”
Accelerometer.addListener('accelerationChange', (data) => {
  console.log('X:', data.x);
  console.log('Y:', data.y);
  console.log('Z:', data.z);
  console.log('时间戳:', data.timestamp);
});

获取当前读数

Section titled “获取当前读数”
const getCurrentAcceleration = async () => {
  const reading = await Accelerometer.getCurrentAcceleration();
  console.log('当前加速度:', reading);
};

停止监控

Section titled “停止监控”
const stopAccelerometer = async () => {
  await Accelerometer.stop();
  console.log('加速度计已停止');
};

完整示例

Section titled “完整示例”

这是一个包含摇晃检测的完整示例:

import { Accelerometer } from '@capgo/capacitor-accelerometer';


class AccelerometerService {
  private listener: any;
  private lastX = 0;
  private lastY = 0;
  private lastZ = 0;
  private shakeThreshold = 15;


  async initialize() {
    await Accelerometer.start({ interval: 100 });


    this.listener = Accelerometer.addListener('accelerationChange', (data) => {
      this.handleAcceleration(data);
    });
  }


  handleAcceleration(data: any) {
    // 计算差值
    const deltaX = Math.abs(data.x - this.lastX);
    const deltaY = Math.abs(data.y - this.lastY);
    const deltaZ = Math.abs(data.z - this.lastZ);


    // 检查摇晃
    if (deltaX > this.shakeThreshold ||
        deltaY > this.shakeThreshold ||
        deltaZ > this.shakeThreshold) {
      this.onShake();
    }


    // 更新最后的值
    this.lastX = data.x;
    this.lastY = data.y;
    this.lastZ = data.z;


    // 更新 UI
    this.updateDisplay(data);
  }


  onShake() {
    console.log('设备被摇晃!');
    // 触发摇晃动作
  }


  updateDisplay(data: any) {
    console.log(`X: ${data.x.toFixed(2)} m/s²`);
    console.log(`Y: ${data.y.toFixed(2)} m/s²`);
    console.log(`Z: ${data.z.toFixed(2)} m/s²`);


    // 计算幅度
    const magnitude = Math.sqrt(
      data.x * data.x +
      data.y * data.y +
      data.z * data.z
    );
    console.log(`幅度: ${magnitude.toFixed(2)} m/s²`);
  }


  async cleanup() {
    if (this.listener) {
      this.listener.remove();
    }
    await Accelerometer.stop();
  }
}


// 用法
const accelService = new AccelerometerService();
accelService.initialize();


// 完成时清理
// accelService.cleanup();

理解读数

Section titled “理解读数”

加速度轴

Section titled “加速度轴”
  • X 轴:左(-)到右(+)
  • Y 轴:下(-)到上(+)
  • Z 轴:后(-)到前(+)

重力

Section titled “重力”
  • 静止设备在一个轴上显示约 9.8 m/s²(重力)
  • 移动设备除了重力外还显示加速度

单位

Section titled “单位”
  • 以米每秒平方(m/s²)测量
  • 重力 = 9.8 m/s²

常见用例

Section titled “常见用例”

摇晃检测

Section titled “摇晃检测”
class ShakeDetector {
  private lastUpdate = 0;
  private lastX = 0;
  private lastY = 0;
  private lastZ = 0;


  detectShake(x: number, y: number, z: number): boolean {
    const currentTime = Date.now();


    if (currentTime - this.lastUpdate > 100) {
      const deltaX = Math.abs(x - this.lastX);
      const deltaY = Math.abs(y - this.lastY);
      const deltaZ = Math.abs(z - this.lastZ);


      this.lastUpdate = currentTime;
      this.lastX = x;
      this.lastY = y;
      this.lastZ = z;


      return deltaX + deltaY + deltaZ > 15;
    }


    return false;
  }
}

倾斜检测

Section titled “倾斜检测”
class TiltDetector {
  getTiltAngles(x: number, y: number, z: number) {
    const roll = Math.atan2(y, z) * (180 / Math.PI);
    const pitch = Math.atan2(-x, Math.sqrt(y * y + z * z)) * (180 / Math.PI);


    return { roll, pitch };
  }


  isDeviceFlat(z: number): boolean {
    return Math.abs(z - 9.8) < 1.0;
  }


  isDeviceUpright(y: number): boolean {
    return Math.abs(y - 9.8) < 2.0;
  }
}

步数计数器

Section titled “步数计数器”
class StepCounter {
  private steps = 0;
  private lastMagnitude = 0;
  private threshold = 11;


  processAcceleration(x: number, y: number, z: number) {
    const magnitude = Math.sqrt(x * x + y * y + z * z);


    if (magnitude > this.threshold &&
        this.lastMagnitude < this.threshold) {
      this.steps++;
      console.log('步数:', this.steps);
    }


    this.lastMagnitude = magnitude;
  }
}

最佳实践

Section titled “最佳实践”

  1. 选择适当的间隔:平衡响应性和电池寿命

    • 游戏:16-50ms
    • 健身:100-200ms
    • 一般:200-500ms

  2. 移除监听器:完成后始终清理

  3. 过滤噪声:使用移动平均值获得更平滑的数据

  4. 考虑电池:高频轮询会耗尽电池

  5. 在真实设备上测试:模拟器无法提供准确的数据

性能提示

Section titled “性能提示”

防抖

Section titled “防抖”
class AccelerometerDebouncer {
  private timeout: any;


  debounce(callback: Function, delay: number) {
    return (...args: any[]) => {
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => callback(...args), delay);
    };
  }
}

数据平滑

Section titled “数据平滑”
class AccelerometerFilter {
  private alpha = 0.8;
  private filteredX = 0;
  private filteredY = 0;
  private filteredZ = 0;


  filter(x: number, y: number, z: number) {
    this.filteredX = this.alpha * x + (1 - this.alpha) * this.filteredX;
    this.filteredY = this.alpha * y + (1 - this.alpha) * this.filteredY;
    this.filteredZ = this.alpha * z + (1 - this.alpha) * this.filteredZ;


    return {
      x: this.filteredX,
      y: this.filteredY,
      z: this.filteredZ
    };
  }
}

下一步

Section titled “下一步”