回到课程
本资料仅提供以下语言版本:English。请 帮助我们 将其翻译为 简体中文 版本。

设置动画使球向右移动

重要程度: 5

让球向右移动。像这样:

编写动画代码。终止时球到左侧的距离是 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"
  }
});

使用沙箱打开解决方案。