【咸鱼教程】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下载