查看: 782|回复: 3

基于HTML5 DeviceOrientation 实现微信摇一摇功能


16-3-24 15:51:06 | [复制链接]

38

主题

200

帖子

436

积分

牛人

Rank: 3Rank: 3

发表于 16-3-24 13:12:01 | 显示全部楼层 |阅读模式
基于HTML5 DeviceOrientation 实现微信摇一摇功能


  在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态、加速度等数据(另还有deviceOrientation事件提供了设备角度、朝向等信息)。

  而通过DeviceMotion对设备运动状态的判断,则可以帮助我们在网页上就实现“摇一摇”的交互效果。

  运动事件监听

  代码如下:

  if (window.DeviceMotionEvent) {

  window.addEventListener('devicemotion', deviceMotionHandler, false);

  } else {

  alert('你的手机太差了,买个新的吧。');

  }

  获取加速度信息

 “摇一摇”的动作既“一定时间内设备了一定距离”,因此通过监听上一步获取到的x, y, z 值在一定时间范围内的变化率,即可进行设备是否有进行晃动的判断。而为了防止正常移动的误判,需要给该变化率设置一个合适的临界值。

  代码如下:

  function deviceMotionHandler(eventData) {

  var acceleration = eventData.accelerationIncludingGravity;

  var curTime = new Date().getTime();

  if ((curTime - last_update) > 100) {

  var diffTime = curTime - last_update;

  last_update = curTime;

  x = acceleration.x;

  y = acceleration.y;

  z = acceleration.z;

  var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;

  var status = document.getElementById("status");

  if (speed > SHAKE_THRESHOLD) {

  doResult();

  }

  last_x = x;

  last_y = y;

  last_z = z;

  }

  }


1

主题

8

帖子

27

积分

菜鸟

Rank: 1

发表于 16-3-24 15:50:47 | 显示全部楼层
摇一摇

1

主题

8

帖子

27

积分

菜鸟

Rank: 1

发表于 16-3-24 15:50:56 | 显示全部楼层

32

主题

195

帖子

424

积分

牛人

Rank: 3Rank: 3

发表于 16-3-24 15:51:06 | 显示全部楼层
前排!!!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

最新活动

  • 1024程序员节刚过 千锋教育设计学院万圣节海报设计决赛开启

千锋教育公众号

订阅|小黑屋|手机版|千锋教育论坛 ( 京ICP备12003911号-3 )

GMT+8, 20-2-27 16:35 , Processed in 0.314851 second(s), 40 queries .

Powered by Discuz! X3.2

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表