html5 shade_html/css_WEB-ITnose

ここ 1 年、WeChat をベースにした H5 マーケティングが非常に人気があり、モーメンツへの転送によってもたらされるバイラル効果は誰もがよく知っていると思います。最近新年が近づいているので、「シェイクロット」の小さな例を取り上げて、HTML5 で携帯電話の重力感知インターフェイスを呼び出す方法について説明します。

デモ コード: シェイクして勝ちます。宝くじ

重力感知とは

重力感知に関して言及しなければならないことが 1 つあります。それは、ジャイロスコープの内部に上部があります。ジャイロスコープは、車輪の角運動量により回転を開始します。この機器は、ジャイロ効果により、その軸が常に初期方向と平行になるように、方向の変化に抵抗する特性を持っています。そのため、実際の方向は、初期方向からのずれ。

携帯電話の方位軸

Web アプリケーションでの携帯電話のジャイロスコープ インターフェイスの呼び出し

//摇一摇(使用DeviceOrientation事件, 本质是计算偏转角)//测试中发现有些设备不支持if(window.DeviceOrientationEvent){    $(window).on('deviceorientation', function(e) {        if (isStarted) {            return true;        }        if (!lastAcc) {            lastAcc = e;            return true;        }        var delA = Math.abs(e.alpha - lastAcc.alpha);        var delB = Math.abs(e.beta - lastAcc.beta);        var delG = Math.abs(e.gamma - lastAcc.gamma);        if ( (delA > 15 && delB > 15) || (delA > 15 && delG > 15) || (delB > 15 || delG > 15)) {            start();        }        lastAcc = e;    });

//摇一摇(使用DeviceMotion事件, 推荐,应为可以计算加速度)if(window.DeviceMotionEvent) {    var speed = 25;    var x, y, z, lastX, lastY, lastZ;    x = y = z = lastX = lastY = lastZ = 0;    window.addEventListener('devicemotion', function(event){        var acceleration = event.accelerationIncludingGravity;        x = acceleration.x;        y = acceleration.y;        if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed) {            start();        }        lastX = x;        lastY = y;    }, false);}

コード判定ロジックを振る

var isStarted = false;// 开始摇签function start() {    isStarted = true;    $('.qiancover').hide();    $('.decode').hide();    $('.result').show();    // setTimeout(showDecode, 3000);}// 显示正在解签function showDecode() {    $('.result').hide();    $('.decode').show();    setTimeout(jumpToDecode, 3000);}// 跳至签文页面function jumpToDecode(){    var urls = ["#", "#"];    var jumpTo = urls[parseInt(Math.random() * urls.length)];    window.location = jumpTo;};

サンプルコード: https://github.com/lionrock/HTML5-Example/tree/master/wechat-divination

参考ドキュメント: DeviceOrientation イベント仕様