用 HTML5 实现手机轻松摇动功能
最编程
2024-08-01 18:37:12
...
HTML5新增了一些JavaScript API接口,比如地理定位、重力感应等。今天主要介绍devicemotion事件(设备事件),它提供设备的加速信息,表示为定义在设备上的坐标系。其还提供了设备在坐标系中的自转速率。若可行的话,事件应该提供设备重心处的加速信息。本文给大家讲解了HTML5实现手机摇一摇的效果。
手机摇一摇的实现思路:
1、检测设备是否支持重力传感;
// 监听运动传感事件,查看是否支持硬件运动
if (window.DeviceMotionEvent) {
alert("您的设备支持硬件调用");
} else {
alert("您的设备不支持硬件调用");
}
2、绑定运动传感(devimotion)事件;
window.addEventListener('devicemotion', deviceMotionHandler, false);
3、根据devimotion事件对象,获取三个方向的重力加速度;
/*
* [deviceMotionHandler 摇一摇处理函数]
* @param {[type]} eventData [事件对象]
* @return {[type]} [无返回值]
* @author 刘国利、陈能堡、HTML5学堂
*/
function deviceMotionHandler(eventData){
// acceleration加速度
var acceleration = eventData.accelerationIncludingGravity;
$(".wrap")[0].innerHTML = acceleration.x + " " + acceleration.y + " " + acceleration.z;
}
4、为了防止系统认为简单的变化也是在摇动手机,所以在每隔一段时间进行三个方向值的计算;
// 获取当前时间
curTime = new Date().getTime();
if (curTime - lastTime > 100) {
// 计算出时间断
diffTime = curTime - lastTime;
// 记录上一次的时间
lastTime = curTime;
// 获取当前的三个方向的值
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
// 计算速度,为了防止出现负数,进行绝对值
speed = Math.abs((x + y + z - lastX - lastY - lastZ) / diffTime * 10000);
// 记录上一次三个方向的值
lastX = x;
lastY = y;
lastZ = z;
};
5、当计算的该值大于预定的值(阀值),执行相应的操作。
if (speed > SHAKE_THRESHOLD) {
alert("实现了摇一摇");
};
图片来源于网络
完整的实例
var con = document.getElementById("con");
(function(){
// 监听运动传感事件,查看是否支持硬件运动
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler, false);
} else {
alert("您的设备不支持硬件调用");
}
// 变量初始化
var x = 0,
y = 0,
z = 0,
lastX = 0,
lastY = 0,
lastZ = 0,
curTime = 0,
lastTime = 0,
diffTime = 0,
speed = 0;
// 设置一个阀值
var SHAKE_THRESHOLD = 800; // 设定摇晃的阈值为600 运行相应操作
/*
* 功能:测算三个方向重力加速度,达到一定值进行相应操作
* 作者:HTML5学堂、刘国利、陈能堡
*
*/
function deviceMotionHandler(eventData){
var acceleration = eventData.accelerationIncludingGravity;
// 获取当前时间
curTime = new Date().getTime();
// 计算时间差,当这个差值大于一定值执行计算三个方向的速度
if ((curTime - lastTime) > 100) {
// 记录上一次的时间
diffTime = curTime - lastTime;
lastTime = curTime;
// 获取当前三个方向的值
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
// 计算速度,为了防止出现负数,进行绝对值
speed = Math.abs((x + y + z - lastX - lastY - lastZ) / diffTime * 8000);
if (speed > SHAKE_THRESHOLD) {
alert("我实现摇一摇了");
};
// 记录上一次三个方向的值
lastX = x;
lastY = y;
lastZ = z;
};
}
})();
推荐阅读
-
用 HTML5 实现手机轻松摇动功能
-
在打造"阳光旅行网"手机应用的过程中,我们实现了让用户轻松操作的订票功能,包括添加订单、填写完整的出行人详情、随时修改订单内容、有权删除订单,还有方便地查看和打印行程安排等实用功能。
-
玩转HTML5 Canvas:轻松实现橡皮擦功能 - 包含方形橡皮和圆型橡皮擦的步骤教程
-
用 node.js 实现手机号码验证码登录功能
-
Adobe国际认证中文官方网站】Adobe中国摄影计划,免费安装正版激活--Adobe Creative Cloud中国摄影计划。与此同时,Adobe宣布天猫为Adobe Creative Cloud中国摄影计划的电商战略合作伙伴,并将与其合作上线Adobe天猫官方旗舰店。 此举无疑一方面扩大了Adobe在中国的影响力,另一方面也有助于国内用户更好地培养正版软件意识,推动Adobe软件在中国的正版化进程。 网络异常,图片无法显示 ||网络异常 Adobe Creative Cloud中国摄影计划包括Photoshop和Lightroom Classic两大桌面创意工具,以及iOS版Photoshop Express。 其中,Adobe Lightroom Classic和Adobe Photoshop作为两款常用的图像处理软件,对于那些玩摄影、后期修图的创意设计人群无疑有着巨大的帮助,而LR+PS套装对于摄影领域用户的重要性自不必说,正版产品的性能实时更新也可以放心!体验最新功能,对于新镜头(补偿)和机身(RAW 读取)都能第一时间适应。不信你看: Photoshop 图像合成 裁剪、移除对象、润饰合成照片、玩转色彩和特效,创建精美图片和艺术品! Lightroom Classic 照片编辑 轻松批量管理和编辑照片,内置专业创意控件和摄影师预设,让你的照片大放异彩。 手机 PS 便捷编辑 Photoshop Express 支持多种滤镜、贴纸,手机即可完成抠图、除雾等任务 人工智能编辑工具 神经滤镜、快速点击选区、自动选择主题等人工智能功能让图像编辑更轻松 创意画笔内容识别 定制艺术画笔工具,实现个性化效果;内容识别填充,智能去除无用物体。 Adobe Creative Cloud 中国摄影计划的推出,为中国的专业摄影师、摄影爱好者、后期修图和其他创意设计人员带来了全方位的内容和体验。 网络异常,图片无法显示 ||网络异常 当然,不可否认的是,"由于盗版软件缺乏开发、维护和升级成本,销售价格远低于正版软件。再加上很多普通人并不需要使用正版软件的复杂功能,版权观念较淡,还是有大量的创意设计人员会选择盗版软件"。 但事实上,当所有的软件都不再是单一的软件,而是变成一种服务时,单机版盗版的存在就逐渐成为鸡肋。因为有太多的服务让你即使是所谓的 "完美破解",也无法享受,Adobe Cloud 就是一个很好的例子,所谓的完美破解,你只能使用 "Adobe "的一半,对于更精彩的 "云",只能望云兴叹。更何况,越来越多的设计工具从免费走向付费,越来越多的设计师和企业已经接受了付费使用的模式。 其次,对于互联网时代的企业数字化转型而言,数字化合规至关重要。21年来,使用盗版PS和未经授权的方正字体被指侵权的事情闹得沸沸扬扬,虽然新闻真假难辨,但也给使用盗版工具的用户敲响了警钟。 付费使用正版工具,可以更放心地进行设计,不用担心版权风险!
-
用JavaScript轻松实现一个简单的购物车功能
-
用C#和Xamarin通过ZXing.Net.Mobile实现手机扫码功能
-
轻松搞定!用JavaScript原生代码实现点击复制文本功能
-
方便易用!iOS 12.0.4新功能让你轻松实现手机克隆
-
用HTML5+Plus(5+App)轻松实现扫码功能(plus.barcode)