Html5技术交流 加入小组

8个成员 5个话题 创建时间:2015-12-31

html5实现摇一摇并震动

发表于2017-06-09 560次查看

html5能够实现类似微信的手机摇一摇功能并震动,效果如下图所示:

html5实现摇一摇并震动

1、  deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度、方位、朝向等。

2、  deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据。

代码如下:

<!--记住引用jQuery.js-->
<script> var speed = 10; //定义摇一摇加速度的临界值 值越小摇动的力度越小
var x = y = z = lastX = lastY = lastZ = 0; //初始化x,y,z上加速度的默认值
var isHaveShaked = false;//用于记录是否在动画执行中
function init() { 
//判断系统是否支持html5摇一摇的相关属性
    if (window.DeviceMotionEvent) {
        window.addEventListener('devicemotion', deviceMotionHandler, false);
    } else {
        alert('not support mobile event');
    }
}
function deviceMotionHandler() {
    /*获取x,y,z方向的即时加速度*/
    var acceleration = event.accelerationIncludingGravity;
    x = acceleration.x;
    y = acceleration.y;
    z = acceleration.z;
    if (Math.abs(x - lastX) > speed || Math.abs(y - lastY) > speed
        || Math.abs(z - lastZ) > speed) {
        //摇一摇实际场景就是加速度的瞬间暴增爆减
        if (!isHaveShaked) {
            alert(x);   //自己测试各坐标的值。。
            alert(y)
            alert(z);
            //手机震动1秒
            if (navigator.vibrate) {
                navigator.vibrate(1000);//震动1000毫秒
            } else if (navigator.webkitVibrate) {
                navigator.webkitVibrate(1000);
            }
            //模拟网络请求做想干的事
            isHaveShaked = true;
            setTimeout(function () {
                isHaveShaked = false;
                //.....                    
            }, 2000);
        }
    }
    /*保存历史加速度*/
    lastX = x;
    lastY = y;
    lastZ = z;
}
$(function () {
    init();
});


</script>

赶快动手操作一下吧,看起来挺酷炫的。

我学院网推荐大家学习html5教程:10分钟轻松制作HTML5交互动画

发表回复
你还没有登录,请先 登录或 注册!