Question

当我的手机旋转时，我使用以下代码在屏幕上移动球：

HTML

<html>
<head>
<meta charset="utf-8">
<title>Gyro_Ball</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/main.js"></script>
</head>
<body onload="init()">
<div id="ball"></div>

</body>
</html>

SCRIPT

if ( !window.requestAnimationFrame ) {

  window.requestAnimationFrame = ( function() {

    return window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.oRequestAnimationFrame ||
      window.msRequestAnimationFrame ||
      function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {

        window.setTimeout( callback, 1000 / 60 );

      };

  } )();

}



var ball;
var w;
var h;

function init()
{
  ball = document.getElementById("ball");
  w = window.innerWidth;
  h = window.innerHeight;

  ball.style.left = (w/2)-50+"px";
  ball.style.top = (h/2)-50+"px";
  ball.velocity = {x:0,y:0}
  ball.position = {x:0,y:0}

  if (window.DeviceOrientationEvent) {

    window.addEventListener("deviceorientation", function(event)
      {
        ball.velocity.y = Math.round(event.beta);
        ball.velocity.x = Math.round(event.gamma);
      }
    )
  };

  update();
}

function update()
{
  ball.position.x += ball.velocity.x;
  ball.position.y += ball.velocity.y;

  if(ball.position.x > (w-100) && ball.velocity.x > 0)
  {
    ball.position.x = w-100;
  }

  if(ball.position.x < 0 && ball.velocity.x < 0)
  {
    ball.position.x = 0;
  }

  if(ball.position.y > (h-100) && ball.velocity.y > 0)
  {
    ball.position.y = h-100;
  }

  if(ball.position.y < 0 && ball.velocity.y < 0)
  {
    ball.position.y = 0;
  }

  ball.style.top = ball.position.y + "px"
  ball.style.left = ball.position.x + "px"

  requestAnimationFrame(update);//KEEP ANIMATING
}

CSS 身体 { 填充：0; 余量：0; background-color：＃32c9d6; }

#ball
{
-webkit-transition: all;
transition: all;
position:absolute;
width:100px;
height:100px;
border-radius: 50%;
background: white;
}

效果很好！但是当我旋转我的手机时，我需要减速球......任何想法？

这是演示（使用手机查看）： http://inkfood.github.io/Gyro_Ball2/

JSFIDDLE（使用您的手机查看）： https://jsfiddle.net/qq74w6a3/6/

我只需要在从左向右倾斜时放慢速度，这样它就不会快速缩放......必须有延迟或加速，或者我可以使用FPS来减速它？

Answer 1

我试着让它在移动设备上运行，但我无法做到。但我确实添加了一个鼠标事件，它使用鼠标增量来减慢球的速度。

我计算了鼠标远离球心的距离，然后使用该百分比来调整速度。我想你可以用这个来找出球中心离定向球的距离。即底部。

运行嵌入式脚本并移动鼠标。当球越来越接近鼠标位置时球应该减速。

＆＃13;

if (!window.requestAnimationFrame) {
  window.requestAnimationFrame = (function() {
    return window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.oRequestAnimationFrame ||
      window.msRequestAnimationFrame ||
      function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
        window.setTimeout(callback, 1000 / 60);
      };
  })();
}

var ball;
var dbg;
var w;
var h;
var my = 0;
var mx = 0;

function update() {
  ball.position.x += ball.velocity.x;
  ball.position.y += ball.velocity.y;

  if (ball.position.x > (w - 100) && ball.velocity.x > 0) {
    ball.position.x = w - 100;
  }

  if (ball.position.x < 0 && ball.velocity.x < 0) {
    ball.position.x = 0;
  }

  if (ball.position.y > (h - 100) && ball.velocity.y > 0) {
    ball.position.y = h - 100;
  }

  if (ball.position.y < 0 && ball.velocity.y < 0) {
    ball.position.y = 0;
  }

  ball.style.top = ball.position.y + "px";
  ball.style.left = ball.position.x + "px";

  requestAnimationFrame(update); //KEEP ANIMATING
}

function init() {
  ball = document.getElementById("ball");
  dbg = document.getElementById("debug");
  w = window.innerWidth;
  h = window.innerHeight;
  ball.style.left = (w / 2) - 50 + "px";
  ball.style.top = (h / 2) - 50 + "px";
  ball.velocity = {
    x: 0,
    y: 0
  };
  ball.position = {
    x: 0,
    y: 0
  };
  if (window.DeviceOrientationEvent) {
    window.addEventListener("deviceorientation", function(event) {
      ball.velocity.y = Math.round(event.beta);
      ball.velocity.x = Math.round(event.gamma);
    });
  } else {
    window.addEventListener("mousemove", function(event) {
      my = event.clientY;
      mx = event.clientX;
    });
    window.setInterval(function() {
      var wy = window.outerHeight;
      var wx = window.outerWidth;
      var bcy = ball.position.y + 50; //ball center Y
      var bcx = ball.position.x + 50; // ball center X
      var dy = Math.round(((my - bcy) * 100 / wy) * 10000) / 10000;
      var dx = Math.round(((mx - bcx) * 100 / wx) * 10000) / 10000;
      ball.velocity.y = dy;
      ball.velocity.x = dx;
      dbg.innerHTML = 'deltaY:' + dy + ' deltaX:' + dx;
    }, 100);
  }
  update();
}

init();

＆＃13;

#ball {
  -webkit-transition: all;
  transition: all;
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: red;
}
#debug {
  position: absolute;
  top: 5px;
  left: 5px;
  display: inline-block;
  width: auto;
  height: auto;
  padding: 5px 10px;
  z-index: 2;
  color: rgb(255, 255, 255);
  background: rgba(0, 0, 0, 0.75);
  font-family: monospace;
  font-size: 11px;
}

＆＃13;

<div id="ball"></div>
<div id="debug">x:0 y:0</div>

＆＃13;

移动加速度计 - 旋转时慢速div

1 个答案: