查看: 1340|回复: 4

[答疑解惑] H5 devicemotion ios触发不了

[复制链接]
发表于 2019-6-27 11:47:52 | 显示全部楼层 |阅读模式
目前测试:android可正常使用,但ios怎么都触发不了devicemotion事件。
请问有大佬知道怎么回事以及处理方式吗?(直接访问index.html)

shake.zip

585.68 KB, 下载次数: 1

售价: 10 蚂蚁币  [记录]  [购买]

摇一摇 ios

回复

使用道具 举报

发表于 2019-6-27 13:47:50 | 显示全部楼层
ios系统限制所致,可以采用cordova-plugin-device-motion实现。

这个插件提供了对设备加速度计的访问。加速度计是一种运动传感器,它检测相对于当前设备方向的运动变化(增量),在x、y和z轴上的三维变化。

这个插件的API类似地理位置API,一个获取状态getCurrentAcceleration,一个监听状态watchAcceleration。具体可百度。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2019-6-28 10:44:51 | 显示全部楼层
哈哈镜子 发表于 2019-6-27 13:47
ios系统限制所致,可以采用cordova-plugin-device-motion实现。

这个插件提供了对设备加速度计的访问。 ...

请问有具体链接吗
回复 支持 反对

使用道具 举报

发表于 2019-6-28 14:33:06 | 显示全部楼层
本帖最后由 哈哈镜子 于 2019-6-28 14:50 编辑
  1. document.addEventListener("deviceready", onDeviceready);

  2. var pic = new Array('car.png', 'house.png', 'money.png');

  3. var name = new Array("摇一摇");

  4. var all_roll = 0;

  5. var u_roll = 0;

  6. function onDeviceready() {

  7. console.log('启动。。。');

  8. $('#test1').click(function () {

  9. //重置样式

  10. $("#shake").css("display","none");

  11. $('#test1').text("再摇一次");

  12. $("#yaoimg").animate({

  13. height: '0',

  14. width: '0',

  15. borderWidth:'0px'

  16. });

  17. $('#heci').css("display", "none");

  18. $('#shakeimg').css("display", "none");

  19. console.log('触发按钮');

  20. startWatch();

  21. });

  22. }

  23. // ---用于处理动画---

  24. function start() {

  25. var rang = Math.floor(Math.random() * 3); //随机生成0-2的数字,方便取出图片

  26. console.log(rang);

  27. $('#shakeimg').attr("src", "img/" + pic[rang]);

  28. console.log(pic[rang]);

  29. $('#heci').text("恭喜你,摇出了:" + name[rang] + "!!!");

  30. console.log(name[rang]);

  31. $("#shakebottom").animate({

  32. height: '+=150px',

  33. marginTop: '0px'

  34. });

  35. console.log("下滑1");

  36. $("#shaketop").animate({

  37. height: '+=150px',

  38. marginBottom: '0px'

  39. }, function () {    //用动画显示随机生成的图片

  40. $("#yaoimg").animate({

  41. height: '50%',

  42. width: '80%',

  43. opacity: '1',

  44. borderWidth:'5px'

  45. });

  46. $("#shakeimg").css({

  47. "height": "150px",

  48. "width": "150px",

  49. "display": "block"

  50. });

  51. console.log("显示照片");

  52. $("#heci").fadeIn(2000);

  53. console.log("显示文字");

  54. $("#shake").css("display","none");

  55. });

  56. console.log('上滑1');

  57. }

  58. //---监视设备的加速度

  59. function startWatch() {

  60. //每0.3s更新一次加速度信息

  61. var options = {

  62. frequency: 300

  63. };

  64. wachID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);

  65. console.log('调用插件');

  66. console.log(wachID);

  67. }

  68. //---停止监视设备的加速度

  69. function stopWatch() {

  70. u_roll = 0;

  71. all_roll = 0;

  72. navigator.accelerometer.clearWatch(wachID);

  73. }

  74. //---获取加速度成功事件

  75. function onSuccess(accelerometer) {

  76. var pow_v = Math.pow(accelerometer.x, 2) + Math.pow(accelerometer.y, 2) + Math.pow(accelerometer.z, 2);

  77. var v = Math.sqrt(pow_v);

  78. console.log(u_roll);

  79. if (v > 15) {

  80. all_roll++; //全部摇动次数

  81. u_roll++; //有效摇动次数

  82. navigator.vibrate(300); //震动反馈

  83. if (u_roll > 1) { //判定这个为摇动,开始显示图片

  84. //摇一摇的动画

  85. $("#shake").css("display","block");

  86. $("#shakebottom").animate({

  87. height: '-=150px',

  88. marginTop: '150px'

  89. });

  90. console.log("下滑");

  91. $("#shaketop").animate({

  92. height: '-=150px',

  93. marginBottom: '150px'

  94. });

  95. console.log('上滑');

  96. stopWatch();

  97. console.log("停止插件");

  98. //调用函数开始显示图片

  99. start();

  100. console.log('显示动画并开始显示图片');

  101. }

  102. } else {

  103. all_roll++;

  104. console.log('摇晃角度不够。');

  105. }

  106. }

  107. //---获取加速度失败事件

  108. function onError() {

  109. alert("错误!");

  110. }
复制代码

回复 支持 反对

使用道具 举报

 楼主| 发表于 2019-7-6 16:16:36 | 显示全部楼层
此问题已解决,不是用cordova。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

关闭

网站推荐上一条 /1 下一条



邮箱:[email protected] QQ:791577401 木子牛HTML5工作室 版权所有

© MUZINIU Inc.小黑屋|手机版|Archiver|HANGNIU  

Powered by MuZiNiuX3.2( 豫ICP备12017936号 )

 豫公网安备 41078102000103号

快速回复 返回顶部 返回列表