PhoneGap 16 Android传感器之Accelerometer

最新推荐文章于 2025-07-29 13:36:53 发布

程序海洋的一叶小舟

最新推荐文章于 2025-07-29 13:36:53 发布

阅读量1.6k

点赞数

分类专栏： phonegap 文章标签： cordova css3 html5 javascript phonegap

phonegap 专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍了如何在Cordova应用中使用加速度计API来捕捉设备的运动数据，包括安装插件、配置不同平台的方法、获取加速度数据的函数及其实现示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Accelerometer即时捕获设备在x、y、z方向上的运动

访问功能

3.0版本后，cordova通过插件模式实现设备API，使用CLI的plugin命令可以添加或者移除插件：

    $ cordova plugin add org.apache.cordova.device-motion
    $ cordova plugin ls
    [ 'org.apache.cordova.device-motion' ]
    $ cordova plugin rm org.apache.cordova.device-motion

这个命令可以应用于所有平台，但是修改平台特定的配置设置需要使用下面的方法

Amazon Fire OS(在 res/xml/config.xml中)

<feature name="Accelerometer">
    <param name="android-package" value="org.apache.cordova.devicemotion.AccelListener" />
</feature>

Android(在 res/xml/config.xml中)

<feature name="Accelerometer">
    <param name="android-package" value="org.apache.cordova.devicemotion.AccelListener" />
</feature>

BlackBerry 10 (在www/config.xml中)

<feature name="Accelerometer" value="Accelerometer" />

IOS (在应用程序名的 config.xml 文件)

<feature name="Accelerometer">
    <param name="ios-package" value="CDVAccelerometer" />
</feature>

Windows Phone (在 Properties/WPAppManifest.xml中)

<Capabilities>
    <Capability Name="ID_CAP_SENSORS" />
</Capabilities>

函数

accelerometer.getCurrentAccelerometer()

获取当前沿x、y、z方向的加速度。

navigator.accelerometer.getCurrentAcceleration(accelerometerSuccess, accelerometerError);

描述

加速度传感器是一种运动传感器，它检测设备在三维空间中沿x/y/z方向相对于前一时刻的变化数据。

这些值是通过传递给 accelerometerSuccess 回到函数的参数返回的。

支持的平台

Amazon Fire OS
Android
BlackBerry 10
iOS
Tizen
Windows Phone 7 and 8
Windows 8

简单例子

function onSuccess(acceleration) {
    alert('Acceleration X: ' + acceleration.x + '\n' +
          'Acceleration Y: ' + acceleration.y + '\n' +
          'Acceleration Z: ' + acceleration.z + '\n' +
          'Timestamp: '      + acceleration.timestamp + '\n');
};

function onError() {
    alert('onError!');
};

navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);

完整的html文档

<!DOCTYPE html>
<html>
  <head>
    <title>Acceleration Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // device APIs are available
    //
    function onDeviceReady() {
        navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);
    }

    // onSuccess: Get a snapshot of the current acceleration
    //
    function onSuccess(acceleration) {
        alert('Acceleration X: ' + acceleration.x + '\n' +
              'Acceleration Y: ' + acceleration.y + '\n' +
              'Acceleration Z: ' + acceleration.z + '\n' +
              'Timestamp: '      + acceleration.timestamp + '\n');
    }

    // onError: Failed to get the acceleration
    //
    function onError() {
        alert('onError!');
    }

    </script>
  </head>
  <body>
    <h1>Example</h1>
    <p>getCurrentAcceleration</p>
  </body>
</html>

IOS怪癖

IOS不存在在指定时间点获取加速度的概念
你必须注意加速度，并在每隔一段时间采集一次
因此，getCurrentAcceleration产生下面所讲的watchAcceleration的最后一个值。

accelerometer.watchAcceleration

以一定的时间间隔，获取沿x/y/z方向的加速度

var watchID = navigator.accelerometer.watchAcceleration(accelerometerSuccess,
                                                       accelerometerError,
                                                       [accelerometerOptions]);

描述

accelerometer.watchAcceleration：以一定的时间间隔，获取沿x/y/z方向的加速度，每次执行accelerometerSuccess函数，通过acceleratorOptions对象的frequency参数设置间隔的时间，以毫秒为单位。

返回的watchID可以传给accelerometer.clearWatch方法去停止加速器。

支持的平台

Amazon Fire OS
Android
BlackBerry 10
iOS
Tizen
Windows Phone 7 and 8
Windows 8

快速例子

function onSuccess(acceleration) {
    alert('Acceleration X: ' + acceleration.x + '\n' +
          'Acceleration Y: ' + acceleration.y + '\n' +
          'Acceleration Z: ' + acceleration.z + '\n' +
          'Timestamp: '      + acceleration.timestamp + '\n');
};

function onError() {
    alert('onError!');
};

var options = { frequency: 3000 };  // Update every 3 seconds

var watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);

完整例子

<!DOCTYPE html>
<html>
  <head>
    <title>Acceleration Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // The watch id references the current `watchAcceleration`
    var watchID = null;

    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // device APIs are available
    //
    function onDeviceReady() {
        startWatch();
    }

    // Start watching the acceleration
    //
    function startWatch() {

        // Update acceleration every 3 seconds
        var options = { frequency: 3000 };

        watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);
    }

    // Stop watching the acceleration
    //
    function stopWatch() {
        if (watchID) {
            navigator.accelerometer.clearWatch(watchID);
            watchID = null;
        }
    }

    // onSuccess: Get a snapshot of the current acceleration
    //
    function onSuccess(acceleration) {
        var element = document.getElementById('accelerometer');
        element.innerHTML = 'Acceleration X: ' + acceleration.x         + '<br />' +
                            'Acceleration Y: ' + acceleration.y         + '<br />' +
                            'Acceleration Z: ' + acceleration.z         + '<br />' +
                            'Timestamp: '      + acceleration.timestamp + '<br />';
    }

    // onError: Failed to get the acceleration
    //
    function onError() {
        alert('onError!');
    }

    </script>
  </head>
  <body>
    <div id="accelerometer">Waiting for accelerometer...</div>
  </body>
</html>

IOS怪癖

该API在间隔请求时间调用successFunction，但是设备的请求范围是在40ms至1000ms。比如：你请求的间隔时间是3s（3000ms），API从设备每隔1s请求一次数据，但是执行successFunction是每隔3s执行一次。

accelerometer.clearWatch

停止监视

navigator.accelerometer.clearWatch(watchID);

watchID，通过accelerometer.watchAcceleration方法返回的。

支持的平台

Amazon Fire OS
Android
BlackBerry 10
iOS
Tizen
Windows Phone 7 and 8
Windows 8

简单例子

var watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);

// ... later on ...

navigator.accelerometer.clearWatch(watchID);

完整例子

<!DOCTYPE html>
<html>
  <head>
    <title>Acceleration Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // The watch id references the current `watchAcceleration`
    var watchID = null;

    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // device APIs are available
    //
    function onDeviceReady() {
        startWatch();
    }

    // Start watching the acceleration
    //
    function startWatch() {

        // Update acceleration every 3 seconds
        var options = { frequency: 3000 };

        watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);
    }

    // Stop watching the acceleration
    //
    function stopWatch() {
        if (watchID) {
            navigator.accelerometer.clearWatch(watchID);
            watchID = null;
        }
    }

    // onSuccess: Get a snapshot of the current acceleration
    //
    function onSuccess(acceleration) {
        var element = document.getElementById('accelerometer');

        element.innerHTML = 'Acceleration X: ' + acceleration.x + '<br />' +
                            'Acceleration Y: ' + acceleration.y + '<br />' +
                            'Acceleration Z: ' + acceleration.z + '<br />' +
                            'Timestamp: '      + acceleration.timestamp + '<br />';
    }

    // onError: Failed to get the acceleration
    //
    function onError() {
        alert('onError!');
    }

    </script>
  </head>
  <body>
    <div id="accelerometer">Waiting for accelerometer...</div>
        <button οnclick="stopWatch();">Stop Watching</button>
  </body>
</html>

对象

Acceleration

包含了在特定时间点捕获的加速度数据

属性

x: x方向的加速度（m/s^2）；
y: y方向的加速度（m/s^2）；
z: z方向的加速度（m/s^2）；
timestamp: 时间戳

描述

通常，任何Accelerometer的方法都会返回一个Acceleration对象，Acceleration对象包含重力的影响（9.81m/s^2），所以当一个设备水平向上放置的时候，返回的值应该是x、y都是0，z为9.81。

支持的平台

Amazon Fire OS
Android
BlackBerry 10
iOS
Tizen
Windows Phone 7 and 8
Windows 8

快速例子

function onSuccess(acceleration) {
    alert('Acceleration X: ' + acceleration.x + '\n' +
          'Acceleration Y: ' + acceleration.y + '\n' +
          'Acceleration Z: ' + acceleration.z + '\n' +
          'Timestamp: '      + acceleration.timestamp + '\n');
};

function onError() {
    alert('onError!');
};

navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);

完整例子

<!DOCTYPE html>
<html>
  <head>
    <title>Acceleration Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // device APIs are available
    //
    function onDeviceReady() {
        navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);
    }

    // onSuccess: Get a snapshot of the current acceleration
    //
    function onSuccess(acceleration) {
        alert('Acceleration X: ' + acceleration.x + '\n' +
              'Acceleration Y: ' + acceleration.y + '\n' +
              'Acceleration Z: ' + acceleration.z + '\n' +
              'Timestamp: '      + acceleration.timestamp + '\n');
    }

    // onError: Failed to get the acceleration
    //
    function onError() {
        alert('onError!');
    }

    </script>
  </head>
  <body>
    <h1>Example</h1>
    <p>getCurrentAcceleration</p>
  </body>
</html>

参数

accelerometerSuccess

提供加速度信息的onSuccess函数

function(acceleration) {
    // Do something
}

参数

acceleration：某一时刻的加速度

例子

function onSuccess(acceleration) {
    alert('Acceleration X: ' + acceleration.x + '\n' +
          'Acceleration Y: ' + acceleration.y + '\n' +
          'Acceleration Z: ' + acceleration.z + '\n' +
          'Timestamp: '      + acceleration.timestamp + '\n');
};