小球碰壁反弹动画

# 小球碰壁反弹动画

在之前的关于陀螺仪的使用中，我们有说道在 iOS 中，在陀螺仪没有授权时，小球是不会跟着移动的

基于此前提，所以我在实现时，在 iOS 中，添加了一个小球碰壁动画

具体如下

# 实现

获取小球的大小以及小球最终的位置

    ballSize = ball.outerWidth();

    var rect = ball.get(0).getBoundingClientRect()

    ballX = rect.x;
    ballY = rect.y;
    viewportH = window.innerHeight || document.documentElement.clientHeight
    viewportW = window.innerWidth || document.documentElement.clientWidth

1
2
3
4
5
6
7
8
9

获取一个随机的运动偏移量

  // 生成随机数的函数

  function random(min, max) {
    var temp = Math.floor(Math.random() * (max - min)) + min
    return temp || random(min, max);
  }
  
  velX = random(-7, 7);
  velY = random(-7, 7);

1
2
3
4
5
6
7
8
9

这里的值可以按照需要自定义，我这里采用的是 -7 ~ 7 的范围区间

定义一个循环执行的函数

function loop() {
  update();
  ballDraw();
  requestAnimationFrame(loop);
}

1
2
3
4
5

首先要更新小球的下一次位置的值，接着需要绘制小球下一次的位置，然后通过 requestAnimationFrame (opens new window) 来实现小球动画

那么 update 方法做了什么呢

  function ballUpdate() {

    if (ballX + ballSize >= viewportW) {
      velX = -(velX);
    }

    if (ballX <= 0 && velX < 0) {
      velX = -(velX);
    }

    if (ballY + ballSize >= viewportH) {
      velY = -(velY);
    }

    if (ballY <= 0 && velY < 0) {
      velY = -(velY);
    }
    ballX += velX;
    ballY += velY;
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

小球 left 最小为 0，最大为 viewportW - ballSize
小球 top 最小为 0，最大为 viewportH - ballSize

根据以上两点我们可以判断及修改偏移量的值

如果 left + size 大于等于 viewportW，那么就将偏移量 x 取反
如果 left 小于等于 0，并且偏移量也小于 0，那么也将偏移量 x 取反
偏移量 y 和 x 同理

也就是说在往右移动时，如果已经到边界了，那么就需要往左移动了，反之也是一样

在通过 requestAnimationFrame ，便实现了小球碰壁动画

iOS 设备可以通过以下地址访问体验

小葵-向日葵 (opens new window)

编辑

上次更新: 2021/05/26 17:30:08