关于js陀螺仪的理解分析


Posted in Javascript onApril 11, 2019

检测设备方向

监听 deviceorientation

window.addEventListener("deviceorientation", handleOrientation, true);

event中包含以下几个值

属性 描述
type 事件的类型。
bubbles 事件是否正常起泡
cancelable 该活动是否可以取消?
alpha 设备绕Z轴的当前方向; 也就是说,设备围绕垂直于设备的线旋转多远。
beta 设备围绕X轴的当前方向; 也就是说,设备向前或向后倾斜多远。
gamma 设备绕Y轴的当前方向; 也就是说,设备向左或向右转动多远。
absolute 如果方向是作为设备坐标系和地球坐标系之间的差异提供的,则该值是该值; 如果设备无法检测到地球坐标系,则此值为false。

需要重点关注这四个返回值

  • alpha
  • beta
  • gamma
  • absolute

手机轴线如图:

关于js陀螺仪的理解分析

一、理解alpha

alpha 是设备绕Z轴的方向

它的取值范围在0到360度之间。当设备顶端指向正北方向时,该属性的取值为0。

即:围绕垂直手机屏幕的轴转动

如图:

关于js陀螺仪的理解分析

二、理解beta

beta 是设备绕X轴的方向

它的取值范围在-180到180度之间。当设备与地球表面保持平行时,该属性的取值为0。

即:围绕平行音量键的轴转动

如图:

关于js陀螺仪的理解分析

三、理解gamma

gamma 是设备绕Y轴的方向

它的取值范围在-90到90度之间。当该设备与地球表面保持平行时,该属性的取值为0。

即:围绕平行充电口的轴转动

如图:

关于js陀螺仪的理解分析

四、理解absolute

absolute 是用来判断是否是地球坐标系。

如果当前设备坐标系与地球坐标系相对应,则返回true,

否则返回false;

返回值为true时候,可以进行使用其他坐标系作为基准

总结

  alpha => 围绕垂直手机屏幕的轴转动
  beta  => 围绕平行音量键的轴转动
  gamma => 围绕平行充电口的轴转动

  absolute => 返回是否与地球坐标系相对应

示例代码:

if (window.DeviceOrientationEvent) {
 window.addEventListener("deviceorientation", function(event) {
  // alpha: 围绕垂直手机屏幕的轴转动的旋转角度
  var rotateDegrees = event.alpha;
  // gamma: 围绕平行充电口的轴转动的旋转角度
  var leftToRight = event.gamma;
  // beta: 围绕平行音量键的轴转动的旋转角度
  var frontToBack = event.beta;

  handleOrientationEvent(frontToBack, leftToRight, rotateDegrees);
 }, true);
}

var handleOrientationEvent = function(frontToBack, leftToRight, rotateDegrees) {
 // 弹奏一曲夏威夷吉他
};

对于浏览器兼容性方面 可以在使用时候参照MDN的说明

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript 基础篇4 window对象,DOM
Mar 14 Javascript
浅析用prototype定义自己的方法
Nov 14 Javascript
JavaScript函数作用域链分析
Feb 13 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
Aug 08 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
Jan 22 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
Feb 19 Javascript
原生js实现可拖拽效果
Feb 28 Javascript
Angular2搜索和重置按钮过场动画
May 24 Javascript
AngularJS实现单一页面内设置跳转路由的方法
Jun 28 Javascript
JS实现图片旋转动画效果封装与使用示例
Jul 09 Javascript
vue实现点击隐藏与显示实例分享
Feb 13 Javascript
利用 JavaScript 构建命令行应用
Nov 17 Javascript
angular 表单验证器验证的同时限制输入的实现
Apr 11 #Javascript
angular 实现同步验证器跨字段验证的方法
Apr 11 #Javascript
vue实现新闻展示页的步骤详解
Apr 11 #Javascript
记一次用vue做的活动页的方法步骤
Apr 11 #Javascript
vue数据初始化initState的实例详解
Apr 11 #Javascript
Vue起步(无cli)的啊教程详解
Apr 11 #Javascript
vue+vuex+json-seiver实现数据展示+分页功能
Apr 11 #Javascript
You might like
PHP模板引擎Smarty内建函数section,sectionelse用法详解
2016/04/11 PHP
php将print_r处理后的数据还原为原始数组的解决方法
2016/11/02 PHP
Yii框架参数配置文件params用法实例分析
2019/09/11 PHP
Jquery 滑入滑出效果实现代码
2010/03/27 Javascript
html文本框提示效果的示例代码
2014/06/28 Javascript
Javascript中的五种数据类型详解
2014/12/26 Javascript
JavaScript中检查对象property的存在性方法介绍
2014/12/30 Javascript
ECharts仪表盘实例代码(附源码下载)
2016/02/18 Javascript
jQuery unbind 删除绑定事件详解
2016/05/24 Javascript
jQuery简单实现彩色云标签效果示例
2016/08/01 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
javascript 秒表计时器实现代码
2017/03/09 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
2017/03/25 Javascript
Easyui和zTree两种方式分别实现树形下拉框
2017/08/04 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
2018/01/05 Javascript
微信小程序自定义音乐进度条的实例代码
2018/08/28 Javascript
vue之组件内监控$store中定义变量的变化详解
2019/11/08 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
2020/04/22 Javascript
Python实现的飞速中文网小说下载脚本
2015/04/23 Python
对python中return和print的一些理解
2017/08/18 Python
使用python分析统计自己微信朋友的信息
2019/07/19 Python
CSS3 仿微信聊天小气泡实例代码
2017/04/05 HTML / CSS
使用phonegap播放音频的实现方法
2017/03/31 HTML / CSS
伦敦一家西班牙童装精品店:La Coqueta
2018/02/02 全球购物
澳大利亚女性快速时尚零售商:Ally Fashion
2018/04/25 全球购物
英国最受信任的在线眼镜商之一:Fashion Eyewear
2019/10/31 全球购物
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
公司庆典邀请函范文
2014/01/13 职场文书
2014入党积极分子批评与自我批评思想汇报
2014/09/20 职场文书
2015年维修电工工作总结
2015/04/25 职场文书
喋血孤城观后感
2015/06/08 职场文书
经典祝酒词大全
2015/08/12 职场文书
学校教代会开幕词
2016/03/04 职场文书
Go语言中的UTF-8实现
2021/04/26 Golang
CSS3实现的侧滑菜单
2021/04/27 HTML / CSS
Java获取e.printStackTrace()打印的信息方式
2021/08/07 Java/Android