Форум программистов
 
Регистрация на форуме тут, о проблемах пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail, а тут можно восстановить пароль.

Как купить рекламу на форуме


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

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


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

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

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 Кб, 1 просмотров)
Leonid.76 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме 20000 рублей в месяц

Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Требуется разработка 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


Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru
Пеллетный котёл Emtas
котлы EMTAS