如何在小程序中使用加速度计

在小程序日常开发中,我们可能会遇到需要通过旋转手机等方式来触发某种事件,为此,就需要调用手机当中的加速度计来为我们获取手机的当前状态了。加速度计的原理很简单,现在手机里面基本配备的都是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)
    })
  }
})

然后点击真机调试按钮,扫描二维码后晃动手机,你可能会在电脑端看到类似下面的内容。

1543304315308

这里的数值,就是我们调用小程序的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
      })
    })
  }
})

现在重新编译下,你就可以在小程序端查看到当前手机的加速度状态了。

1543305449064

通过上面的数据,经过推算,我们可以得到这么一张图,通过这些数据,我们就可以得到当前手机的状态了。

iphone

除了监听加速度数据事件wx.onAccelerometerChangeAPI,微信官方还提供了wx.startAccelerometerwx.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

监听加速度数据回调函数的执行频率,合法值为game\ui\normal,game适用于游戏回调频率,20ms/次。ui适用于UI回调频率,60ms/次。normal为普通回调频率,200ms/次。

success

function

接口调用成功的回调函数

fail

function

接口调用失败的回调函数

complete

function

接口调用结束的回调函数(调用成功、失败都会执行)

这里我们仅仅设置了了当前的回调频率,设置为ui,也就是60ms更新一次。大家可以按照自己的需求更改。

然后我们在前端通过button按钮去调用startAccelerometer函数和stopAccelerometer去开启关闭加速度计。

1543313051416

加速度计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()
      })
    });
  }
})

现在,左右晃动手机,你会发现图中的猫咪沿着你晃动手机的方向旋转。

1543390270934

讲讲代码的原理吧,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的效果,如图。

1543391485594

我们将手机的变量返回给了动画参数,从而实现图片随手机状态变化而变化。我们甚至可以实现旋转手机的时候图片不旋转。

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 进行核心业务开发,实现快速上线和迭代。欢迎免费使用!

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏weixuqin 的专栏

利用 pyspider 框架抓取猫途鹰酒店信息

4817
来自专栏司想君

React编程思想

能够按照构建的方式来思考web app的实现,是React众多优点之一。在这篇文章中,我们将引导你进行使用React构建可搜索产品数据表的思考过程。

5155
来自专栏互联网杂技

Angular 1 vs. Angular 2 深度比较

AngularJS 2 尽管还在Alpha阶段,但主要功能和文档已经发布。让我我们了解下Angular 1 和 2 的区别,以及新的设计目标将如何实现。 Ang...

33810
来自专栏司想君

React编程思想

在我们团队看来,React是使用JavaScript构建大型、快速的Web apps的首选方式。它已经在Facebook和Instagram项目中,表现出了非常...

4079
来自专栏图像识别与深度学习

2018-04-30项目遇到的问题及处理方法

1714
来自专栏web前端教室

本周先行者课程--多级下拉菜单回顾

各位同学们大家好,又到周末了。这个周末咱们开始讲新的前端组件,多级下拉菜单。这个东西我们以前讲过一次,但因为感觉之前讲的有些不太充分,还是把它再拿出来讲一下。 ...

2448
来自专栏理论坞

那些你不知道的Photoshop冷知识④——不安分的Adobe

本来已经打算将 第三期 作为这一系列的完结篇的~但我发现Adobe在这次更新变更了我常用的功能键使用方式(后文详述),于是我查看了PS的更新日志,发现这几次更新...

1183
来自专栏移动开发之家

从Android到React Native开发(一、入门)

 大家好┏ (^ω^)=,许久不见,一不小心断更就成为了一种习惯,因为最近掉React Native的坑里,无法自拔啊~(╯‵□′)╯︵┻━┻。

972
来自专栏互联网杂技

react+redux+webpack教程4

接着上回新闻搜索的例子。现在我们要通过路由进入一个新的页面来查看新闻详细内容。 react和路由并没有什么直接关系,用什么路由都可以。不过使用react-rou...

36310
来自专栏程序员的诗和远方

React Native 实现二维码扫描

最近刚好在学习 React Native 想搞个扫描条形码,二维码的小应用,因为涉及硬件接口,而且自己本身并没有原生开发背景,踩了几个坑,记录一下。 扫描...

5468

扫码关注云+社区