Создайте анимацию прокрутки 3D-карты в SwiftUI

Используйте ScrollView и GeometryReader для создания анимированного эффекта 3D-прокрутки

CardView

Начиная с карточек, мы создадим структурное представление, которое принимает цвет и число. Карты будут RoundedRectangles с заливкой и Text видом с числами, сложенными друг на друга в ZStack.

У меня есть атрибут фона на RoundedRectangle, который принимает белый цвет в качестве представления. Это потому, что я задаю цвета CardView, у которых есть атрибуты непрозрачности со значением 0,3. Если вы используете цвета со значением непрозрачности 1.0, то цвет фона не нужен.

ContentView

ContentView содержит массив цветов, которые мы отправляем в CardView. Выберите свои цвета или создайте массив другого типа и заполните его содержимым, которое будет внутри ваших карточек:

В теле ContentView нам понадобится GeometryReader, чтобы определить количество отступов и интервалов, необходимых для нашего HStack. Используйте ForEach, чтобы заполнить карточки числами и цветами. Вставьте свой HStack в ScrollView:

3D-анимация карт

В нашем CardView нам нужно знать maxX нашего экрана. Мы можем получить его с помощью UIScreen и сохранить в переменной. Вставьте ZStack в GeometryReader. Используйте атрибут rotation3DEffect на ZStack. Передайте значение maxX, используя геометрический прокси, и вычтите из него значение maxX, которое мы сохранили. Затем добавьте к нему половину значения maxX, чтобы отцентрировать карту в центре экрана под углом 0 градусов. Разделите результат на -5 или вы можете поэкспериментировать с другими значениями, чтобы увидеть, как это повлияет на вашу анимацию.

Все сделано! Спасибо за прочтение.