это снова мы! 10 минут, чтобы реализовать битву WeChat с "взрывающимся дерьмом"

Привет всем, я Qiufeng Недавно WeChat выпустил новые функции (обновлено до WeChat 8.0.6). Самой популярной является функция «взрыва дерьма», и различные группы играли функцию взрыва дерьма.

Я не знаю, было ли у вас когда-нибудь такое время, когда вы были ребенком в канун Нового года, вы видели, как дети по соседству занимаются такими неприятными забавами Я не ожидал, что WeChat сделает онлайн-версию этого. Это функциональное изобретение даже высмеяло человека, создавшего продукт. Но не напрасно сделать функцию, чтобы весь народ веселился.

Когда до этого обновлялся WeChat 8.0, я тоже написал статью«Научите вас осознавать особый эффект фейерверка смайликов WeChat 8.0, «взрывающегося»». В предыдущем посте я использовалcanvasЧтобы добиться того, чтобы последний раз кто-то прокомментировал в конце статьи, можно пройтиlottie Для достижения подобных функций, на самом деле, меня это очень интересует, но я не пробовал, на этот раз я хочу использовать новый методlottieдля реализации этой функции.

Опыт эффекта:

пример: Осенний бриз. Синий/мы болтаем - Fe CE…

Адрес на гитхабе:

GitHub.com/flower1995116/…

Шаги по разборке

Любой объект состоит из более мелких объектов, поэтому, если мы хотим добиться вышеперечисленных функций, мы, естественно, должны делать это шаг за шагом. Я грубо разобрал вышеуказанные функции на следующие четыре шага. Каждая из них не слишком сложна, и можно сказать, что фронтенд Xiaobai может легко ее выполнить.

1. Сбрасывать бомбы

На этом шаге мы можем использовать знание квадратичной функции для записи пути траектории (аналогично y =$x^2$), затем пройтиtween.jsсделать анимацию анимации.

2. Взрыв бомбы

использоватьlottieдля достижения анимации.

3. Баба был взорван

использоватьcssРеализация анимации

4. Все трясутся

использоватьcssРеализация анимации

Суммировать

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

Выполнение

1. Сбрасывать бомбы

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

Во-первых, давайте взглянем на определение квадратичной функции.

Как правило, формау=ах²+bх+с (а≠0)(а, б, впостоянный)изфункцияназывается квадратичной функцией.

Вот как это выражается на изображении.

Очевидно, это очень похоже на траекторию, которую мы хотим.

Потому что в нормальной декартовой системе координат положительная ось y направлена ​​вертикально вверх, а положительная ось x - горизонтально вправо. Для позиционирования dom верхнее левое значение равно (0, 0), горизонтальное и правое — это положительная ось x, а вертикальная и нижняя — положительная ось y. Он просто переворачивает систему координат по оси x.

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

Наши 3 точки: (0,H), (H,0), (3H, 3H). Мы можем получить следующую формулу, подставив общий термин:

затем решить

получить:

Поэтому нам достаточно получить из "дерьма" высоту высшей точки бомбы, чтобы нарисовать всю траекторию.

Теперь предположим, что наша бомба представляет собой небольшой квадрат 10 пикселей * 10 пикселей, установите начальную точку на (300, 300) и конечную точку на (0, 100) H = 100, квадратичная функция, которую мы получаем на данный момент:

Мы можем получить следующую анимацию траектории:

Для рендеринга каждого кадра анимации мы используем известную библиотеку анимации твинов.Tween.jsТвининг (анимация) — это концепция, позволяющая плавно изменять свойства объекта. Вы просто сообщаете ему, какие свойства изменить, какие окончательные значения они должны иметь, когда анимация завершится, и сколько времени это займет, а движок анимации позаботится о вычислении значений от начальной точки до конечной точки. .

var coords = { x: 300 };  // 起始点 为 x = 300
var tween = new TWEEN.Tween(coords)
	.to({ x: 0  }, 1000) // 终点为 x = 0, 并且这个动作将在1秒内完成
  .easing(TWEEN.Easing.Linear.None)	// 匀速

Благодаря приведенному выше определению мы можемonUpdate, получить значение каждого измененияxзначение, а затем получить y с помощью приведенной выше квадратичной функции, а затем обновить маленький квадрат.

tween.onUpdate(function() {
    var x = coords.x;
    var y = 1/120 * x * x - 11/6 * x + 100;
		box.style.setProperty('transform', 'translate(' + x + 'px, ' + y + 'px)');
})

На данный момент в эффекте, который мы закончили, все еще чего-то не хватает, как и в рисовании, мы только нарисовали ему кости, нам нужно раскрасить упаковку, затем нам нужно сделать только следующие две вещи, и тогда мы можем это увидеть. работает~

1. Заменяем блок на бомбу, форма бомбы очень простая, можем вырезать из слоя через пс.

2. Измените угол, под которым он движется.

Полный код этого раздела:GitHub.com/flower1995116/…

2. Взрыв бомбы

Потом расскажу про эффект взрыва бомбы.Я тоже выше говорил.Хочу заменить наlottie писать анимацию, тоlottieЧто тогда?

Lottie — это библиотека, которая может анализировать анимацию, созданную с помощью AE (которую необходимо экспортировать в формат json с помощью bodymovin), поддерживающую веб, ios, android и нативную реакцию. На веб-стороне библиотека lottie-web может разобрать экспортированный json-файл анимации и отрисовать анимацию на нашу страницу в виде svg или canvas.

тогда я пойдуlottiefiles.com/нашел одинjsonФайл эффекта взрыва.

И его написание очень простое, просто нужно представитьlottie , а затем позвонитеbodymovin.loadAnimationметод.

<script src="https://cdn.bootcdn.net/ajax/libs/lottie-web/5.7.8/lottie.min.js"></script>
</head>
<body>
<div class="bodymovin"></div>
<script>
    const animation = window.bodymovin.loadAnimation({
        container: document.querySelector('.bodymovin'), // 要包含该动画的dom元素
        renderer: 'svg', // 渲染方式，svg、canvas、html（轻量版仅svg渲染）
        loop: true, // 是否循环播放
        autoplay: true, // 是否自动播放
        path: './bomb.json', // 动画json文件路径
    });
</script>

Таким образом, нам нужно только вызвать эффект взрыва сразу после завершения параболы, иtween.jsтакже дает мне метод событияonComplete. нам просто нужноonCompleteВ обратном вызове пусть начнется анимация взрыва.

tween.onComplete(function () {
  // 写爆炸动画
})

Полный код этого раздела:GitHub.com/flower1995116/…

3. Баба был взорван

3.1 Форма

Точно так же бомба использует вырез PS, чтобы вырезать "Бабу" в прозрачный слой, вот так. (Ничего страшного, что есть небольшая картавость, собственно баба не такая уж и большая, так что картавость не так просто увидеть, можно и поправить тонкой настройкой)

.feces {
  position: absolute;
  background-image: url(./feces.png);
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  width: 80px;
  height: 80px;
  transform-origin: center;
}

// 创建一个粑粑元素
function createfeces(scale = 1) {
  const fece = document.createElement('div');
  fece.className = 'feces';
  // 由于粑粑有大有小，有方向，因此预留了值。
  const symbol = Math.random() > 0.5 ? 1 : -1;
  fece.style.transform = `scale(${scale * 1.1}) rotate(${symbol * 20 * Math.random()}deg)`
  return fece;
}

3.2 Местоположение

Мы видим, что Баба вылетела из щели, в основном вылетело 7 Баб, средняя самая большая, а остальные по мере удаления от центра Бабы меньше, расположение похоже на круг, но не так регулярно.

Таким образом, мы можем сначала реализовать самый простой способ, заключающийся в окружности. Круг равен 360°, нам просто нужно разделить его на 6 равных частей. Всего мы окружаем 6 Баба, так что между каждым из них 60°.

Поскольку наша бомба наверху имеет площадь примерно 300*300, яКоординаты центра задаются как (150,150), а затем случайным образом сгенерировать точку x 70 ~ 230, вы можете рассчитать значение y, после определения первой точки, в соответствии с углом между каждой точкой 60 °, вы можете рассчитать оставшиеся 5 точек.

Поскольку трудно вычислить центр круга с центральной точкой (150 150), я переместил центральную точку в (0, 0) для расчета и, наконец, переместил все вычисленные точки на ось x и ось y. перевод 150.

// 计算要生成的多个粑粑的位置
// 传入的参数num为要生成的粑粑的数量
function randomPosition(num) {
  const radius = 80; // 圆半径
  const randomX = Math.random() * radius // 任取0到半径中的任意一个x
  const y = Math.round(Math.sqrt(radius * radius - randomX * randomX)); // 确定一个第一象限在圆上的点
  const radian = Math.atan(y / randomX); // 这个点的弧度值

  const step = Math.PI * 2 / num; // 每坨屎间距的弧度值

  return new Array(num).fill(0).map((item, index) => {
    const r = (index * step + radian)
    // 将弧度为0 - 2 * PI
    const tr = r > Math.PI * 2 ? r - Math.PI * 2 : r < 0 ? r + Math.PI * 2 : r;
    return {
      x: radius * Math.sin(tr),
      y: radius * Math.cos(tr),
    }
  })
            
}

Дальше рисуем по этой идее, рисуем 6 коржей, а потом переводим 150 на ось х и ось у соответственно.

randomPosition(6).map(item => ({ x: item.x + 150, y: item.y + 150 })) // 此处你也定义多于6个

Кажется немного вонючим, но все они одного размера, так что нам нужно с этим разобраться, масштабировать размер по расстоянию от центра, и грубо написать единицу, ведь радиус круга равен 80, а каждый увеличение на 80, размер торта становится 2/3 от первоначального.

const dis = Math.sqrt((end.x - 150) * (end.x - 150) + (end.y - 150) * (end.y - 150)); // 由于此时已经平移 150 ，因此需要计算距离中心点的距离
const r = Math.pow(2/3, dis / length); // 要缩放的比例

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

function randomPosition(num) {
...
return new Array(num).fill(0).map((item, index) => {
  const r = (index * step + radian)
  const tr = r > Math.PI * 2 ? r - Math.PI * 2 : r < 0 ? r + Math.PI * 2 : r;
  return {
    // 增加随机值
    x: length * Math.sin(tr) + (Math.random() > 0.5 ? 1 : -1) * 10 * Math.random(),
    y: length * Math.cos(tr) + (Math.random() > 0.5 ? 1 : -1) * 10 * Math.random(),
  }
})
}

3.3 Угол

Наконец, нам нужно только украсить угол каждой бабы.

function createfeces(scale) {
  const fece = document.createElement('div');
  fece.className = 'feces';
  const symbol = Math.random() > 0.5 ? 1 : -1; // 生成 -20 ~ 20 之间的随机角度
  fece.style.transform = `scale(${scale}) rotate(${symbol * 20 * Math.random()}deg)`
  fece.style.opacity = '0';
  return fece;
}

3.4 Анимация

Поскольку это похоже на сброс бомб, я не буду вдаваться в подробности. Следует отметить, что, поскольку Баба сначала выходит из положения бомбы, а затем замедляется, нам нужно использовать здесь две анимации Tween.

// 一开始的出现时候的动画，从爆炸口冲出来
function initFece(end) {
	...
  const start = { x: 0, y: 100, z: 0 }; // 爆炸口
  const tween = new TWEEN.Tween(start)
  .to({ ...end, z: 1 }, 100)
  .easing(TWEEN.Easing.Linear.None)
  .onUpdate(function () {
    fece.style.setProperty('top', `${start.y}px`);
    fece.style.setProperty('left', `${start.x}px`);
    fece.style.setProperty('opacity', `${start.z}`);
  })
  .onComplete(function () {
    initDown(start, fece).start(); // 冲出完成，进行下落透明动画
  })
  return tween;
}
// 下落同时变透明动画
function initDown(start, fece) {
  const s = {
    y: start.y,
    o: 1,
  };
  const e = { y: start.y + 80, o: 0 };
  const tween = new TWEEN.Tween(s)
  .to(e, 2000 + 500 * Math.random())
  .easing(TWEEN.Easing.Quadratic.In)
  .onUpdate(function () {
    fece.style.setProperty('top', `${s.y}px`);
    fece.style.setProperty('opacity', `${s.o}`);
  })
  .onComplete(function () {
  })
  return tween;
}

окончательный эффект

Полный код этого раздела:GitHub.com/flower1995116/…

3.5 Резюме

Так как этот раздел длинный, подытожим знания

• использовать сначала1 = x² + y²Характеристики круговых траекторий, установление предварительных позиций
• Затем, добавляя случайные значения, все распределение становится немного менее регулярным.
• Добавляем случайные ракурсы к Бабе
• Сделать центральную бабу более подверженной взрыву
• Добавлена ​​анимация появления и падения цепи.

4. Все трясутся

Эту функцию можно дополнить простой css анимацией и подробно здесь обсуждаться не будет.Заинтересованные друзья могут реализовать и выложить в комментариях~

конец

На этот раз чисто любопытное исследование этого эффекта, а не 100% восстановление анимации. Я не писатель, специализирующийся на анимации, вышеуказанная библиотека также используется впервые, и написание может быть не столь профессиональным (если у вас есть какие-либо вопросы, пожалуйста, не стесняйтесь указывать на ошибки в области комментариев). Но я надеюсь, что это может дать вам забавную идею, которую можно использовать при создании анимации.lottieиtweenДве библиотеки, а также упрощение сложных задач, превращение нестандартных вещей в обычные вещи, превращение сложных вещей в простые вещи и, наконец, их углубление шаг за шагом. Также спасибоНаньсиВычитка этой статьи.

Оглядываясь назад на предыдущие высоко оцененные статьи автора, вы можете получить больше!

• Список книг по начальному обучению на 2021 год - Дорога к саморазвитию:570+Нравится

• Научите вас реализовывать спецэффект 🎉 смайликов «взрыва» WeChat 8.0.:400+Нравится

• Говоря о водяном знаке на интерфейсе от взлома веб-сайта с дизайном (подробное руководство):790+Нравится

• Руководство для начинающих, которое я узнал от славы короля:260+Нравится

• В этой статье вы шаг за шагом раскрываете тайну «загрузки файла».:140+Нравится

• 10 междоменных решений (с окончательным трюком):940+Нравится

Эпилог

❤️Подписаться + Нравится + Избранное + Комментарий + Переслать ❤️, оригинальность - это не просто, поощряйте автора создавать лучшие статьи

Обратите внимание на публичный аккаунт秋风的笔记, внешний общедоступный аккаунт, посвященный предварительным интервью, разработке и открытому исходному коду.