Анимация нескольких строк текста в SwiftUI

Вопрос или проблема

struct TextAnimation: View {
    @State var animate = false
    @State var removeGradient = false
    let text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

    var body: some View {
        Text(text)
            .padding()
            .frame(height: 300)
            .foregroundStyle(
                LinearGradient(colors: removeGradient ? [Color.black] : [.blue, .red, .green, .yellow], startPoint: .top, endPoint: .bottom)
                    .opacity(animate ? 1 : 0.5)
            )
            .overlay {
                LinearGradient(colors: [.white.opacity(0.8)], startPoint: .top, endPoint: .bottom)
                    .offset(y: animate ? 300 : 0)
                    .animation(.easeIn(duration: 1), value: animate)
            }
            .onAppear(perform: {
                DispatchQueue.main.asyncAfter(wallDeadline: .now() + 1.0) {
                    animate.toggle()
                }

                DispatchQueue.main.asyncAfter(wallDeadline: .now() + 2.0) {
                    removeGradient.toggle()
                }
            })
    }
}

Ответ или решение

Конечно! Давайте разберёмся, как анимировать несколько строк текста в SwiftUI, чтобы добиться эффекта, похожего на тот, что вы видите в приложении «Notes». Ниже представлено решение, которое включает анимацию высоты текста, а также градиент и вертикальное смещение строк.

Я внесу изменения в ваш код и добавлю анимацию для создания волнистого эффекта, а также изменю высоту и прозрачность текста.

import SwiftUI

struct TextAnimation: View {
    @State private var animate = false
    @State private var gradientActive = false

    let textLines = [
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
        "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
        "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.",
        "Ut aliquip ex ea commodo consequat.",
        "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
        "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    ]

    var body: some View {
        VStack(spacing: 10) {
            ForEach(0..<textLines.count, id: \.self) { index in
                Text(textLines[index])
                    .font(.headline)
                    .foregroundStyle(
                        LinearGradient(colors: gradientActive ? [.black] : [.blue, .green, .yellow],
                                       startPoint: .top,
                                       endPoint: .bottom)
                        .opacity(animate ? 1 : 0.5)
                    )
                    .frame(height: animate ? 100 : 50)
                    .offset(y: animate ? -10 + CGFloat(index) * 5 : 0)
                    .animation(.easeInOut(duration: 1).delay(Double(index) * 0.1), value: animate)
            }
        }
        .onAppear {
            withAnimation(Animation.easeInOut(duration: 1).delay(0.5)) {
                animate.toggle()
            }
            withAnimation(Animation.easeInOut(duration: 1).delay(1.5)) {
                gradientActive.toggle()
            }
        }
        .padding()
    }
}

struct ContentView: View {
    var body: some View {
        TextAnimation()
    }
}

@main
struct YourApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

Объяснение кода:

1. Структура данных: Я использовал массив строк textLines, чтобы разделить текст на несколько строк для анимации.

2. Анимация текста: Каждую строку текста обрабатываем в цикле ForEach. Каждая строка имеет свою анимацию, и строки появляются постепенно с небольшим задержкой для создания волнистого эффекта.

3. Градиент и высота: Применяются градиентный цвет, который меняется по мере анимации, и анимация высоты текста.

4. Параметры анимации: Используются параметры easeInOut для плавности переходов, а также задержка для постепенной анимации линий текста.

5. Обработчик событий: onAppear запускает анимации, когда представление появляется на экране.

Этот код создаёт анимацию, где строки текста постепенно поднимаются с эффектом волны, а также применяются градиентные цвета и изменение высоты. Теперь, когда вы запустите приложение, вы получите желаемый эффект анимации для строк текста.