【咸鱼教程】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 摇一摇之双甩功能 最近做一个摇一摇的功能 网上相关代码很多 但是这次的需求有点奇葩 要求是摇两次才生效 看起来好像很简单 但真正要做遇到的问题还是很多 时间限制 机型灵敏性 摇动的方式 ...
随机推荐
- 百度编辑器插入视频、iframe 失败
插入失败是因为编辑器的xssFilter过滤,导致插入出现异常 文件位置:ueditor.config.js ,大概在428行加上 video: ['autoplay', 'controls', 'l ...
- 【python】logging
https://docs.python.org/3/howto/logging.html import logging # create logger logger = logging.getLogg ...
- git clone Google的代码失败的解决方法
git clone Google的volley代码遇Q. 想到用代理服务器就可以解决这个问题.Google了一下解决方法,记录下来,分享一下. git config:
- Nginx系列6之-rewirte功能使用案例总结
使用案例1 网站架构如下: 公司部分服务器目前通过二级目录来调度到不同的服务器,如下所示: 按照上述需求,我们此时就配置了两个location,如下所示: [root@localhost nginx] ...
- ABBYY FineReader利用模式提高OCR质量
提高OCR质量,除了可以使用ABBYY FineReader 12OCR文字识别软件解决纸质文档的复杂结构未出现在电子文档中,或者未正确检测到区域的问题(详见如何提高ABBYY FineReader ...
- 标准代码页(codepage)列表
https://blog.csdn.net/jianggujin/article/details/80325461 这篇文章有待完善 代码页 简称 全称 37 IBM037 IBM EBCDIC (U ...
- apt-get/dpkg常用指令备查
apt-get install <package> Downloads <package> and all of its dependencies, and installs ...
- STL——序列式容器
一.容器概述与分类 1. STL容器即是将运用最广的一些数据结构实现出来.常用的数据结构有array, list, tree, stack, queue, hash table, set, map…… ...
- java 对 汉字排序(按照拼音字母排序)
业务场景: 一个list集合,里面add了若干个实体类,针对该实体类排序的属性为String. 使用技术,自定义list排序(JDK自带),重写Comparator接口的compare方法,汉字转拼音 ...
- docker 快速搭建Nexus3
1.拉取镜像 docker pull sonatype/nexus3 2.启动容器 : -p : -p : -v /mnt/gv0/nexus-data:/nexus-data sonatype/ne ...