Анимация переходов для содержимого в SwiftUI

Анимации переходов между представлениями (view transition) были доступны с самой первой версии фреймворка SwiftUI. Фреймворк позволяет указать определенную анимацию перехода, которая будет применяться всякий раз, когда представление удаляется или добавляется в иерархию представлений. С недавних пор фреймворк SwiftUI предлагает нам еще один тип анимаций перехода — анимации переходов для содержимого (content transition). Суть та же, что и раньше. Фреймворк теперь позволяет нам указывать определенную анимацию перехода для содержимого представления, которая будет проигрываться всякий раз, когда оно изменяется. На этой неделе мы с вами разберемся, как использовать новый API для анимирования переходов содержимого в SwiftUI.

В предыдущих версиях SwiftUI мы не могли применять переходы (transition) к содержимому представления. И если вы запустите этот пример на iOS 15, то никакой анимации перехода вы не увидите.

struct ContentView: View {     @State private var flag = false          var body: some View {         VStack {             Text(verbatim: "1000")                 .fontWeight(flag ? .black : .light)                 .foregroundColor(flag ? .yellow : .red)         }         .onTapGesture {             withAnimation(.default.speed(0.1)) {                 flag.toggle()             }         }     } }

Предыдущая версия SwiftUI не поддерживает никаких переходов для содержимого представления Text и сразу же применяет изменения без какого-либо визуального эффекта. К счастью, последняя итерация SwiftUI позволяет нам указать анимацию перехода для содержимого представления Text с помощью модификатора представления contentTransition:

struct ContentView: View {     @State private var flag = false          var body: some View {         VStack {             Text(verbatim: "1000")                 .fontWeight(flag ? .black : .light)                 .foregroundColor(flag ? .yellow : .red)         }         .contentTransition(.opacity)         .onTapGesture {             withAnimation(.default.speed(0.1)) {                 flag.toggle()             }         }     } }

Как видно из приведенного выше примера, единственная строка кода, которую мы добавили, — это модификатор представления contentTransition. Он принимает инстанс выбранной нами анимации перехода, который SwiftUI применяет к представлению при каждом изменении его содержимого. В данном случае поскольку мы используем интерполяцию (interpolate), анимация перехода влияет на размер и цвет текста.

struct ContentView: View {     @State private var flag = false          var body: some View {         VStack {             Text(verbatim: "1000")                 .fontWeight(flag ? .black : .light)                 .foregroundColor(flag ? .yellow : .red)         }         .contentTransition(.opacity)         .onTapGesture {             withAnimation(.default.speed(0.1)) {                 flag.toggle()             }         }     } }

В этом примере мы используем другой инстанс ContentTransition называемый opacity. В этом случае SwiftUI будет анимировать постепенное появление/исчезновение текста при каждом его изменении.

В SwiftUI есть еще один тип ContentTransition, который работает только с числовым текстом (numericText). Он понимает, как изменилось число, и создает приятный визуальный эффект, изменяющий только часть представления Text, которая представляет число.

struct TextContentView: View {     @State private var number = "99"          var body: some View {         Text(verbatim: number)             .font(.system(size: 36))             .contentTransition(.numericText())             .onTapGesture {                 withAnimation(.default.speed(0.2)) {                     number = "98"                 }             }     } }

Чтобы узнать больше о других вариациях анимации изменений в тексте, читайте статью “AnimatableModifier в SwiftUI”.

Модификатор представления contentTransition передает предоставленный ему инстанс ContentTransition через среду SwiftUI, что позволяет нам получить к нему доступ по определенному EnvironmentKey.

struct MySuperCustomTextView: View {     let text: String          @Environment(\.contentTransition) private var transition          var body: some View {         switch transition {         case .opacity:             drawWithOpacity()         case .interpolate:             drawWithInterpolation()         default:             draw()         }     }          // ... }

Здесь мы наблюдаем супер кастомизированное текстовое представление, которое использует среду SwiftUI, чтобы определить, какую технику отрисовки переданного текста следует использовать, на основе используемой анимация перехода.

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

struct ContentView: View {     @State private var flag = false          var body: some View {         VStack {             Text(verbatim: "1000")                 .fontWeight(flag ? .black : .light)                 .foregroundColor(flag ? .yellow : .red)         }         .environment(\.contentTransitionAddsDrawingGroup, true)         .contentTransition(.interpolate)         .onTapGesture {             withAnimation(.default.speed(0.1)) {                 flag.toggle()             }         }     } }

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

Перевод материала подготовлен в рамках специализации iOS Developer.