zoukankan      html  css  js  c++  java
  • H5之重力感应篇

    H5之重力感应篇

    手机的重力感应支持里,有两个主要的事件:

    1. OrientationChange (在屏幕发生翻转的时候触发)

    2. DeviceOrientation+DeviceMotion(重力感应与陀螺仪)

    科普时间

    重力感应,基本上是平板电脑和智能手机的标准配置,起到的作用也很简单,比如你玩赛车游戏,控制左右转弯,屏幕横屏和竖屏切换,都需要用到重力感应模块。


    陀螺仪,又叫角速度传感器,用于测量物理量的偏转、倾斜是的动作角速度。可以精确的分析判断出使用者的实际动作,通过他收集的这些动作给手机下达一些指令。

    OrientationChange

    数值 意义
    0 手机竖屏状态
    90 右旋转
    -90 左旋转

    通过OrientationChange可以获知手机的横竖屏状态,让横屏的页面通过这个事件来弹出告知用户横屏的提示。当然,当用户锁定了屏幕旋转功能,就没办法触发了(心塞)。

    DeviceOrientation && DeviceMotion

    事件 意功能
    DeviceOrientation 移动的角度
    DeviceMotion 移动的加速度信息

    如表格所知,我们可以通过重力感应得知用户手机移动的角度。


    基于此,我们可以通过判断用户的设备移动角度实现视觉的错层移动效果,这是一个隐藏的交互形式,悄悄地丰富了页面的效果,也让页面的元素有更好的设计感。

    如果想快速实现这个效果,这里给前端推荐一个开源的组件Parallax.JS

    http://matthew.wagerfield.com/parallax/

    除了移动的错层,我们也可以用手机移动的方向去制作游戏,比如控制车辆移动的方向等。 除了移动角度的获知以外,有陀螺仪的设备,我们还可以利用DeviceMotion获知手机移动加速度,从而模拟出类似摇一摇的功能。

    页面结合摇一摇的交互,把需要揭晓的内容神秘地包装了起来,很好地引起用户的好奇心以及产品的悬念感(这里要对没有陀螺仪的设备进行判断,把交互形式由摇一摇改成滑动屏幕)

    小结

    目前越来越多的设备自带陀螺仪,未来相信还会得到更多的设备支持,出现更多的结合重力感应的创意专题。


    还是老规矩,看几类运用了重力感应的H5

    1转动手机代替鼠标拖拽

    一套理想家居的自我修养


    我们平常见到的页面之间的切换多是下滑,上拉,左右滑,而这个H5的创意之处在于,用户要通过左右倾斜手机来切换不同的场景。在用户左右倾斜手机过程中,主要有四个场景会呈现出来,分别是:区位,园林,配套和户型。这就是一个典型的通过获知用户手机移动的角度来控制视野的案例

    2纠正手机平衡

    三步帮你摆脱朋友圈


    这是大众点评的一个拯救网瘾青年的案例,在技术实现上也用了重力感应,你必须把手机放在水平的桌子上,否则游戏没法进行下去,在60秒内,如果你触碰了手机屏幕,屏幕也会结束。所以你只好等60秒过去,静静得享受60秒没有手机的时间

    3重力感应游戏

    拯救自在橙


    在这个H5中,主要想宣传的核心点是罕见的6安全气囊,所以在这个小游戏中,设计者利用H5的陀螺仪技术,以橙子和安全气囊为游戏元素实现互动,橙子出现后利用重力感应左右晃动手机,橙子便向相应的方向运动,碰到安全气囊会弹起,连续碰到几个安全气囊将橙子送出顶部就算成功。

    赛车游戏同样也可使用重力感应技术

  • 相关阅读:
    instruments 内存泄漏
    ios常用数学函数
    正则表达式
    view设置成圆角
    关于新浪微博注销后自动登录的问题
    根据视频地址获取某一帧的图像
    使用DES加解密
    实现通讯录的查询与删除
    iOS 动画效果
    iOS 文字下划线
  • 原文地址:https://www.cnblogs.com/susanws/p/5506166.html
Copyright © 2011-2022 走看看