zoukankan      html  css  js  c++  java
  • 【咸鱼教程】Egret实现摇一摇功能

    教程目录
    一 实现原理
    二 代码
    三 Demo下载


    一 实现原理
    监听设备旋转角度的变化,来判断用户是否摇动手机。

    参考:
    智能手机里陀螺仪和重力感应有何区别?
    HTML5实现摇一摇的功能
    Egret官方陀螺仪教程


    二 代码
    摇一摇工具类ShakeTool使用范例

    [Actionscript3] 纯文本查看 复制代码
    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    private shakeTest(){
            this.shakeTool = new ShakeTool();
            this.shakeTool.addEventListener(egret.Event.CHANGE, this.onChange,this);
            this.shakeTool.start();
    }
     
    private onChange(e:egret.Event){
           var data = e.data;
           //用户大概晃动了手机2-3次
           if(data.shakeCount > 6){
                    egret.log("摇一摇完成");
                     this.shakeTool.stop();
            }
    }




    ShakeTool源码

    [Actionscript3] 纯文本查看 复制代码
    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    /**
     * 摇一摇工具类
     * @author chenkai
     * [url=home.php?mod=space&uid=81950]@since[/url] 2017/4/20
     */
    class ShakeTool extends egret.EventDispatcher{
            private orientation:egret.DeviceOrientation; //设备方向变化
            private xAngle: number = 0;     //设备绕x角度
            private yAngle: number = 0;     //设备绕y角度
            private zAngle: number = 0;     //设备绕z角度
            private last_x: number = 0;     //上一次绕x角度
            private last_y: number = 0;     //上一次绕y角度
            private last_z: number = 0;     //上一次绕z角度
            private shakeCount: number = 0; //摇动次数
            private lastTime:number = 0;    //上一次更新时间
            private shakeAngle:number = 45; //当晃动角度大于一定角度时,算摇动一次
     
            public constructor(){
                    super();
            }
     
            /**开始 */
            public start(){
                    //重置数据
                    this.shakeCount = 0;
                    this.lastTime = 0;
                    this.last_x = 0;
                    this.last_y = 0;
                    this.last_z = 0;
     
                    //开始监听
                    this.orientation || (this.orientation = new egret.DeviceOrientation());
                    this.orientation.addEventListener(egret.Event.CHANGE,this.onOrientation,this);
                    this.orientation.start();
            }
     
            /**停止 */
            public stop(){
                    if(this.orientation){
                            this.orientation.removeEventListener(egret.Event.CHANGE,this.onOrientation,this);
                            this.orientation.stop();
                    }
            }
     
            private onOrientation(e: egret.OrientationEvent) {
                    var curTime:number = egret.getTimer();
     
                    //每100ms判断一次
                    if(curTime - this.lastTime > 100){
                            this.lastTime = curTime;
     
                            this.xAngle = e.beta;   //x轴
                            this.yAngle = e.gamma;  //y轴
                            this.zAngle = e.alpha ; //z轴
     
                            //旋转超过一定角度,则算摇动一次
                            if(Math.abs(this.last_x - this.xAngle)>this.shakeAngle ||
                                    Math.abs(this.last_y - this.yAngle)>this.shakeAngle ||
                                    Math.abs(this.last_z - this.zAngle)>this.shakeAngle){
                                            this.shakeCount ++;
                            }
                            this.last_x = this.xAngle;
                            this.last_y = this.yAngle;
                            this.last_z = this.zAngle;
                    }
     
                    //派发事件(应该在shakeCount++时派发一次,写在这里只是为了方便显示测试数据...)
                    this.dispatchEventWith(egret.Event.CHANGE,false, {x:this.xAngle,y:this.yAngle,z:this.zAngle,shakeCount:this.shakeCount});
            }
    }



    Demo下载

  • 相关阅读:
    C​S​S3​:​transition与visibility
    CSS ::before 和 ::after 伪元素 进阶
    [转]达梦数据库报错:不能同时包含聚集KEY和大字段(text类型)
    [转].netcore webapi post参数长度超过最大限制
    efcore执行sql查询(无需定义dbset<model>)
    Rabbitmq的死信
    用Docker搭建RabbitMq的普通集群和镜像集群
    .NetCore在IdentityServer4因为Cookies的SameSite导致授权登录跳转回登录页的问题
    2021>2022
    js 宽高相关及其应用
  • 原文地址:https://www.cnblogs.com/gamedaybyday/p/9219939.html
Copyright © 2011-2022 走看看