设置动画使球向右移动

回到课程

让球向右移动。像这样：

编写动画代码。终止时球到左侧的距离是 100px。

从前一个任务为弹跳的球设置动画的答案开始。

在任务为弹跳的球设置动画中，我们只有一个需要添加动画的属性。现在多了一个 elem.style.left。

水平坐标由另一个定律改变：它不会“反弹”，而是逐渐增加使球逐渐向右移动。

我们可以为它多写一个 animate。

至于时序函数，我们可以使用 linear，但像 makeEaseOut(quad) 这样的函数看起来要好得多。

代码：

          let height = field.clientHeight - ball.clientHeight;
let width = 100;

// 设置 top 动画（弹跳）
animate({
  duration: 2000,
  timing: makeEaseOut(bounce),
  draw: function(progress) {
    ball.style.top = height * progress + 'px'
  }
});

// 设置 left 动画（向右移动）
animate({
  duration: 2000,
  timing: makeEaseOut(quad),
  draw: function(progress) {
    ball.style.left = width * progress + "px"
  }
});
        

使用沙箱打开解决方案。