HTML5 - H5陀螺仪操作 & 多指操作与兼容 - 《网易微专业学习笔记》

事件： devicemotion

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>
        <p id="p1"></p>
        <p id="p2"></p>
        <p id="p3"></p>
    </div>
</body>
<script>
    function $my(id) {
        return document.getElementById(id);
    }
    var p1 = $my('p1');
    var p2 = $my('p2');
    var p3 = $my('p3');
    // 整个窗口的重力感应时间，此事件只能窗口调
    window.addEventListener('devicemotion', (e)=>{
        console.log(e);
        var motion = e.accelerationIncludingGravity;
        var x = Math.round(motion.x);
        var y = Math.round(motion.y);
        var z = Math.round(motion.z);
        if (!getAdr()) {
            x = -x;
            y = -y;
            z = -z;
        }
        p1.innerHTML = 'x: ' + x;
        p2.innerHTML = 'y: ' + y;
        p3.innerHTML = 'z: ' + z;
        // g = 10
        function getAdr(){
            var type = navigator.userAgent;
            var isAndroid = type.indexOf('Android') > -1 || 
                            type.indexOf('Adr') > -1;
            return isAndroid;
        }
    });
</script>
</html>

摇一摇：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #con{
          width: 200px;
          height: 200px;
          line-height: 100px;
          text-align: center;
          font-size: 48px;
          color: black;
          position: absolute;
          top: 100px;
          left: 100px;
          background: yellowgreen;
      }
    </style>
</head>
<body>
    <div id="con">
        <p id="text">快来摇我</p>
    </div>
</body>
<script>
    function $my(id){
        return document.getElementById(id);
    }
    var lastX = 0;
    var lastY = 0;
    var lastZ = 0;
    // 定义幅度
    var maxRange = 70;
    var minRange = 10;
    // 节流阀
    var isRange = false;
    var con = $my('con');
    var text = $my('text');
    window.addEventListener('divicemotion', (e)=>{
        // 包括重力加速度
        var motion = e.accelerationIncludingGravity;
        var x = Math.round(motion.x);
        var y = Math.round(motion.y);
        var z = Math.round(motion.z);
        //取绝对值
        var distance = Math.abs(x - lastX) + Math.abs(y - lastY) + Math.abs(z - lastZ);
        if (distance > maxRange) {
            text.innerHTML = "摇一摇";
            isRange = true;
        }
        // 动作慢下来之后
        if (distance < minRange && isRange) {
            // 动作慢下来或停止
            setTimeout(() => {
                text.innerHTML = "触发事件";
            }, 2000);
        }
        lastX = x;
        lastY = y;
        lastY = z;
    });
</script>
</html>

(function(window){
    window.gesture = function(ele, callback){
        var isStart = false;
        // 判断用户是否触发了触摸事件，两个手指在元素上
        ele.addEventListener('touchstart', function(event){
            if(event.touches.length >= 2) {
                isStart = true;
                // 初始距离
                this.startDistance = getDistance(event.touches[0],event.touches[1]);
                // 初始角度
                this.startDeg = getDeg(event.touches[0],event.touches[1]);
                // 判断是否传入回调，调用函数
                if (callback && typeof callback['start'] === 'function'){
                    callback['start']();
                }
            }
        });
        //  是否移动
        ele.addEventListener('touchmove', (event)=>{
            if(event.touches.length >= 2) {
                isStart = true;
                // 实时距离
                const currDistance = getDistance(event.touches[0],event.touches[1]);
                // 实时角度
                const currDeg = getDeg(event.touches[0],event.touches[1]);
                // 实时距离与初识距离的比例
                event.scale = currDistance / this.startDistance;
                // 计算实时角度和初识角度的差值
                event.rotation = currDeg - this.startDeg;
                // 判断是否传入回调，调用函数
                if (callback && typeof callback['change'] === 'function'){
                    callback['change']();
                }
            }
        });
        ele.addEventListener('touchend', (event)=>{
            if(event.touches.length < 2 && isStart) {
                // 判断是否传入回调，调用函数
                if (callback && typeof callback['end'] === 'function'){
                    callback['end']();
                }
                // 重置isStart
                isStart = false;
            }
        });
        // 获取两点间的距离
        function getDistance(touch1, touch2){
            const a = touch1.clientX - touch2.clientX;
            const b = touch1.clientY - touch2.clientY;
            return Math.sqrt(a*a + b*b);
        }
        // 获取两点间的角度
        function getDeg(touch1, touch2){
            const x = touch1.clientX - touch2.clientX;
            const y = touch1.clientY - touch2.clientY;
            // tan = 对边/临边
            var radian = Math.atan2(y, x);
            return radian * 180/Math.PI;
        }
    }
})(window);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #con{
            width: 300px;
            height: 300px;
            text-align: center;
            font-size: 48px;
            color: black;
            position: absolute;
            top: 50px;
            left: 50px;
            background: greenyellow;
        }
    </style>
    <script src="./android.js"></script>
</head>
<body>
    <div id="con">
            <p id="p1">1</p>
            <p id="p2">2</p>
            <p id="p3">3</p>
    </div>
    <script>
        var con = document.getElementById('con');
        var p1 = document.getElementById("p1");
        var p2 = document.getElementById("p2");
        var p3 = document.getElementById("p3");
        gesture(con, {
            start: function(e){
                p1.innerHTML = '多指事件';
            },
            change: function(e){
                p2.innerHTML = '多指移动了';
            },
            end: function(e){
                p3.innerHTML = '手指抬起了';
            }
        });
    </script>
</body>
</html>