Реализация эффекта фейерверка холста серии три
Пишите вверху:
Увы, время летит так быстро, прошло уже полмесяца с тех пор, как я в последний раз писал демо, изначально думал, что буду писать статью каждую неделю, но некоторое время назад был очень занят работой, поэтому демо вывода нет (хе-хе, втайне я нашел для себя оправдание, я не знаю, смогу ли я продолжать заниматься производством в будущем...). На этот раз я написал кое-что о холсте, и я использовал холст, чтобы написать демонстрацию запуска фейерверков. Я чувствую, что напишу демку или две и сделаю окончательный конспект этой штуки.В конце концов, написать демку не проблема.Я должен обобщить канву. Ну, без лишних слов, давайте сразу к делу
Кстати, большие ребята не забывают даватьмой блогМол, попроси звездочки~
Дисплей достижений
Гит-адрес:
Идеи реализации:
Как обычно, мы по-прежнему используем способ задавать вопросы, чтобы показать процесс реализации этой демонстрации фейерверков.При чтении друзья также могут представить, как этого добиться с помощью этих вопросов.
- Генерация и исчезновение фейерверков в основном связаны с тем, как добиться эффекта падающей звезды?
- После того, как фейерверк исчезнет, как произвести эффект взрыва и разлета?
- Как рассеянный фейерверк создает эффект «гравитации» и исчезновения фейерверка?
По сути, если вы выполнили три вышеуказанных шага, ваш эффект фейерверка готов, ха-ха, это очень просто. Ниже мы решим это один за другим.
Подробное описание:
Производство и исчезновение фейерверков:
видел меня раньшеОдин из холстов серииДрузья или студенты, знакомые с анимацией холста, должны знать, как перемещается элемент, нарисованный на холсте. Мы постоянно используем функцию clearReact, чтобы очистить анимацию от предыдущего кадра. На самом деле, а что, если мы не будем полностью очищать анимацию предыдущего кадра, а «покроем» его более прозрачным цветом? Хахаха, это очень просто, на самом деле просто код:
ctx.fillStyle = 'rgba(0,0,0,0.05)';Если вы хотите, чтобы хвост был длиннее, вы можете уменьшить непрозрачность, а если вы хотите, чтобы хвост был короче, вы можете увеличить непрозрачность. Далее поговорим об исчезновении фейерверков. Для каждого фейерверка мы объявляем его как объект, который включает в себя размер фейерверка, положение фейерверка и функцию движения для рисования фейерверка. Среди них также есть переменная исчезнуть, которая используется для обозначения того, что фейерверк исчезает.Первоначальное значение равно false, что указывает на то, что фейерверк все еще «жив». Мы можем установить некоторые граничные условия.В этой демонстрации используется граница расстояния, то есть, когда фейерверк выходит за пределы установленного диапазона, для переменной исчезновение устанавливается значение true, что указывает на то, что фейерверк опустился на колени. Поскольку я хочу непрерывно генерировать фейерверки, я использовал массив для хранения количества существующих фейерверков. Новые фейерверки постоянно добавляются в массив, а исчезающие фейерверки постоянно удаляются из массива. Вставьте мой код:
if (fireArr.length) {
fireArr.forEach(function(item, index) {
var marginWidthLeft = parseInt(getRandom(0, canvas.width/5), 10);
var marginWidthRight = parseInt(getRandom(1500, canvas.width), 10);
var marginHeight = parseInt(getRandom(0, 300), 10);
if (item.x >= marginWidthRight || item.x <= marginWidthLeft || item.y <= marginHeight) {
item.disappear = true;
}
if (!item.disappear) {
item.draw();
item.move();
} else {
var removeFire = fireArr.splice(index, 1);
fragments.push(removeFire);
if (fragments.length) {
fragments.forEach(function(item, index) {
if (item[0].boomJudge) {
item[0].boom();
item[0].boomJudge = false;
}
})
}
fireArr.push(createRandomFire(CreateFireObj));
}
})
}Здесь я задаю левую и правую и верхнюю границы, которые являются случайными значениями в определенном диапазоне. Когда значение discard становится истинным, соответствующий элемент удаляется из массива, а затем добавляются новые элементы, чтобы обеспечить фиксированное количество фейерверков на странице.
Фейерверки исчезают и возникает эффект взрыва:
В этом сложность и ключевой момент этой демонстрации. Почему так много маленьких фейерверков одновременно, когда фейерверки исчезают? Как взорвался маленький фейерверк?Поначалу я тоже был в замешательстве, но, подумав об этом, у меня постепенно появились некоторые идеи.
Для каждого фейерверка я добавил стрелу с функцией взрыва, Функция этой функции стрелы состоит в том, чтобы мгновенно генерировать случайное количество небольших фейерверков, когда фейерверк исчезает или взрывается (на самом деле, мы можем произвольно контролировать это число в пределах диапазона. ). Для каждого фейерверка его цвет является случайным, и когда он рождается, я создаю целевое местоположение, куда он может попасть. Целевое положение - это положение взрыва фейерверка в качестве центра, а радиус является случайным.Используя уравнение круга, задайте случайный угол, чтобы после образования небольшой искры он мог находиться в случайном положении появится линия дуги с положением взрыва фейерверка в центре и произвольным радиусом. Для облегчения управления каждый фейерверк имеет переменную массива fragArr, которая используется для хранения этих недавно сгенерированных небольших фейерверков. Каждый небольшой фейерверк также является объектом.Также, как и фейерверк, маленький объект фейерверка хранит такую информацию, как размер, положение, функция движения, функция рисования и положение окончания движения фейерверка. Соответствующий код выглядит следующим образом:
//烟花爆炸，产生碎片
this.boom = function() {
var scope = Math.round(getRandom(10, 40));
for (var i=0; i<scope; i++) {
var angel = getRandom(0, 2*Math.PI);
var range = Math.round(getRandom(50, 300));
var targetX = this.x + range*Math.cos(angel);
var targetY = this.y + range*Math.sin(angel);
var r = Math.round(getRandom(120, 255));
var g = Math.round(getRandom(120, 255));
var b = Math.round(getRandom(120, 255));
var color = 'rgb(' + r + ',' + g + ',' + b + ')';
var frag = new CreateFrag(this.x, this.y, color, targetX, targetY);
this.fragArr.push(frag);
}
}Приземление разбросанных фейерверков и их исчезновение:
Следуя вышеизложенному, в момент взрыва мы использовали функцию стрелы для генерации случайного количества небольших фейерверков, и каждый маленький фейерверк был сгенерирован функцией CreateFrag. Давайте сосредоточимся на функции движения маленькой искры в этой функции, потому что она создает эффект падения маленькой искры, как «гравитация». Код выглядит следующим образом:
function CreateFrag(x, y, color, tx, ty) {
var that = this
that.x = x;
that.y = y;
that.ty = ty;
that.tx = tx;
that.color = color;
that.disappear = false;
that.draw = function() {
ctx.save();
ctx.beginPath();
ctx.fillStyle = that.color;
ctx.fillRect(that.x, that.y, 2, 2);
ctx.restore();
}
that.move = function() {
that.ty = that.ty + 0.5;
var dx = that.tx - that.x, dy = that.ty - that.y;
that.x = Math.abs(dx) < 0.1 ? that.tx : (that.x + dx*0.01);
that.y = Math.abs(dy) < 0.1 ? that.ty : (that.y + dy*0.01);
if (dx == 0 || dy == 0 || that.y >= 700 || that.x <= 300 || that.x >= 1700) {
that.fragDisappear = true;
}
}
}Функция принимает пять параметров, последние два tx, ty представляют собой координаты x, y своей целевой точки, мы задаем разницу между его текущим положением и целевой позицией, dx и dy, в этой разнице Когда диапазон не превышает при заданном пороге (здесь мы даем 0,1) координаты абсцисс и ординат малых искр увеличиваются в 0,01 раза от dx и dy Чем меньше кратное, тем лучше детали «взрыва» фейерверка. Этому мы придаем более подходящее значение. «Падение гравитации» Little Fireworks на самом деле выигрывает от простого кода, а именно: that.ty = that.ty + 0,5. Если такого кода нет, маршрут движения Сяохуахуа представляет собой прямую линию После добавления этого предложения это эквивалентно увеличению скорости его вертикальной скорости, что эквивалентно приданию ему вертикального ускорения, чтобы он мог его видеть. похоже, что он постоянно падает под действием «силы тяжести». Что касается исчезновения фейерверков, то по сути принцип исчезновения фейерверков аналогичен принципу исчезновения фейерверков.При достижении фейерверками определенной границы они исчезают, но разница в том, что когда один из фейерверков в группе фейерверков достигает граничное условие, я буду Весь массив, где расположены фейерверки, вместо того, чтобы удалять один фейерверк по отдельности, вставлю код:
var removeFire = fireArr.splice(index, 1);
fragments.push(removeFire);
if (fragments.length) {
fragments.forEach(function(item, index) {
if (item[0].boomJudge) {
item[0].boom();
item[0].boomJudge = false;
}
})
}
if (fragments.length) {
fragments.forEach(function(item1, index1) {
item1[0].fragArr.forEach(function(item2, index2) {
if (item2.fragDisappear) {
fragments.splice(index1, 1);
}
item2.draw();
item2.move();
})
})
}В массиве fragments хранятся удаленные фейерверки, здесь следует обратить внимание на то, что во фрагментах.forEach используется item1[0] вместо item1, так как при выполнении операции сохранения сброшенных фейерверков, то есть var removeFire = fireArr. соединение (индекс, 1);
фрагменты.push(removeFire); Фрагменты push — это возвращаемое значение соединения fireArr, которое представляет собой массив с одним элементом.
После такой простой трилогии наш фейерверк может великолепно взорваться в воздухе. А теперь оглянитесь назад и убедитесь, что это очень просто.
Напишите в конце:
Вышеизложенное предназначено только для достижения эффекта простого взрыва фейерверка, на самом деле есть много мест, которые можно улучшить. Например, в процессе подъема фейерверка мы не можем ограничивать его движение в определенном диапазоне, но за счет воздействия «гравитации», когда его вертикальная скорость снижается до 0, может производиться эффект взрыва. Также мы можем добавить фрагмент аудио, имитировать звук взрыва фейерверка и т. д. Все эти области стоит улучшить. Наконец, спасибо, что прочитали эту часть моего обмена в вашем напряженном графике, пожалуйста, не забудьте датьмой блогЛайк, ваши лайки станут для меня неисчерпаемой мотивацией двигаться вперед~