摇钱树效果

Posted 2020-10-20 盖大楼

$(function(){
    $(‘.t_back‘).click(function() {
        window.history.back();
    });
//    陀螺仪相关的变量
    var tl_flage=true;
//    重力感应器相关定义的变量
    var chaTime=5;
    var endTime,startTime,alpha,beta,gamma,delA,delB,delG,lastAcc;
    var zl_flage=true;
    //html5摇动API
    
    if(window.DeviceMotionEvent) {
        var SHAKE_THRESHOLD = 1200;
        var last_update = 0;
        var x, y, z, last_x, last_y, last_z;
        
        function deviceMotionHandler(eventData) {
            var acceleration = eventData.accelerationIncludingGravity;
            var curTime = new Date().getTime();
            if((curTime - last_update) > 300) {
                var diffTime = curTime - last_update;
                last_update = curTime;
                x = acceleration.x;
                y = acceleration.y;
                z = acceleration.z;
                var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;
                $(‘.p2‘).html(speed);
                if(speed > SHAKE_THRESHOLD) {
                    if(tl_flage) {
                        $(‘.jl_box‘).fadeIn();
                        tl_flage = false;
                    }
                }
                last_x = x;
                last_y = y;
                last_z = z;
            }
        }; 
        window.addEventListener(‘devicemotion‘, deviceMotionHandler, false);
    }else if(window.DeviceOrientationEvent){
    //    重力感应api
        window.addEventListener(‘deviceorientation‘,function(e){
//            开始的时间
            startTime=new Date();
            if(!lastAcc) {
                lastAcc = e;
                delA = parseInt( Math.abs(180-Math.abs(e.alpha) ) );
                delB = parseInt( Math.abs(90-Math.abs(e.beta) ) );
                delG = parseInt( Math.abs(90-Math.abs(e.gamma) ) );
            }else{
        //        设备指示的方向
                alpha = e.alpha,
        //      设备绕x轴旋转的角度
                beta = e.beta,
        //         设备绕y轴旋转的角度
                gamma = e.gamma;
                delA = parseInt( Math.abs( Math.abs(180-Math.abs(e.alpha)) - Math.abs(180-Math.abs(lastAcc.alpha)) ) );
                delB = parseInt( Math.abs( Math.abs(90-Math.abs(e.beta)) - Math.abs(90-Math.abs(lastAcc.beta)) ) );
                delG = parseInt( Math.abs( Math.abs(90-Math.abs(e.gamma)) - Math.abs(90-Math.abs(lastAcc.gamma)) ) );
            };
//            摇动时间差小于3可以触发
            if(chaTime<3){
                if( (delA > 15 && delB > 15) || (delA > 15 && delG > 15) || (delB > 15 || delG > 15) ) {
                    if(zl_flage){
                        $(‘.jl_box‘).fadeIn();
                        zl_flage=false;
                    };
                };
            };
            lastAcc = e;
//            结束的时间
            endTime=new Date();
//            快速摇动才可以触发的时间差值；
            chaTime=endTime-startTime;
        });
    }else{
        alert("您的浏览器不支持陀螺仪和重力感应器");
    };

    $(‘.jl_box_con_btn‘).bind(‘click‘,function(){
        $(‘.jl_box‘).fadeOut();
        tl_flage=true;
        zl_flage=true;
    });
})

1、orientation是重力感应api，获得的值与角度有关。

alpha是手机放在桌子上转。表示设备沿z轴上的旋转角度，范围为0~360。

beta是表示设备在x轴上的旋转角度，范围为-180~180。它描述的是设备由前向后旋转的情况。

gamma表示设备在y轴上的旋转角度，范围为-90~90。它描述的是设备由左向右旋转的情况。

2、devicemotion是陀螺仪api，手机有陀螺仪才能用这个。

• x: 西向东，x轴的位置变化。
• y: 南向北，y轴的位置变化。
• z: 垂直地面，z轴的位置变化。