今天主要介绍一下html5重力感应事件之DeviceMotionEvent,DeviceMotion提供设备的加速信息，表示为定义在设备上的坐标系中的迪卡尔坐标。其还提供了设备在坐标系中的自转速率。如下图所示坐标系：
当我们的设备“位置”发生变化时，会在devicemotion的事件对象（ev）内保存相关信息，我们从其中获取我们所需要的信息即可。
首先我们要判断下我们的设备是否支持DeviceMotionEvent
if(window.DeviceMotionEvent){
alert('ok，可以支持');}
else {
alert('不支持');
}
接下来我们就可以通过devicemotion事件（注意此处必须用事件绑定，必须用事件绑定必须用事件绑定），然后通过ev下的accelerationIncludingGravity来获取X、Y、Z的相关参数：
if(window.DeviceMotionEvent){
window.addEventListener('devicemotion',function(ev){
//当触发devicemotion事件后查看相关信息
var acc = ev.accelerationIncludingGravity;
alert('x坐标:'+acc.x+'--y坐标:'+acc.y+'---z坐标:'+acc.z);
},false);
}
下面我们就开始，编写一个简单的微信摇一摇功能
- 当我们手机端X方向或Y方向或Z方向，就触发摇一摇功能
- 利用CSS3的动画来给box一个随机的背景色
html布局：
<div id="box"></div>
简单的为box设置点样式：
<style type="text/css" media="screen">
//定义一个左右摇摆动画
@keyframes test{
0%{ transform:rotate(0deg); }
25%{ transform:rotate(30deg); }
50%{ transform:rotate(0deg);}
75%{ transform:rotate(-30deg); }
100%{ transform:rotate(0deg);}
}
#box{
width:400px;height:200px;
background:red;
margin:200px auto;
}
//给box加一个动画
#box.shake{
animation:200ms test ease;
}
</style>
接下来我们就用JS获取信息没然后操作BOX的颜色与位置变化
//在这里定义一个随机数函数
function rnd(m,n){
return parseInt(Math.random()*(n-m)+m);
}
//给文档加DOMContentLoaded事件，该事件类似window.onloaded
document.addEventListener('DOMContentLoaded',function(){
var oBox = document.getElementById('box');
var timer=null;
if(window.DeviceMotionEvent){
window.addEventListener('devicemotion',function(ev){
var acc = ev.accelerationIncludingGravity;
//获取devicemotion的xyz变化
var x = acc.x;
var y = acc.y;
var z = acc.z;
if(
x>30||
y>30||
z>30 ){
oBox.className ='shake'; 、
oBox.style.background='rgb('+rnd(0,256)+','+rnd(0,256)+','+rnd(0,256)+')';
timer=setTimeout(function(){
oBox.className ='';
},300)
}
},false);
}else{
alert('不支持');
}
},false);
