js微信摇一摇功能以及api
一、摇一摇功能
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><p>inde.html访问成功</p><div id="status" style="font-size: 60px;color: red;"></div><script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script><script type="text/javascript">window.onload = function(){//运动事件监听if (window.DeviceMotionEvent) {window.addEventListener('devicemotion',deviceMotionHandler,false);}else{alert('您的手机不支持摇一摇功能!');}//获取加速度信息//通过监听上一步获取到的x, y, z 值在一定时间范围内的变化率,进行设备是否有进行晃动的判断。//而为了防止正常移动的误判,需要给该变化率设置一个合适的临界值。var SHAKE_THRESHOLD = 8000; //阈值越大,触发摇晃事件时手机摇晃的程度越剧烈var last_update = 0;var x, y, z, last_x = 0, last_y = 0, last_z = 0;function deviceMotionHandler(eventData) {var acceleration =eventData.accelerationIncludingGravity;var curTime = new Date().getTime();if ((curTime-last_update)> 10) {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;if (speed > SHAKE_THRESHOLD && stop) {//dosomething}last_x = x;last_y = y;last_z = z;}}}</script>
</body>
</html>
二、加速传感器API
本文档旨在通过介绍HTML5 DeviceOrientation 和DeviceMotion两个接口的使用,来实现某些场景应用,如
摇一摇功能(DeviceMotion)
重力感应方向控制(DeviceOrientation)
关于DeviceOrientation和DeviceMotion两个接口的详细说明,参考了:http://w3c.github.io/deviceorientation/spec-source-orientation.html
本文的中实现的用例仅用来测试,在生产环境中应用需要修改其中的参数或者重新编程。
- 摇一摇
摇一摇功能是很多原生APP都可以实现的功能,如微信中的摇一摇找好友,QQ音乐中的摇一摇换歌等。它们都是利用了手机加速传感器提供的API,当监听到手机加速变化的事件时,根据获取的加速值来执行不同的动作。
接口说明
在Web APP中HTML5 也提供了类似的接口,就是DeviceMotionEvent。DeviceMotion封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据。
DeviceMotionEvent对象属性列表:
属性 释义
event.accelaration x(y,z):设备在x(y,z)方向上的移动加速度值
event.accelarationIncludingGravity x(y,z):考虑了重力加速度后设备在x(y,z)方向上的移动加速度值
event.rotationRate alpha,beta,gamma:设备绕x,y,z轴旋转的角度
event.accelarationIncludingGravity与event.accelaration的区别在于前者加入了重力加速度,即在z轴方向加了9.8,在x,y方向上的值两者相同。
旋转速度rotationRate:alpha、beta、gamma的概念与DeviceOrientationEvent一致。
区别在于:
DeviceOrientationEvent的值是相对于初始状态的差值,只要设备方向不变,怎么动都不会影响数值;
DeviceMotionEvent是相对于之前的某个瞬间值的差值时间比,即变化的速度,一旦设备静止则会恢复为0。
实现方法
Shake对象设计
属性 值
SHAKE_THRESHOLD 阈值。阈值越大,触发摇晃事件时手机摇晃的程度越剧烈
x x方向的加速值
y y方向的加速值
z z方向的加速值
deviceMotionHandler 摇晃事件处理程序
方法 作用
init 初始化Shake对象
参数 值
threshold 自定义阈值,默认2000
callback 摇晃后的回调函数
示例
function Shake(threshold,callback){ this.SHAKE_THRESHOLD = threshold ? threshold : 2000; //定义阈值 this.last_update = 0; this.x = this.y = this.z = this.last_x = this.last_y = this.last_z = 0; this.init = function(){ if (window.DeviceMotionEvent) { window.addEventListener('devicemotion', this.deviceMotionHandler, false); } else { alert('您的浏览器不支持DeviceMotion'); } }; var that = this; this.deviceMotionHandler = function(eventData) { var acceleration = eventData.accelerationIncludingGravity; var curTime = new Date().getTime(); if ((curTime - that.last_update) > 100) { var diffTime = curTime - that.last_update; that.last_update = curTime; that.x = acceleration.x; that.y = acceleration.y; that.z = acceleration.z; var speed = Math.abs(that.x + that.y + that.z - that.last_x - that.last_y - that.last_z) / diffTime * 10000; if (speed > that.SHAKE_THRESHOLD) { if(window.console && console.log){ console.log("shaked"); } if(callback != undefined){ callback(that); } } that.last_x = that.x; that.last_y = that.y; that.last_z = that.z; } } };
使用方法
手机摇一摇测试
当手机摇晃页面时,会弹出shaked的提示,并且在页面上显示摇晃时的x,y,z方向的加速度值。
扩展应用
给Shake对象的callback参数可以实现不同的摇晃目的,如抽奖。需要在callback函数中调用抽奖系统的接口。
示例
function shakeCallback(){
var odata = {name:”drawprize”,act_id : 0000};
HBAPP.Activity.register(odata,function(json){
if(json.error == 0){
if(json.result.draw){
//中奖信息
//……
}
}
});
}
2. 重力感应
重力感应也是原生APP中经常见到的一个功能,在Web App中的应用多见于判断屏幕的旋转方向,以及在此基础上实现的场景应用,如控制页面上物体的左右移动,加减速等。
在Web App中实现以上的功能,需要实时获取屏幕的旋转方向参数,这些参数可以从浏览器的利用HTML5的DeviceOrientation API获得。
接口说明
当浏览器的Orientation发生变化时,触发DeviceOrientation事件,并返回一个DeviceOrientationEvent对象,其属性列表如下:
属性 释义
alpha 设备指示的方向,根据指南针的设定情况而定
beta 设备绕x轴旋转的角度
gamma 设备绕y轴旋转的角度
注:不同版本的手机操作系统和浏览器,以及不同的应用程序中内置的浏览器对deviceorientation事件的支持不尽相同。尤其在Android平台上,可能会出现有的设备正常工作,有的则毫无反应的情况。
工作原理
根据event对象的三个方向的参数来确定设备的旋转角度。其中,alpha的取值范围是0-360,这个需要根据设备的指南针设定情况而定,一般来说,设备指向正北方向时为0.beta值为设备绕x轴旋转的角度,取值范围为-180-180。gamma取值范围-90-90.
这里面alpha值的意义并不大,主要参考beta和gamma值。
当屏幕从水平沿y轴向左倾斜时gamma值变为负值,向右倾斜变为正值。
档屏幕从水平沿x轴向前倾斜时beta值变为正值,向后倾斜时变为负值。
所以,如果我们设定一个阈值,当beta和gamma的绝对值大于这个阈值时,我们就认为设备发生了旋转。另外根据beta和gamma的值来判断向左倾斜还是向右倾斜,以及倾斜的程度。
实现方式和示例
首先是为浏览器绑定deviceorientation事件和处理程序。
//add deviceorientation event listener
if(window.DeviceOrientationEvent){
window.addEventListener(‘deviceorientation’,DeviceOrientationHandler,false);
}else{
alert(“您的浏览器不支持DeviceOrientation”);
}
然后在事件处理程序中处理相应的动作
function DeviceOrientationHandler(event){
var alpha = event.alpha,
beta = event.beta,
gamma = event.gamma;
if(alpha != null || beta != null || gamma != null){dataContainerOrientation.innerHTML = "alpha:" + alpha + "<br />beta:" + beta + "<br />gamma:" + gamma;//判断屏幕方向var html = "";if( Math.abs(gamma) < GAMMA_MIN && Math.abs(beta) > BETA_MAX ){html = "屏幕方向:Portrait";}if( Math.abs(beta) < BETA_MIN && Math.abs(gamma) > GAMMA_MAX ){html = "屏幕方向:Landscape";}var gamma_html = "";if( gamma > 0 ){gamma_html = "向右倾斜";}else{gamma_html = "向左倾斜";}html += "<br />"+gamma_htmlstage.innerHTML = html;}else{dataContainerOrientation.innerHTML = "当前浏览器不支持DeviceOrientation";}
}
这个示例中展示了如何利用beta和gamma值来展示屏幕的旋转方向和侧翻方向。要实现更精确的物体判断,还需要复杂的算法来计算。
扩展应用
使用DeviceOrientation API接口可以实现在web中获取手机设备的屏幕旋转方向参数,在示例的基础上进行改进,可以扩展到在屏幕上控制页面元素的移动,实现动画或游戏的目的。例如通过调整屏幕的方向控制页面上的小球走迷宫,控制小车的移动躲避障碍等。
API出处:
作者:codemarker
链接:http://www.jianshu.com/p/5769075e9885
摇一摇功能出处:http://www.cnblogs.com/shizq/p/5611171.html
js微信摇一摇功能以及api相关推荐
- Vue - 实现微信扫码登录功能(项目植入微信扫码登录功能)超详细完整流程详解及详细代码及注释,附带完整功能源码、常见问题解决方案
前言 如果您需要 Nuxt.js 版本的教程,请访问 Nuxt.js - 微信扫码登录功能. 网上的大部分教程都太乱且没有任何注释和解释,对于新手而言简直是根本无从下手, 本文将站在新手小白的角度,从 ...
- Nuxt - 实现微信扫码登录功能(SSR 服务端渲染项目植入微信扫码登录功能)超详细完整流程详解及详细代码及注释,附带完整功能源码、常见问题解决方案
前言 如果您需要 Vue.js 版本的教程,请访问 Vue.js - 微信扫码登录功能. 网上的大部分教程都太乱且没有任何注释和解释,对于新手而言简直是根本无从下手, 本文将站在新手小白的角度,从 0 ...
- js 侦听手机摇动事件,模仿微信摇一摇功能
? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 ...
- html5微信摇一摇api,摇一摇关注JSAPI
出自微信公众平台开发者文档 跳转到: 导航, 搜索 摇一摇关注JS API 摇一摇关注JS API目的是为已开通微信摇一摇周边,且有一定开发能力的商户提供摇一摇关注能力.商户可以在摇出来的页面直接调用 ...
- C#开发微信门户及应用(28)--微信“摇一摇·周边”功能的使用和接口的实现
C#开发微信门户及应用(28)--微信"摇一摇·周边"功能的使用和接口的实现 原文:C#开发微信门户及应用(28)--微信"摇一摇·周边"功能的使用和接口的实现 ...
- 微信摇一摇开发 php,微信公众号实现摇一摇周边功能开发代码
这篇文章主要介绍了微信公众号 摇一摇周边功能开发的相关资料,需要的朋友可以参考下 ①申请开通摇一摇功能 申请开通摇一摇周边功能.成功提交申请请求后,工作人员会在三个工作日内完成审核.若审核不通过,可以 ...
- php微信摇一摇,怎样使用JS+H5实现微信摇一摇
这次给大家带来怎样使用JS+H5实现微信摇一摇,使用JS+H5实现微信摇一摇的注意事项有哪些,下面就是实战案例,一起来看一下. 项目终于如约上线,但是在春节前又有一个新的活动要做,类似微信的摇一摇活动 ...
- android摇一摇功能音效与振动附加微信音效大全下载
检测手机摇动通过实现SensorEventListener接口实现 振动通过Vibrator实现 音效通过SoundPool实现 微信各种音效文件下载:微信音效大全 public class Main ...
- 微信小程序使用加速计实现摇一摇功能(一)
2019独角兽企业重金招聘Python工程师标准>>> 微信小程序硬件接口提供了加速计使用. 用于计算手机的偏移距离. 注:接口提供的比较简单,更多需要自己处理. 1.开启:wx.s ...
最新文章
- jQuery学习笔记——jQuery选择器详解种类与方法
- 移动互联网,安全厂商新战场
- USB-Flash MX-程序员2004合订本
- Android 中文 API (19) —— TwoLineListItem
- PKU 学生反馈 2009 - 4
- CSS深入理解学习笔记之vertical-align
- (转)Managed DirectX +C# 开发(入门篇)(七)
- bzoj 4883 [Lydsy1705月赛]棋盘上的守卫——并查集(思路!)
- 如何用Excel制作甘特图?专业教程教你快速解决问题
- IE8升级IE11失败原因整理
- macOS Monterey 2K 屏开 HiDPI
- 1-7 Burpsuite 爬虫介绍
- 计算机和工业设计哪个就业前景大,工业设计就业前景女生
- threejs 特效,自定义发光墙体,贴图动画版本。发光围栏。
- 看完这篇招聘方法论,90%CEO会心痛
- 嵌入式是什么 ?为什么要学好嵌入式呢?
- 一个博弈游戏,据说智商130才看的懂
- 谷歌浏览器的页面保存为图片
- Ubuntu22.04 美化
- CCNA 考试心得总结
热门文章
- 模拟LED屏幕文字滚动开发和悬浮
- meep php,PHP在TIDB上遇到的坑
- 你还在手写sql吗? MyBatis 逆向工程使用 使用逆向工程生成实体类,超级好用的生成实体类与mapper
- 经典排序算法之快速排序(二分法排序)
- 10天学会ASP打包下载
- 全面详解Android实现多线程的几种方式(史上最全,最详细)
- 浅析webmatrix建站
- 1053 Path of Equal Weight (30分)
- bios 传统测试软件性能,设置主板BIOS上的CPU部分及性能测试_技嘉 GA-G1.Sniper B5_主板评测-中关村在线...
- 2023年最新Kali安装教程(超详细,手把手教你下载安装kali虚拟机)