码迷,mamicode.com
首页 > Web开发 > 详细

HTML5晃动DeviceMotionEvent事件

时间:2018-03-20 18:09:28      阅读:1323      评论:0      收藏:0      [点我收藏+]

标签:tail   http   iphone   角度   加速   技术分享   页面   陀螺仪   png   

   昨天,公司叫我做一个特效,就是根据手机晃动的方向,移动页面上的小图案,小图案随着页面方向而动,给我看这个特效时,我的第一反应是利用h5的重力感应,因为之前看过类似的文章,但是对h5重力感应,可以说是没有了解的,于是乎,就度娘了一下。

   关于devicemotion

   html5提供了几个新的DOM事件来获得设备物理方向及运动的信息,包括:陀螺仪、罗盘及加速计。

   第一个DOM事件是**deviceorientation**,其提供设备的物理方向信息,表示为一系列本地坐标系的旋角。
   第二个DOM事件是**devicemotion**,其提供设备的加速信息,表示为定义在设备上的坐标系中的卡尔迪坐标。其还提供了设备在坐标系中的自转速率。
   第三个DOM事件是**compassneedscalibration**,其用于通知Web站点使用罗盘信息校准上述事件。

  说是这么说,什么是陀螺仪,罗盘又是个啥,加速计又是个神马东东

  原理

  开发者从各个内置传感器那里获取未经修改的传感数据,并观测或响应设备各种运动和角度变化。这些传感器包括陀螺仪、加速器和磁力仪(罗盘)。
  加速器和陀螺仪的数据都是描述沿着iOS设备三个方向轴上的位置,对于一个竖屏摆放的iPhone来说,X方向从设备的左边(负)到右边(正),Y方向则是由设备的底部(-)到顶部(+),而Z方向为垂直于屏幕由设备的背面(-)到正面(+)。

 

 技术分享图片

  例子一:图案随着设置移动方向而动

  HTML:

   技术分享图片

 CSS:

   技术分享图片

  JAVASCRIPT:

   技术分享图片

   目前做出的效果就是这样的,如果你觉得哪里有问题或者可以改进,欢迎您的建议

   例子二:摇一摇:实现手机摇动改变背景颜色

   技术分享图片

  这个是简单的探索下摇一摇功能,在看了网上有个模拟微信摇一摇的:

  http://blog.csdn.net/xdd19910505/article/details/50598494

  关于html5晃动的效果就了解到这里,欢迎吐槽!!!

 

  参考 https://segmentfault.com/a/1190000003095883

HTML5晃动DeviceMotionEvent事件

标签:tail   http   iphone   角度   加速   技术分享   页面   陀螺仪   png   

原文地址:https://www.cnblogs.com/cutemantou/p/8610297.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!