swiftuibanner

SwiftUI - Banner Transition


I am new to ShiftUI.

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

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


Solution

  • 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
        }
    }