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

为弹跳的球设置动画

重要程度: 5

做一个弹跳的球。点击查看应有的效果:

打开一个任务沙箱。

为了达到反弹效果,我们可以在带有 position:relative 属性的区域内,给小球使用 topposition:absolute CSS 属性。

field 区域的底部坐标是 field.clientHeighttop 属性给出了球顶部的坐标,在最底部时达到 field.clientHeight - ball.clientHeight

因此,我们将 top0 变化到 field.clientHeight - ball.clientHeight 来设置动画。

现在为了获得“弹跳”效果,我们可以在 easeOut 模式下使用时序函数 bounce

这是动画的最终代码:

let to = field.clientHeight - ball.clientHeight;

animate({
  duration: 2000,
  timing: makeEaseOut(bounce),
  draw(progress) {
    ball.style.top = to * progress + 'px'
  }
});

使用沙箱打开解决方案。