Пример кода для реализации эффектов анимации машины гашапон с использованием холста

В мгновение ока я проработал два месяца стажером. Каждый месяц в компании проводится мероприятие, посвященное членству. Задача этого месяца — провести лотерею гашапонных машин. Есть интерфейсы для данных и так далее, и что такое. осталось на передке Самой большой задачей было просто реализовать анимацию гашапонной машины.

Я был рад найти в Интернете анимацию машины гашапона, но обнаружил, что она напрямую использует анимацию CSS для написания анимации гашапона. Мне это не очень понравилось, поэтому я решил использовать холст для рисования. случайная анимация гашапона. Сначала я написал простую демонстрационную версию машины для гашапона и предварительно ознакомился с эффектом.

Компоновка гашапонной машины относительно проста. Вам нужно только добавить некоторые элементы к основному фону. Самое главное — это тег Canvas. Все остальное не имеет значения.

 <div class=bg> <span id=message>Нажмите, чтобы нарисовать</span> <div class=lotterybg> <canvas id=myCanvas width=285px height=170px></canvas> <img src=img/lighting.png class =lighting/> </div></div><img src=img/start-btn.png id=start onclick=play()/><div class=award><span id=awardBall></span></div><img src=img/1.png id=ball1 class=imgSrc><img src=img/2 .png id=ball2 class=imgSrc><img src=img/3.png id=ball3 class=imgSrc><img src=img/4.png id=ball4 class=imgSrc>

Прикрепленная таблица стилей:

 body {margin: 0;padding: 0;border: none;}.bg {background: url(../img/bg.png) top no-repeat;размер фона: 100%;переполнение: скрыто;позиция: абсолютная ;ширина: 400 пикселей;высота: 100%;верхнее поле: 0;левое поле: 50%;-webkit-transform: трансформировать(-50%);-moz-transform: транслировать(-50%);-ms-transform: транслировать(-50%);-o-transform: транслировать(-50%);трансформировать: транслировать(-50% );}#message {position: Absolute;text-align: center;height: 25px;font-size: 22px;margin-top: 110px;margin-left: 50%;-webkit-transform: транслировать(-50%);-moz-transform: транслировать(-50%);-ms-transform: транслировать(-50%);-o-transform: транслировать(-50%) ;transform: Translate(-50%);}.lotterybg {background: url(../img/lotterybg.png) top no-repeat;background-size: 100%;переполнение: видимое;ширина: 80%;высота: 100%;верхнее поле: 160 пикселей;левое поле: 50%;-webkit-transform: Translate(-50%);-moz-transform: Translate(- 50%);-ms-transform: транслировать(-50%);-o-трансформировать: транслировать(-50%);трансформировать: translate(-50%);}#myCanvas {position: Absolute;border: none;width: 285px;height: 170px;margin-top: 15px;margin-left: 50%;-webkit-transform: Translate(-50% );-moz-transform: транслировать(-50%);-ms-transform: транслировать(-50%);-o-transform: Translate(-50%);transform: Translate(-50%);}.lighting {display: block;max-width: 99%;margin-top: 0;margin-left: 0;}#start {position: Absolute ;z-index: 3;ширина: 202 пикселей;верхнее поле: 413 пикселей;левое поле: 50%;-webkit-transform: трансформировать(-50%);-moz-transform: транслировать(-50%);-ms-transform: транслировать(-50%);-o-transform: транслировать(-50%);трансформировать: транслировать(-50% );}.imgSrc {display: none;position: Absolute;}.award {position: Absolute;border: none;width: 60px;height: 200px;top: 470px;margin-left: 50%;-webkit-transform: Translate(-50%);-moz-transform: Translate(-50%);-ms-transform: Translate(-50%);-o-transform: перевести(-50%);преобразовать: перевести(-50%);}

На этом макет завершен, и следующая основная работа – прорисовка изображения на холсте.

Сначала определите различные переменные:

 var Canvas = document.getElementById('myCanvas');var ctx = Canvas.getContext('2d');var ball1 = document.getElementById('ball1');//Объект изображения var ball2 = document.getElementById('ball2') );//Объект изображения var ball3 = document.getElementById('ball3');//Объект изображения var ball4 = document.getElementById('ball4');//Объект изображения var ballList = [ball1, ball2, ball3, ball4];//Массив объектов изображения var ballNum = 4;//Количество шариков в автомате гашапон var AwardList = [ ];//Сбор маленьких шариков в автомате гашапон var timer;//Таймер var Award = document.getElementById('awardBall'); document.getElementById('сообщение');

Каждый гашапон в гашапонной машине является объектом, поэтому вам необходимо определить объект гашапона:

 function Ball(index, img) { this.r = 30;//Радиус шара this.x = this.rand(canvas.width - this.r * 2);//Начальная абсцисса шара this. y = this .rand(canvas.height - this.r * 2);//Начальная вертикальная координата шара this.color = index;//Цвет шара, представленный индексом this.img = img; //Материал мяча do { this .speedX = this.rand(20) - 10; while (this.speedX < 5); // абсцисса мяча меняет скорость do { this.speedY = this.rand(20) - 10; while (this.speedY < 5); );//Вертикальная координата мяча меняет скорость}

Индекс значения входящего объекта гашапона — это цвет шара, представленный числами от 1 до 4, а img — это объект изображения, используемый для рисования гашапона.

На предыдущем шаге в гашапон были добавлены атрибуты. Следующий шаг — добавить в гашапон методы:

 Ball.prototype = { rand: function (num) {//Случайное число return Math.random() * num }, run: function () {//Функция движения мяча this.x += this.speedX; += this.speedY; if (this.x > Canvas.width - this.r * 2) {//Мяч попадает в правую границу, скорость по оси абсцисс становится отрицательной this.speedX = -this.speedX; .x < 0) {//Мяч попадает в левую границу, и скорость по оси абсцисс становится положительной this.speedX = Math.abs(this.speedX } if (this.y > Canvas.height - this.r * 2) { //Когда мяч достигает нижней границы, скорость по ординате становится отрицательной this.speedY = -this.speedY } if (this.y < 0) {//Когда мяч достигает верхней границы, скорость по ординате становится положительной this; .speedY = Math.abs(this.speedY); } ctx.drawImage(this.img, this.x, this.y, 60, 60);//Нарисуйте мяч}}

Основная цель — добавить функцию движения к прототипу объекта гашапона. Функция функции движения — заставить гашапон двигаться в соответствии с его скоростью и отскакивать при касании границы.

Следующий шаг — поместить гашапон в гашапоновую машину:

 function init() {//Инициализация for (let i = 0; i < ballNum; i++) {//Случайно генерируем шары разных цветов let index = Math.floor(4 * Math.random()); = new Ball(index, ballList[index]);//Новый объект мяча} window.clearInterval(timer);//Очистить таймер timer = setInterval(function () { ctx.clearRect(0, 0, Canvas.width, Canvas.height);//Очистить холст for (let i = 0; i < AwardList.length; i++) { AwardList[i].run();//Заставить мяч двигаться}, 15) ; }

Таким образом в гашапонной машине уже есть маленькие шарики.

Основной процесс запуска гашапона — нажатие кнопки. Машина для гашапона уменьшит количество яиц гашапона и получит соответствующие яйца гашапона. Выигрыш будет следующим:

 function play() { if (awardList.length === 0) {//В призовом фонде нет шара alert('Начните снова!'); message.innerText = 'Нажмите, чтобы разыграть'; else { window.clearInterval(timer);//Очистить таймер let r = AwardList.pop();//Уменьшить количество шаров в пуле наград timer = setInterval(function () { ctx.clearRect(0, 0, Canvas.width, Canvas.height);//Очистить холст for (let i = 0; i < AwardList.length; i++) { AwardList[i].run();//Заставить мяч двигаться}, 15) ; переключатель (r.color) {// анимация падения мяча, случай 0: Award.setAttribute('class', 'dropBall1'); случай 1: Award.setAttribute('class', 'dropBall2'); случай 2: награда.setAttribute('класс', 'dropBall3'); случай 3: награда.setAttribute('класс', 'dropBall4'); setTimeout(function () { // Гашапон выполнен успешно и выдает запрос Award.setAttribute('class', ''); switch (r.color) { case 0: message.innerText = 'Purple ball Break '; 1: message.innerText = 'Зеленый шар!'; случай 2: message.innerText = 'Желтый шар!'; случай 3: message.innerText = 'Красный шар!'; 1100);

Анимация падения гашапона здесь завершена с использованием ключевых кадров CSS-анимации:

 .dropBall1 {content: ;позиция: абсолютная;слева: 0;сверху: 0;ширина: 60 ​​пикселей;высота: 60 ​​пикселей;дисплей: блок;фон: URL(../img/1.png) без повтора;размер фона : содержат;анимация: отпустить 1 с замедлением вперед; -webkit-animation: отбросить 1 с замедлением вперед;}.dropBall2; {content: ;позиция: абсолютная;слева: 0;сверху: 0;ширина: 60 ​​пикселей;высота: 60 ​​пикселей;дисплей: блок;фон: URL(../img/2.png) без повторения;размер фона: содержать ;animation: отбросить замедление вперед на 1 секунду;-webkit-animation: отбросить замедление вперед на 1 секунду;}.dropBall3 {content: ;position: абсолютный;слева: 0;сверху: 0;ширина: 60 ​​пикселей;высота: 60 ​​пикселей;дисплей: блок;фон: URL(../img/3.png) без повтора;размер фона: содержать;анимация: падение на 1 с легкость -out вперед;-webkit-animation: drop 1s easy-out вперед;}.dropBall4 {content: ;position: Absolute;left: 0;верх: 0;ширина: 60 ​​пикселей;высота: 60 ​​пикселей;дисплей: блок;фон: url(../img/4.png) без повтора;размер фона: содержать;анимация: падение на 1 секунду вперед; -webkit-animation: отбросить 1 секунду вперед;}@keyframes drop { 0% { Transform: Scale(0.7); 50% { Transform: Scale(1) } 51% { Transform: TranslateY(0px); 100% { Transform: TranslateY(100px }}@-webkit-keyframes Drop { 0% { -webkit-transform: Scale; (0,7); } 50% { -webkit-transform: масштаб (1 } 51% { -webkit-transform: TranslateY(0px); 100% {-webkit-transform: TranslateY(100px);

Конечно, вам нужно добавить init(); в конце, чтобы запустить гашапонную машину. На этом этапе эта простая гашапонная машина завершена, и можно предварительно просмотреть эффект.

Хотя эта демонстрация относительно проста, все же есть некоторые моменты, на которые следует обратить внимание, и некоторые области, которые можно оптимизировать.

Примечание

объект изображения

Эти теги img в html:

 <img src=img/1.png id=ball1 class=imgSrc><img src=img/2.png id=ball2 class=imgSrc><img src=img/3.png id=ball3 class=imgSrc><img src=img/4.png id=ball4 class=imgSrc>

Стиль также пишется как display:none;. Это написано для получения объекта img в js. Конечно, вы также можете прописать эти теги img прямо в js-файле, не прописывая их в html:

 вар img = новое изображение () img.src = 'img/1.png';

Таким образом вы также можете получить объект img, а также его можно использовать для рисования гашапона.

Таймер очищается в коде перед его вызовом. Целью этого является то, что, если таймер не очищен, таймер будет продолжать отсчет, в результате чего анимация становится все более и более странной.

При рисовании на холсте изображение может быть нечетким или увеличенным. Эту ситуацию можно решить, установив атрибуты ширины и высоты тега холста такими же, как атрибуты ширины и высоты стиля.

Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.