Проект 3 #3 Шутер - Круглые числа. Анимация рамки на чистом CSS

#javascript #html #css #браузерныеигры #созданиеигр #урокипрограммирования #2dигры #анимацияCSS Сообщество Вконтакте: https://vk.com/club212762429 Ссылка на файлы: https://disk.yandex.ru/d/y0tdJ1pxW4nlxg Уроки JavaScript: https://пвеб.рф/lessons_JS/les1 Сайт конкурса интерактивных страниц «Планета Веб»: https://пвеб.рф Приветствую на нашем виртуальном уроке. С вами «Планета Веб» - конкурс интерактивных страниц. Мы создаем 2d игру «Круглые числа». Это шутер, достаточно простая программа. Вместе с вами мы создаем игры двух типов: с применением DOM-объектов и с помощью холста Canvas. Второй вариант более правильный и функциональный, можем смело сказать, что это профессиональный подход. Пока мы создавали игры с помощью DIV-блоков. Такой подход имеет ограничения: например, по количеству создаваемых объектов или скорости, заметно подвисание, особенно, если компьютер слабый. В целом, рассматриваем их в качестве развлечения. К плюсам можно отнести возможность применения gif-анимации. Но если внимательно понаблюдать, то видно, что анимация запускается не с начала. То есть мы не можем при выстреле каждый раз запускать gif-ку с первого кадра. В браузере она проигрывается по своему внутреннему таймеру и в момент появления на экране начнется с произвольного места. Это неудобно. Когда мы хотим в момент определенного события начинать анимацию с начала, такой подход нас не удовлетворит. О том как можно воспроизвести различные переходы с первого кадра мы сегодня и поговорим. В втором уроке мы добавили функцию вращения объектов, удалили таймеры и провели небольшой анализ ошибок. На сегодняшнем уроке мы отвлечемся от программирования и попробуем оформить анимацию на чистом CSS. Сегодня работаем с файлом стилей. Для того, чтобы разобраться с анимацией рамки, откроем проект-заготовку. Нас интересует строка border-radius, радиус округлости рамки. Если мы ставим 50%, в таком случае все углы сглаживаются одинаково. Получается круг. Если мы укажем второе значение, то углы распределятся по диагонали. Левый верхний и правый нижний 50%, а два других по 30. Добавим еще 2 параметра. 10% и 70. Теперь каждый угол с левого верхнего по часовой стрелке будет иметь свою округлость. 50, 30, 10 и 70% соответственно. Мы можем сделать капельку, указав один угол 0%. Остальные углы сделаем по 50%. Капелька - как указатель на ГИС-картах. Идем дальше. Если установить дробь, то мы будем обращаться уже к полусторонам, прилегающих углов. Первые четыре числа — это верхние и нижние полустороны, а после дроби — это правые и левые. Последовательность углов идет также слева и по часовой стрелке. 10 — это правый верхний угол, это общая сторона с 70%. Можем потренироваться. Поменяем значения и сразу проверим результат. Если мы несколько раз поменяем варианты искривления рамки, плавная анимация получится интересной. Переходим к проекту. Для того, чтобы анимированная рамка была видна, нужно ее добавить в первоначальному компоненту. Анимация будет у противника. Сделаем ее прозрачную. Ширина 1 пиксель, сплошная рамка, rgba с альфа-каналом. Цвет не важен, пусть будет черный — все нули, прозрачность 0. Добавляем класс anim_border, имя анимации аналогичное, Время длительности 2 секунды. Создаем ключевые кадры с одноименным названием. Первый ключевой кадр 0%, Сделаем видимой рамку — цвет красный, цвет фона тоже делаем красным, масштаб объекта увеличим в полтора раза, а сам томат постараемся оставить примерно такого же размера, уменьшим его до 80%. Задаем первое искривление рамки. Для верхних сторон, прилегающих к углам сделаем 30 и 70%, для нижних — 70 и 30. Правый и левый верхние по 30%, нижние правый, левый — по 70. Всего мы сделаем 4 ключевые точки: 0, 25, 50 и 75%. Для каждой поменяем искривление. Тут можно поэкспериментировать, путь к творчеству и фантазии безграничен. Путем научного тыка подбираем наиболее интересную схему изменения положения рамки. Все перетекания будут происходить плавно от одного к другому. В конце анимации изменения класса anim_border не останутся, они исчезнут. Вот и все!!! Поздравляю нас, третий проект готов!!!

Видео Проект 3 #3 Шутер - Круглые числа. Анимация рамки на чистом CSS автора Планета Веб