Как анимировать переход прокрутки с помощью SwiftUI

В предыдущем руководстве мы представили новую функцию ScrollView в iOS 17, которая позволяет разработчикам легко определять положение прокрутки и реализовывать функцию прокрутки вверх (или прокрутки вниз). В дополнение к этой функциональности в последней версии SwiftUI также представлен новый модификатор под названием scrollTransition, который позволяет нам наблюдать за сменой представлений и применять различные анимированные эффекты.

Примечание. Чтобы следовать этому руководству, убедитесь, что вы используете Xcode 15 (или выше).

Ранее мы создали базовое представление прокрутки. Давайте продолжим использовать его в качестве примера. Для справки, вот код для создания прокрутки:

ScrollView {
    LazyVStack(spacing: 10) {
        ForEach(0...50, id: \.self) { index in
 
            bgColors[index % 5]
                .frame(height: 100)
                .overlay {
                    Text("\(index)")
                        .foregroundStyle(.white)
                        .font(.system(.title, weight: .bold))
                }
                .onTapGesture {
                    withAnimation {
                        scrollID = 0
                    }
                }
        }
    }
    .scrollTargetLayout()
}
.contentMargins(50.0, for: .scrollContent)
.scrollPosition(id: $scrollID)

Использование модификатора ScrollTransition

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

Чтобы продемонстрировать, как это работает, давайте изменим код из предыдущего раздела, добавив модификатор scrollTransition в представление прокрутки. Вот обновленный код:

ScrollView {

.
.
.

}
.scrollTransition { content, phase in
    
    content
        .opacity(phase.isIdentity ? 1.0 : 0.3)
    .scaleEffect(phase.isIdentity ? 1.0 : 0.3)
}

Мы применяем тонкую анимацию, изменяя непрозрачность и размер дочерних представлений. Замыкание scrollTransition передает два параметра: дочернее представление и фазу перехода. Существует три возможных значения фаз перехода: .identity, .topLeading и .bottomTrailing. В зависимости от фазы мы можем применять различные визуальные эффекты.