Добавляйте фейерверки и конфетти в свои приложения SwiftUI

Для начала создайте структуру типа GeometryEffect.

Нам нужно определить время, скорость и направление для частиц. Сделайте случайное число переменной скорости между 20 и 200. Если вы попробуете использовать небольшой диапазон чисел (например, 10… 30), взрыв частиц будет более сдержанным и менее драматичным.

Для направления используйте значение от -pi до pi. Этот диапазон даст нам полный круг.

Если вы измените диапазон чисел от 0 до пи, частицы будут двигаться вниз в форме полукруга. Если вы теперь измените диапазон чисел с -pi на 0, это даст нам противоположный эффект.

Используйте animatableData, чтобы увеличить ценность времени. animatableData - это особая переменная, не переименовывайте ее, иначе анимация работать не будет. Если вы удалите animatableData, частицы будут фиксироваться в случайных местах.

Соответствуйте протоколу GeometryEffect, реализовав функцию effectValue.

Нам нужно выяснить перемещение / положение всех частиц. Вычислите перевод, используя значения скорости, времени, косинуса и синуса направления. Матрица аффинного преобразования используется для перевода объектов, которые вы рисуете в графическом контексте.

Создайте CGAffineTransform с нашими переводами, затем верните ProjectionTransform с нашим CGAffineTransform, созданным вами.

Модификатор частиц

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

Добавьте модификаторы, которые вы хотите применить к частицам. Но самое главное, добавьте .modifier() с настраиваемыми геометрическими эффектами, которые мы создали выше, .scaleEffect() и opacity(), как показано ниже.

Наконец, добавьте onAppear() в ZStack, который включает наш цикл содержимого. Внутри анимируйте значения времени и масштаба. Что касается непрозрачности, мы хотим, чтобы она исчезла, когда продолжительность анимации закончится.

Посмотрите изображения ниже, чтобы увидеть, как изменение значения длительности с 5 на 15 повлияет на размер и непрозрачность частиц.

Просмотр содержания

В структуре типа View добавьте ParticleModifier к любой фигуре или изображению!

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

Это завершает эту часть. Спасибо за прочтение.