назад до уроку

Коло анімоване за допомогою функції.

У завданні Анімований круг показана анімація зростання кола.

Припустимо, що нам потрібно показати повідомлення всередині нього. Повідомлення має з’явитися після завершення анімації (коли коло повністю виросло), інакше це виглядатиме погано.

У вирішенні завдання функція showCircle(cx, cy, radius) малює коло, але не дає можливості відстежити, коли воно готове.

Додайте аргументом функцію зворотного виклику: showCircle(cx, cy, radius, callback), яка буде викликатися після завершення анімації. Вона має отримувати коло <div> як аргумент.

Ось приклад:

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

Демо:

За основу візьмемо рішення задачі Анімований круг