Guest
Мой Telegram: В этом видео мы будем использовать HTML5 Canvas и Javascript классы для создания анимации (1000 хаотично двигающихся окружностей). Каждая окружность: 1) Появляется в случайной точке экрана 2) Двигается с разной скоростью 3) Окрашена в случайный цвет 4) При столкновении с границей экрана - отбивается и летит в противоположную сторону Это видео - хорошая практика по работе с ванильным Javascript. Вы научитесь: 1) Использовать HTML5 Canvas, чтобы рисовать простые элементы. 2) Использовать “ванильный“ JS для создания анимации. Вы также поймете, зачем нужны Классы в Javascript, и как они помогают нам писать меньше кода. Репозиторий проекта: ES6 Классы (что такое и как работают): 00:00 - Что мы будем делать 01:14 - Структура проекта 02:16 - Получаем и готовим наш элемент Canvas 04:41 - Рисуем простые элементы 07:01 - Рисуем простую окружность 09:20 - Создаем 100 окружностей с разными координатами по всей ширине и высоте экрана 12:46 - Как работает анимация (метод requestAnimationFrame) 15:56 - Анимируем движение окружности по оси X 18:01 - Эффект рекошета от правой и левой границ экрана 21:02 - Анимируем движение окружности по оси Y 22:23 - Задаем случайные координаты при создании окружности 23:23 - Задаем случайные значения ускорения 25:48 - Используем классы для создания 1-й окружности 28:43 - Используем классы для анимирования 1-й окружности 31:27 - Создаем классы для создания 100 анимированных окружностей с индивидуальными свойствами 35:34 - Сужаем полотно анимации на величину диаметра окружности 37:28 - Добавляем случайный цвет при создании каждой из 1000 окружностей Мои Курсы:Gatsby JS (полный курс): React для начинающих: Все мои курсы ( исходные файлы): Подписывайся на соц сети: Telegram: VK: Instagram: Мой блог о веб-разработке:
