Grow with AppMaster Grow with AppMaster.
Become our partner arrow ico

Блок Play Sound и Fire Confetti в AppMaster

Блок Play Sound и Fire Confetti в AppMaster

В AppMaster есть возможность добавлять интерактивные элементы в веб-приложения, как например визуальные эффекты, звуки и т.д. В данной статье рассмотрим использование двух блоков Fire Confetti и Play Sound в связке друг с другом.

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

Допустим, наше веб-приложение должно как-то реагировать на событие логина пользователя. А именно, на экране выстреливает конфетти, при успешном логине, и проигрывается определенная мелодия. Выглядит это следующим образом (так как это анимация, то нет возможности интегрировать звук при воспроизведении, но вы можете протестировать результат сами):

зерокодингДля начала рассмотрим подробно сами блоки бизнес-процессов Play Sound и Fire Confetti.

  1. Play Sound - блок бизнес-процесса, проигрывающего звук из файла по заданной ссылке. 
    URL (mp3) [string] - путь до файла. Хорошей практикой является указывать путь до файла из файлового хранилища приложения, тогда URL будет иметь вид /api/_file/<ID>/download/, где ID - идентификатор файла в бекенде приложения.

зерокодинг2. Fire Confetti - блок бизнес-процесса, выстреливающего конфетти для текущего пользователя.

  • Preset [vmodel] - позволяет выбрать анимацию выстреливания конфетти

- Cannon
- Fireworks
- Realistic
- Snow
- School Pride

  • Duration (ms) [integer] - длительность анимации в мс
  • Position top (%) [integer] - отклонение точки запуска от верхней границы экрана
  • Position left (%) [integer] - отклонение точки запуска от левой границы экрана
  • Particle count [integer] - количество частиц в анимации
  • Angle [integer] - угол раскрытия “залпа” конфетти
  • Colors [string array] - массив значений цветов частиц конфетти

зерокодингПерейдем к настройке самого бизнес-процесса. В нашем примере конфетти стреляет после успешного логина пользователя. Таким образом, все необходимые модификации будут проведены в бизнес-процессе, связанным с кнопкой Login.

зерокодингНеобходимо найти момент в бизнес-процессе, который перенаправляет пользователя на следующую страницу при успешном логине, а именно блок Navigate. Наша модификация бизнес-процесса выглядит следующим образом:

зерокодингНастройки блока Fire Confetti:

  • Preset = Cannon;
  • Duration (ms) = 1;
  • Particle Count = 500;
  • Angle = 30.

На вход блока Play Sound передается путь до музыкального файла, заранее загруженного на сервер приложения. 

Таким образом, в данной статье мы описали возможности применения интерактивных блоков Play Sound и Fire Confetti. Поняв принцип их работы, вы можете самостоятельно их использовать для более сложных сценариев.

Похожие статьи

Ключ к реализации стратегий монетизации мобильных приложений
Ключ к реализации стратегий монетизации мобильных приложений
Узнайте, как раскрыть весь потенциал дохода вашего мобильного приложения с помощью проверенных стратегий монетизации, включая рекламу, покупки в приложении и подписки.
Ключевые моменты при выборе конструктора приложений с искусственным интеллектом
Ключевые моменты при выборе конструктора приложений с искусственным интеллектом
При выборе создателя приложения ИИ важно учитывать такие факторы, как возможности интеграции, простота использования и масштабируемость. В этой статье вы узнаете основные моменты, которые помогут сделать осознанный выбор.
Советы по эффективным push-уведомлениям в PWA
Советы по эффективным push-уведомлениям в PWA
Откройте для себя искусство создания эффективных push-уведомлений для прогрессивных веб-приложений (PWA), которые повышают вовлеченность пользователей и выделяют ваши сообщения в переполненном цифровом пространстве.
Начните бесплатно
Хотите попробовать сами?

Лучший способ понять всю мощь AppMaster - это увидеть все своими глазами. Создайте собственное приложение за считанные минуты с бесплатной подпиской AppMaster

Воплотите свои идеи в жизнь