IT入门 > 图文教程 > 手机/webApp >

IT入门 > 图文教程 > 手机/webApp >

WebApp - HTML5重力感应事件实现摇一摇功能

  你会看到这个提示,那是因为你的系统无法识别某栏目的模型信息,或者你新建模型后,没为这个模型设计单独的模板。不同模型的文档浏览页的模板为:article_模型名字标识.htm 如“article_article.htm”,更多的信息你可以在频道模型管理的地方查看。
文件类型 内容:
模板调用标记:
语言 内容:
模板调用标记:
软件类型 内容:
模板调用标记:
授权方式 内容:
模板调用标记:
操作系统 内容:
模板调用标记:
软件等级 内容:
模板调用标记:
3
官方网址 内容:
模板调用标记:
演示网址 内容:
模板调用标记:
软件大小课程时长 内容:
模板调用标记:
下载资料 内容:
模板调用标记:
详细介绍 内容:
模板调用标记:

注:小编是一个有轻微处女座情节的人,所以很多内容为了方便阅读和格式美观,我都做成了图片,上传后头条都压缩了图片质量,但是不影响大家阅读,因为可以点击放大,哇哈哈!

前言

今天主要介绍一下html5重力感应事件之DeviceMotionEvent,关于文档请看:

http://w3c.github.io/deviceorientation/spec-source-orientation.html

事件介绍

1、deviceorientation 提供设备的物理方向信息,表示为一系列本地坐标系的旋角。

2、devicemotion 提供设备的加速信息,表示为定义在设备上的坐标系中的卡尔迪坐标。其还提供了设备在坐标系中的自转速率。若可行的话,事件应该提供设备重心处的加速信息。

3、compassneedscalibration 用于通知Web站点使用罗盘信息校准上述事件。

用法简介

注册一个deviceorientation事件的接收器:

WebApp - HTML5重力感应事件实现摇一摇功能

将设备放置在水平表面,屏幕顶端指向西方,则其方向信息如下:

WebApp - HTML5重力感应事件实现摇一摇功能

为了获得罗盘指向,可以简单的使用360度减去alpha。若设被平行于水平表面,其罗盘指向为(360 - alpha)。 若用户手持设备,屏幕处于一个垂直平面且屏幕顶端指向上方。beta的值为90,alpha和gamma无关。 用户手持设备,面向alpha角度,屏幕处于一个垂直屏幕,屏幕顶端指向右方,则其方向信息如下:

WebApp - HTML5重力感应事件实现摇一摇功能

只用自定义界面通知用户校准罗盘:

WebApp - HTML5重力感应事件实现摇一摇功能

注册一个devicemotion时间的接收器:

WebApp - HTML5重力感应事件实现摇一摇功能将设备放置在水平表面,屏幕向上,acceleration为零,则其accelerationIncludingGravity信息如下:

WebApp - HTML5重力感应事件实现摇一摇功能

设备做自由落体,屏幕水平向上,accelerationIncludingGravity为零,则其acceleration信息如下:

WebApp - HTML5重力感应事件实现摇一摇功能将设备安置于车辆至上,屏幕处于一个垂直平面,顶端向上,面向车辆后部。车辆行驶速度为v,向右侧进行半径为r的转弯。设备记录acceleration和accelerationIncludingGravity在位置x处的情况,同时设备还会记录rotationRate.gamma的负值:

WebApp - HTML5重力感应事件实现摇一摇功能

应用案例(手机摇一摇)

WebApp - HTML5重力感应事件实现摇一摇功能

实测截图:


WebApp - HTML5重力感应事件实现摇一摇功能感谢观看。

下载级别 内容:
模板调用标记:
0
需要金币 内容:
模板调用标记:
0
课程难度 内容:
模板调用标记:
0,1,2,3
(责任编辑:zengmumu)
    广告位API接口通信错误,查看德得广告获取帮助