Добавляйте фейерверки и конфетти в свои приложения 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
к любой фигуре или изображению!
Ниже я использовал круги для формы частиц. Я также добавил смещение для его позиций.
Это завершает эту часть. Спасибо за прочтение.