让球向右弹跳 - JavaScript 中文教程

返回课程

让球向右弹跳。像这样

编写动画代码。向左的距离为 100px。

以之前任务动画弹跳球的解决方案作为源代码。

在任务动画弹跳球中，我们只有一个属性需要动画。现在我们需要另一个：elem.style.left。

水平坐标按另一个规律变化：它不会“弹跳”，而是逐渐增加，将球向右移动。

我们可以再写一个animate。

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

代码

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

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

// animate left (moving to the right)
animate({
  duration: 2000,
  timing: makeEaseOut(quad),
  draw: function(progress) {
    ball.style.left = width * progress + "px"
  }
});
        

在沙盒中打开解决方案。