Кто король перестрелок 🧨? Брат Чун отведет тебя жарить наггетсы!

внешний интерфейс JavaScript
Кто король перестрелок 🧨? Брат Чун отведет тебя жарить наггетсы!

PK Creative празднует Китайский Новый год. Я участвую в "Творческом конкурсе Весеннего фестиваля". Подробности см.:Творческий конкурс "Праздник весны"

жареные наггетсы

В молодости, во время праздников, я был настоящим "пушечным королем" в деревне, жарил "стеклянные бутылки", жарил "рыбу", жарил "камни", жарил "навозные ямы"...

Бессознательно, я был на нескольких из 30, до Нового года я не могу "пушечного короля".

Но в этом году я собираюсь сделать большой голос: поставить

炸pc

光炸网页端还不够！ ОниAPPТоже до конца!炸APP

URL-адрес опыта

После входа на следующую страницу, нажмите на экран, чтобы зажечь «петарду»!

Если вы используете компьютер 💻:Жареные наггетсы - Компьютерный портал
Если вы используете мобильный телефон 📱:Жареные наггетсы - Мобильный портал

писать с тобой рука об руку

1. Необходимые условия

  • Триангуляция Делоне: также известная какDelaunayТриангуляция - это способ разделиния плоскости или поверхности вNА методы обработки графики не пересекают треугольник.
    (Мы использовали его, чтобы разбивать самородки на кусочки!)
  • animejs: широко используемая библиотека интерфейсной анимации.
    (Мы используем его, чтобы бросать самородки в бездну!)

2. Как заказать "перестрелку"?

Я не делаю взрывчатку, я носильщик для перестрелок.

点炮仗

Реализация части «перестрелки» происходит из статьи друга @creen young:Таймер фейерверка с svg

Проще говоря, в три шага:

  1. использоватьsvg
  2. использоватьanimejs
  3. использоватьanimejsНарисуйте анимацию движения Марса.

Подробный геймплей смотрите в исходном посте:Таймер фейерверка с svg

3. Как создать эффект взрыва?

Где взрыв? Только свечение становится большеdivВот и все.

boom！

Эффект блефа взрыва световых волн, эффекты вспышки бомбы, это слишком легко достичь!

Нам просто нужно сделать ширину и высоту0pxизdivРасширить до полного размера экрана, а затем медленно уменьшить его до.how to boom 01Чтобы усилить «ослепляющее ощущение» при взрыве, мы можем сделать так, чтобы фон быстро становился черным в процессе, а затем медленно исчезал.

код показывает, как показано ниже:

  // 生成时间轴
  const timeline = animejs.timeline()
  // 爆炸光波div放大并变亮（其实是变白）
  timeline.add({
    targets: sparkRef.current,
    backgroundColor: {
      value: '#fff',
      duration: 300
    },
    width: 1 * Math.max(bodyClientHeight, bodyClientWidth),
    height: 1 * Math.max(bodyClientHeight, bodyClientWidth),
    duration: 1000
  })
  // 背景变暗
  timeline.add({
    targets: maskRef.current,
    backgroundColor: `rgba(0,0,0,0.8)`,
    duration: 800,
    easing: 'easeInOutCirc',
  }, '-=1000')
  // 爆炸光波div缩小，并逐渐变透明
  timeline.add({
    targets: sparkRef.current,
    width: 0,
    height: 0,
    opacity: 0,
    duration: 3000,
    easing: 'easeInOutCirc',
  })
  // 背景变得透明
  timeline.add({
    targets: maskRef.current,
    backgroundColor: `rgba(0,0,0,0)`,
    duration: 3000,
    opacity: 0,
    easing: 'easeInOutCirc',
  }, '-=3000')

4. Как сделать Наггетс "битым"?

Давайте сначала разберемся, что на самом деле делает «триангуляция Длоне».

德劳内三角化

Как показано на рисунке выше, «триангуляция Делоне» может соединять кучу разбросанных точек, образуя несколько треугольников, не пересекающихся друг с другом. Поэтому наше мышление таково:

Через этот алгоритм мы можем добавить несколько точек на прямоугольник, а затем достичь эффекта «разрушающего» его.

破碎思路

На этой основе, чтобы сделать его «сломанным» более реалистичным, мы можем добавить несколько слоев.

打点思路

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

碎裂效果

Конечный эффект можно отметить как плотный в середине и разреженный вокруг.

5. Как сделать так, чтобы обломки падали далеко?

Прежде чем сделать этот шаг, мы должны第4步Сгенерирован по пункту, мой подход - «отрезать их в несколькоcanvasхолст".

    1. Рассчитывается для каждого минимума треугольникаcanvasРазмер и положение прямоугольника.
    1. Вырежьте форму треугольника с помощью метода canvas.2DContext.clip().

canvas构建思路

Я определяю такой фрагмент какFragment:

export interface Box {
  x: number,
  y: number,
  w: number,
  h: number
}

export default class Fragment {
  public pointA: Array<number>; // 三角形顶点A
  public pointB: Array<number>; // 三角形顶点B
  public pointC: Array<number>; // 三角形顶点C
  public box: Box; // 盒子
  public centroid: Array<number>; // 中心
  public canvas: HTMLCanvasElement; // canvas 元素
  public ctx: CanvasRenderingContext2D | null; // canvas 2d ctx
  // ...代码过多，有兴趣的可以看源码
}

Итак, как вы даете этиcanvasПадают дальше?

Это также требует трех шагов:

  1. флип анимация
  2. продолжай становиться меньше
  3. сдвинься ближе к центру

код показывает, как показано ниже:

  timeline.add({
    targets: fragment.canvas,
    scale: {
      value: 0,
      duration: 1000, // 变小
    },
    opacity: { // 变透明
      value: 0,
      duration: 400,
      delay: delay + 600
    },
    left: canvasWidth/2 - fragment.box.w/2, // 移动向中心
    top: canvasHeight/2 - fragment.box.h/2, // 移动向中心
    rotateX: { // X轴翻转
      value: rx,
      duration: 400,
      delay: delay + 600
    },
    rotateY: { // Y轴翻转
      value: ry,
      duration: 400,
      delay: delay + 600
    },
    easing:'cubicBezier(0.420, 0.000, 1.000, 1.000)', // 贝塞尔曲线，缓=>快=>缓
    duration: 1000,
  }, delay);

Получить исходный код

Адрес источника:GitHub.com/Начало розыгрыша…

Категории