【咸鱼教程】Egret实现摇一摇功能
教程目录
一 实现原理
二 代码
三 Demo下载
一 实现原理
监听设备旋转角度的变化,来判断用户是否摇动手机。
参考:
智能手机里陀螺仪和重力感应有何区别?
HTML5实现摇一摇的功能
Egret官方陀螺仪教程
二 代码
摇一摇工具类ShakeTool使用范例
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源码
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下载
【咸鱼教程】Egret实现摇一摇功能的更多相关文章
- Egret 摇一摇功能
一 什么是重力感应 二 什么是陀螺仪 三 Egret中的摇一摇是利用什么原理实现的 四 摇一摇代码 一 什么是重力感应 二 什么是陀螺仪 三 Egret中的摇一摇是利用什么原理实现的 大概是利用手机 ...
- C#开发微信门户及应用(38)--微信摇一摇红包功能
摇一摇周边红包接口是为线下商户提供的发红包功能.用户可以在商家门店等线下场所通过摇一摇周边领取商家发放的红包.我曾经在<C#开发微信门户及应用(28)--微信“摇一摇·周边”功能的使用和接口的实 ...
- C#开发微信门户及应用(28)--微信“摇一摇·周边”功能的使用和接口的实现
”摇一摇周边“是微信提供的一种新的基于位置的连接方式.用户通过“摇一摇”的“周边”页卡,可以与线下商户进行互动,获得商户提供的个性化的服务.微信4月份有一个赠送摇一摇设备的活动,我们有幸获得赠送资格, ...
- Android 摇一摇功能的注意事项
/**开始重力传感器的检测*/ public void start() { // 获得传感器管理器 sensorManager = (SensorManager) mContext.getSystem ...
- 【WP开发】实现“摇一摇”功能
尽管我的微信是每八个月登录一次,但我相信各位玩得比我多.微信有一个“摇一摇”功能,这个功能其实是利用了加速度传感器来实现的,这个传感器,我估计再低端的手机都会有的,这是严重基本的传感器. 重力加速度既 ...
- 利用HTML5的一个重要特性 —— DeviceOrientation来实现手机网站上的摇一摇功能
介绍之前做两个声明: 以下代码可以直接运行,当然你别忘了引用jQuery才行. <script> // DeviceOrientation将底层的方向传感器和运动传感器进行了高级封装, ...
- html5实现微信摇一摇功能
在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientat ...
- IOS开发之——类似微信摇一摇的功能实现
首先,一直以为摇一摇的功能实现好高大上,结果百度了.我自己也模仿写了一个demo.主要代码如下: 新建一个项目,名字为AnimationShake. 主要代码: - (void)motionBegan ...
- Android 摇一摇之双甩功能
Android 摇一摇之双甩功能 最近做一个摇一摇的功能 网上相关代码很多 但是这次的需求有点奇葩 要求是摇两次才生效 看起来好像很简单 但真正要做遇到的问题还是很多 时间限制 机型灵敏性 摇动的方式 ...
随机推荐
- spark LinearRegression 预测缺失字段的值
最近在做金融科技建模的时候,字段里面很多缺少值得时候,模型对于新用户的预测会出现很大的不稳定,即PSI较大的情况. 虽然我们依据字段IV值得大小不断的在调整字段且开发新变量,但是很多IV值很大的字段直 ...
- 解决iredmail下postfix发送邮件时报错[need fully-qualified hostname]
iredmail配置好后,尝试从一客户端的OE中发送邮件,结果报错,在mail主机中查看tail /var/log/maillog,发现如下错误信息: Oct :: mail2 postfix/smt ...
- 解决ESXi有虚拟机模版部署的CentOS虚拟机,网卡eth0找不到问题
1,问题和虚拟机克隆后出现网卡找不到问题类似. 2,修改主机名hostname 修改 /etc/sysconfig/network文件 3,删除/etc/sysconfig/network-scrip ...
- 【Ubuntu】录屏软件
http://www.leesven.com/2378.html sudo apt-get install kazam
- 1 salt执行模块开发
saltstack自带的模块已经很多了,但是有些时候我们需要自己开发出自己的模块来满足自己的需求,那就要自己开发了,下面请看例子 创建_modules目录在file_roots下面 我们需要在file ...
- Centos7以上的版本 mysql 无法启动,无法停止问题
service mysqld start 始终提示如下: Failed to issue method call: Unit mysqld.service failed to load: No suc ...
- mysql查询两个日期之间相差多少天?
需求描述: 在mysql中,查看两个日期之间相差多少天 操作过程: 1.通过datediff函数,查看两个日期之间相差多少天 mysql> select datediff('2018-06-26 ...
- Chrome扩展应用
现在越来越多的用户将chrome浏览器设置为自己默认的浏览器,不仅是因为他的界面美,最重要的是他对html5和CSS3完美的支持,且调试工具非常好用,还有丰富的扩展库.如何安装自己的扩展呢? 点击自定 ...
- xcode修改默认头部注释(__MyCompanyName__) (转)
打开命令行: defaults write com.apple.Xcode PBXCustomTemplateMacroDefinitions '{ "ORGANIZATIONNAME&qu ...
- html+jquery制作网页地图
http://jvectormap.com/ <!--StartFragment --> JVectorMap 是一个显示矢量地图的jQuery插件.它使用 SVG 在Firefox 3 ...