SwiftUI - Banner Transition

Question

I am new to ShiftUI.

How can we achieve automation Banner Transition for every move to next image rotation 'N' seconds in ShiftUI ?

Native SwiftUI functionality for banner transition. Move to next image rotation. I need bottom indicator.

Answer 1

Use Timer you can achieve this result. Check below sample code

import SwiftUI
import Combine

struct ContentView: View {
    
    @StateObject private var viewModel = ContentViewModel()
    
    var body: some View {
        TabView(selection: $viewModel.selectedIndex.animation(.spring())) {
            ForEach(0 ..< viewModel.colors.count, id: \.self) { index in
                viewModel.colors[index]
                    .tag(index)
            }
        }
        .tabViewStyle(.page(indexDisplayMode: .always))
        .animation(viewModel.selectedIndex == 0 ? .none : .default, value: viewModel.selectedIndex)
    }
}

final class ContentViewModel: ObservableObject {
    @Published var selectedIndex = 0
    let colors: [Color] = [
        .red,
        .blue,
        .green,
        .yellow,
        .orange,
        .brown
    ]
    
    private var timer: Timer?
    private var cancellation: AnyCancellable?
    
    init() {
        addAutoScrollTimer()
    }
    
    func addAutoScrollTimer() {
        cancellation = Timer.publish(every: 5, on: .main, in: .default)
            .autoconnect()
            .sink { [weak self] timer in
                self?.handleAutoScroll()
            }
    }
    
    @objc private func handleAutoScroll() {
        selectedIndex = (selectedIndex + 1) % colors.count
    }
}