如何在小程序中使用加速度计
原创
在小程序日常开发中，我们可能会遇到需要通过旋转手机等方式来触发某种事件，为此，就需要调用手机当中的加速度计来为我们获取手机的当前状态了。加速度计的原理很简单，现在手机里面基本配备的都是3维线传感器，也就是说，用来测量x，y，z三个轴上的加速力。加速力就是当物体在加速过程中作用在物体上的力，就好比地球引力，也就是重力。
还好，小程序提供了wx.onAccelerometerChange接口来帮我们解决这些问题，本教程将为大家介绍wx.onAccelerometerChange在小程序中的基本使用，并通过若干demo做简单的实验。
在教程开始之前，需要搭建搭建好小程序的基础开发环境，关于如何配置，大家可以参考如何入门小程序开发这篇文章的入门教程。
加速度计API调用
调用API很简单，在开始使用之前，我们直接上代码吧。打开你的index.js文件，然后写下下面的代码。
Page({
onShow: function () {
wx.onAccelerometerChange(function (res) {
console.log(res.x)
console.log(res.y)
console.log(res.z)
})
}
})然后点击真机调试按钮，扫描二维码后晃动手机，你可能会在电脑端看到类似下面的内容。
这里的数值，就是我们调用小程序的wx.onAccelerometerChange接口，然后通过console.log在控制台打印出来当前的手机的加速度计状态。但是这里数据太乱了，我们根本无法得知那个是x，y，z三个轴上的加速力。优化下代码，我们将数据传输到前端看看。打开index.wxml文件，写下下面的代码。
<view>加速度计</view>
<view>x:{{x}}</view>
<view>y:{{y}}</view>
<view>z:{{z}}</view>然后打开index.js文件，将代码修改如下。
Page({
onShow: function () {
var myThis = this;
wx.onAccelerometerChange(function (res) {
myThis.setData({
x: res.x,
y: res.y,
z: res.z
})
})
}
})现在重新编译下，你就可以在小程序端查看到当前手机的加速度状态了。
通过上面的数据，经过推算，我们可以得到这么一张图，通过这些数据，我们就可以得到当前手机的状态了。
除了监听加速度数据事件wx.onAccelerometerChangeAPI，微信官方还提供了wx.startAccelerometer和wx.stopAccelerometer来开始或停止当前小程序的加速度计的监控。我们可以通过这两个API，来实现基本的加速度计的控制。修改index.js代码如下。
Page({
startAccelerometer(){
wx.startAccelerometer({
interval: 'ui'
})
},
stopAccelerometer() {
wx.stopAccelerometer()
},
onShow: function () {
var myThis = this;
wx.onAccelerometerChange(function (res) {
myThis.setData({
x: res.x,
y: res.y,
z: res.z
})
})
}
})然后修改index.wxml文件代码如下
<view>加速度计</view>
<view>x:{{x}}</view>
<view>y:{{y}}</view>
<view>z:{{z}}</view>
<button type="primary" bindtap="startAccelerometer">打开加速度监听</button>
<button type="primary" bindtap="stopAccelerometer">关闭加速度监听</button>这里我们调用了wx.startAccelerometer()和wx.stopAccelerometer()两个API，我们先看看wx.startAccelerometer()的官方文档。
属性 | 类型 | 必填 | 说明 |
|---|---|---|---|
interval | string | 否 | 监听加速度数据回调函数的执行频率，合法值为 |
success | function | 否 | 接口调用成功的回调函数 |
fail | function | 否 | 接口调用失败的回调函数 |
complete | function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
这里我们仅仅设置了了当前的回调频率，设置为ui，也就是60ms更新一次。大家可以按照自己的需求更改。
然后我们在前端通过button按钮去调用startAccelerometer函数和stopAccelerometer去开启关闭加速度计。
加速度计3D相册demo
那么，有了这些数据，可以做到那些高阶玩法呢？我们可以使用小程序来做一个3D相册。
为了让小程序内的图片动起来，我们需要调用小程序的动画接口wx.createAnimation。然后使用该函数的.rotate3d等方法让小程序内的图片旋转起来。首先，插入一张图片，然后设置动画参数，打开index.wxml，写下下面的代码。
<image animation="{{animation}}" src='https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/230px-Cat03.jpg'></image>我们需要在后端调用动画，所以还需要编写后端代码，打开index.js文件，写下下面的代码。
var x = 0
Page({
data: {
animationData: 0
},
onShow: function () {
var myThis = this;
wx.onAccelerometerChange(function (res) {
x = res.x * 180
this.animation = wx.createAnimation()
this.animation.rotate(x).step()
myThis.setData({
animation: this.animation.export()
})
});
}
})现在，左右晃动手机，你会发现图中的猫咪沿着你晃动手机的方向旋转。
讲讲代码的原理吧，index.wxml文件中，我们定义了猫咪的图片，并设置了animation属性，该属性的参数需要通过后端返回的数据获取。
index.js文件中，我们将调用onAccelerometerChange的接口，然后获取加速度计返回值X，因为返回值为小数，为了将图片旋转度数变大，将这个值乘以180。然后通过animation接口去设置旋转动画。但是这里仅仅是2D画面，怎么设置3D的相册呢？我们引入另外的变量Y，Z，修改index.js文件。
var x = 0
var y = 0
var z = 0
Page({
data: {
animationData: 0
},
onShow: function () {
var myThis = this;
wx.onAccelerometerChange(function (res) {
x = res.x * 180
y = res.y * 180
z = res.z * 180
console.log(x,y,z)
this.animation = wx.createAnimation()
this.animation.rotate3d(x,y,z,180).step()
myThis.setData({
animation: this.animation.export()
})
});
}
})这里我们引入了x,y,z三个变量，从而实现使小程序中的图片变为3D的效果，如图。
我们将手机的变量返回给了动画参数，从而实现图片随手机状态变化而变化。我们甚至可以实现旋转手机的时候图片不旋转。
var xy = 0
Page({
data: {
animationData: 0
},
onShow: function () {
var myThis = this;
wx.onAccelerometerChange(function (res) {
if(res.y < 0){
xy = res.x * -90
}
if(res.y > 0){
xy = res.y * 180
}
this.animation = wx.createAnimation()
this.animation.rotate(xy).step()
myThis.setData({
animation: this.animation.export()
})
});
}
})但是这样的方式不够完美，如果要实现较为流畅的图片旋转，我们就需要引入陀螺仪使用的角速度概念，关于陀螺仪的介绍，我们将放在后面的文章做介绍。
总结
现在学会加速度计的使用了吗？后续我将会对其他组件做详细的介绍。喜欢的小伙伴请持续关注本专栏。腾讯云联合小程序给大家带来了小程序·云开发解决方案，为开发者提供完整的云端支持，弱化后端和运维操作，使用平台原生 API 进行核心业务开发，实现快速上线和迭代。欢迎免费使用！
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。