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

Vue.js

написать впереди

Эффект исчезновения, когда Танос щелкает пальцами. Эффект возникает из-за поиска в Google «thanos» или «thanos». это горячоFeature, Я пропускаюF12Я попытался посмотреть, как это реализовано, а также нашел некоторые аудио- и графические ресурсы. Позже нашел существующий проект на githubThanos_Dust, поэтому обратитесь к части его кода. На самом деле его код относительно закончен, на его основе я написал его с помощью vue, добавил несколько героев, исправил некоторые ошибки и добавил некоторые эффекты.

demo

  • Нажмите на перчатку, и половина героя исчезнет со звуковым эффектом и анимацией щелчка пальцами.
  • После исчезновения нажмите еще раз, исчезнувший герой вернется.

Нажмите на ссылку ниже, чтобы испытать

demos

деталь

  • Половина героев выбирается случайным образом по следующему алгоритму:

    arr.sort(function() {
  return 0.5 - Math.random();
});

  • Объяснение эффекта выбранного героя в пепел:

    1. использоватьhtml2canvasБиблиотека будет там, где находится каждый геройdomУзел отображается какcanvasузел
    2. пройти черезgenerateFramesметод, весь блокcanvasИзображение холста разделено на множество блоков по пикселям
    3. Создать новый с выбранным героемdomКонтейнер того же местоположения и того же размера узла перезаписывает оригиналdomузел
    4. Нарисуйте блок, созданный на втором шаге, на новый холст и передайтеappendChildметод добавляется в родительский контейнер, созданный на третьем шаге
    5. Случайным образом установите каждый блокrotateугол иtranslateПиксели, вы можете завершить эффект пепла
    6. герой, который будет переопределенdomУзел становится невидимым, и операция щелчка пальца завершена.

  • Время поворота, эффект героя возвращается к оригиналуdomУзлы становятся видимыми, и добавляется анимация ответа. (googleОригинальная анимация реставрацииcolorУстановить какgreen, так как здесь нет текста и эффект не очевиден, установлено значениеbackground-color)

наконец

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

Категории