функции для анимации шариков

[Leonid.76]

Может быть кому то уже приходилось писать функции для анимации шариков ????

1. Нужно написать функцию появления шарика с анимацией, аналог функции StartDeleteAnimate, только наоборот - анимация появления, а не удаления. Для примера назовем её ShowBallAnimate
2. Цвет и позиция новых шариков случайным образом подбирается в функции SetBalls, поэтому там к значению цвета новых шариков прибавляем 100
3. Отрисовка идет в функции ShowBallsDelay.
Там смотрим, если цвет больше 100, то для отрисовки вызываем функцию ShowBallAnimate, не забываем перед отрисовкой отнять 100 от значения цвета.
Если меньше 100, но больше 0, то это шарик, который уже НЕ новый и для его отрисовки без анимации вызываем Show


Исходный интерфейс программы show.js

JavascriptВыделить код

/


//Я остановился на этом месте


// Запускаем анимацию появления шариков
function ShowBallAnimate(x, y, color)
{
let n = 0;
let spriteImage = new Image();
spriteImage.src = 'outballs.png';

// Количество кадров
let numberOfFrames = 10;
// Текущий кадр
let frame = 0;

let sx; //Смещение картинки шарика по горизонтали
let sy; //Смещение картинки шарика по вертикали


//Определяем смещение в зависимости от цвета и позиции шарика
sx = 0;
sy = (color-1)*LEN;

//Определяем целевые позиции в зависимости от цвета
let dx = x*CELL+4; //Позиция по горизонтали на игровом поле
let dy = y*CELL+7+BAR; //Позиция по вертикали на игровом поле


let timeStart = Date.now(); // время начала вывода кадра
const Interval = 60; // интервал вывода кадров

// Кадр анимации
function animate()
{
// Готовим следующий кадр
requestIdOut = requestAnimationFrame(animate);

if (Date.now() - timeStart > Interval)
{
timeStart = Date.now();

// Рисование кадра
ctx.drawImage(spriteImage, LEN * frame, sy, LEN,
LEN, dx, dy, LEN, LEN);

// Переход к следующему кадру
frame++;
if (frame == numberOfFrames)
{
cancelAnimationFrame(requestIdOut);
ClearBall(x, y);
}
}
}

// Запускаем анимацию
requestAnimationFrame(animate);
}


//??????????????????????????????????? ??

function delay(ms)
{
// ваш код
?????????????????????


}

delay(3000).then(() => alert('выполнилось через 3 секунды'));