DeviceMotionEvent优化源码实例

本章节分享两端代码实例，实现了对html5的摇一摇代码优化。

代码优化第一步:

删除无用的代码，进行重新封装，代码如下:

[ bootstrap ] 运行代码下载代码

<script>
if(window.DeviceMotionEvent){ 
  var speed = 25;//定义一个数值 
  var x = y = z = lastX = lastY = lastZ = 0;//重置所有数值 
  window.addEventListener('devicemotion', function(){ 
    //将传感值赋给acceleration 
    var acceleration =event.accelerationIncludingGravity;
    x = acceleration.x; 
    y = acceleration.y; 
    z = acceleration.z; 
    if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed ){ 
      // TODO:在此处可以实现摇一摇之后所要进行的数据逻辑操作 
      donghua(); 
    } 
    lastX = x; 
    lastY = y; 
    lastZ = z; 
  }, false); 
}
</script>

但是上面的代码并不完美，动画不执行完毕就不能继续执行DeviceMotionEvent事件。

代码修改如下:

[ bootstrap ] 运行代码下载代码

<script>
var f=1; 
function donghua(){ 
  //动画事件 
  $(".img").animate({left:'0',opacity:'1'},700,function(){f=1;}); 
}
if(window.DeviceMotionEvent) { 
  var speed = 25;//定义一个数值 
  var x = y = z = lastX = lastY = lastZ = 0;//重置所有数值 
  window.addEventListener('devicemotion', function(){ 
    //将传感值赋给acceleration 
    var acceleration =event.accelerationIncludingGravity;
    x = acceleration.x; 
    y = acceleration.y; 
    z = acceleration.z; 
    if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed ) { 
      // TODO:在此处可以实现摇一摇之后所要进行的数据逻辑操作 
      if(f==1){ 
        donghua(); 
        f=0; 
      } 
    } 
    lastX = x; 
    lastY = y; 
    lastZ = z; 
  }, false); 
}
</script>

代码描述：DeviceMotionEvent优化。DeviceMotionEvent优化源码实例

下载全部收藏

145 193

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册