返回课程

带回调的动画圆圈

在任务 动画圆圈 中,展示了一个动画增长的圆圈。

现在假设我们不仅需要一个圆圈,还需要在圆圈内显示一条消息。消息应该在动画完成后(圆圈完全长大)出现,否则看起来会很丑。

在任务的解决方案中,函数 showCircle(cx, cy, radius) 绘制了圆圈,但没有提供跟踪圆圈何时准备好的方法。

添加一个回调参数:showCircle(cx, cy, radius, callback),在动画完成时调用。callback 应该接收圆形 <div> 作为参数。

以下是一个示例

showCircle(150, 150, 100, div => {
  div.classList.add('message-ball');
  div.append("Hello, world!");
});

演示

以任务 动画圆形 的解决方案为基础。