HTML5技术

HTML5 摇一摇加强版之一次失败的探索 - 茄果(2)

字号+ 作者:H5之家 来源:博客园 2016-05-03 16:00 我要评论( )

想象总是没说服力,我们还是看看数据吧。 当然这里先利用摇一摇类似的筛选规则来去掉非甩动的动作。当检测到加速度发生突变(变化率大于阀值)时认为发生了一次甩动,这时候输出 x 轴的加速度值来看看,扫描频率设

 想象总是没说服力,我们还是看看数据吧。当然这里先利用摇一摇类似的筛选规则来去掉非甩动的动作。当检测到加速度发生突变(变化率大于阀值)时认为发生了一次甩动,这时候输出 x 轴的加速度值来看看,扫描频率设置为100ms的时候数据如下:

上面分别是左甩和右甩时候的数据,根据这个数据特点,判断每一个周期的第一个符合条件的加速度正负就可以判断甩动的方向了,楼主这里定义每个甩动周期为1s。

var speed = Math.abs(that.x + that.y + that.z - that.last_x - that.last_y - that.last_z) / diffTime * 10000; if (speed > that.SHAKE_THRESHOLD) { if ((curTime - that.last_catch) > 1000) { if (that.x > 5) { output.innerHTML += '右甩x:' + that.x + '<br/>'; //加速度向右,右甩 that.last_catch = curTime; } else if( that.x < -5) { output.innerHTML += '左甩x:' + that.x + '<br/>'; //加速度向左,左甩 that.last_catch = curTime; } } }

理论上这个是可以筛选掉不适合的加速度数据了,测试如下:

看起来像是得到了准确的结果,但不同人有不同的习惯、力度,上面的方法并不能很好的得到最准确的办法。

更为准确的办法应该是求出x的位移,再加上 x轴加速度变化判断是否甩动,两者结合就可以很好的判断甩动方向了。这里位移只要求能判断左右,所以直接用高中物理的公式即可。但是,在测试了 n 次之后,我才开始想,这个需求是真实存在的吗?还是说只存在我的臆想里面? 突然想起红衣教主的话,很多人啊都是掌握一门技术之后呢就会把这个技术包装成一个产品,还会强行为这个产品适配很多需求,但这些需求都是YY,都是伪需求!

真理!老周这一针见血啊!

不过呢,加速度计和陀螺仪还是非常好玩的东西,好好利用它们还是可以实现很多有趣的东西,比如说这个:AIWI使用手机玩体感游戏。

只要你能利用加速度计和陀螺仪计算出空间中的运动轨迹,那这一切都好办了,不过要得到比较好的精度可不能用高中物理那种简单的时域积分哦,这个楼主就不敢强行装逼了,有兴趣的同学自行搜索哈。

 

以上,这一篇都实在太水了,还是放图吧。

(图片出处:小周同学,转载请注明)

 原创文章,转载请注明出处!本文链接:  

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    2017-05-02 11:02

  • HTML5 进阶系列:indexedDB 数据库 - _林鑫

    HTML5 进阶系列:indexedDB 数据库 - _林鑫

    2017-04-27 14:02

  • HTML5 高级系列:web Storage - _林鑫

    HTML5 高级系列:web Storage - _林鑫

    2017-04-27 14:01

  • HTML5和CSS3 - 奔跑在起跑线佼佼者

    HTML5和CSS3 - 奔跑在起跑线佼佼者

    2017-04-20 13:00

网友点评
g