Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 28.09.2020, 18:18   #1
Leonid.76
Новичок
Джуниор
 
Регистрация: 28.09.2020
Сообщений: 2
Печаль функции для анимации шариков

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

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 секунды'));
Вложения
Тип файла: doc Функция для появления шарика.doc (78.5 Кб, 5 просмотров)
Leonid.76 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Требуется разработка MVP для стартапа kairini Фриланс 1 24.09.2020 12:49
Разработайте класс для работы с матрицами. h4dye Помощь студентам 1 23.09.2020 16:11
Разработайте класс для работы с матрицами. h4dye Lazarus, Free Pascal, CodeTyphon 0 22.09.2020 23:03
Приложение для Android konstantin_77 Общие вопросы по Java, Java SE, Kotlin 0 12.09.2020 17:01