SwiftUI求助：点击按钮后实现图片序列自动轮播动画

直接上可行的代码实现，核心靠定时器触发自动切换，同时控制启停避免重复触发：

import SwiftUI
import Combine

struct ImageCarouselButton: View {
    // 替换成你的图片名称数组
    let images = ["img1", "img2", "img3", "img4"]
    @State private var activeImageIndex = 0
    // 定时器发布者，控制轮播节奏
    @State private var carouselTimer: Timer.TimerPublisher?
    // 管理定时器订阅，用于取消轮播
    @State private var timerCancellable: AnyCancellable?
    
    var body: some View {
        Button {
            startCarousel()
        } label: {
            Image(images[activeImageIndex])
                .resizable()
                .frame(width: 100, height: 100) // 按需调整图片尺寸
        }
        .onReceive(carouselTimer?.autoconnect() ?? Empty().eraseToAnyPublisher()) { _ in
            withAnimation(.easeInOut) { // 可选：添加切换动画
                if activeImageIndex < images.count - 1 {
                    activeImageIndex += 1
                } else {
                    // 轮播到最后一张时停止
                    stopCarousel()
                }
            }
        }
    }
    
    private func startCarousel() {
        // 防止重复点击启动多个定时器
        guard timerCancellable == nil else { return }
        // 可选：每次点击都从头开始轮播，不需要就删掉这行
        activeImageIndex = 0
        // 创建每秒触发一次的定时器
        carouselTimer = Timer.publish(every: 1, on: .main, in: .common)
        // 订阅定时器事件
        timerCancellable = carouselTimer?.autoconnect().sink(receiveValue: { _ in })
    }
    
    private func stopCarousel() {
        timerCancellable?.cancel()
        timerCancellable = nil
        carouselTimer = nil
    }
}

#Preview {
    ImageCarouselButton()
}

关键逻辑说明 #

• 定时器管控：用Timer.TimerPublisher创建每秒触发的定时任务，通过AnyCancellable管理订阅，随时可以取消轮播。
• 防重复触发：启动前先检查定时器是否已存在，避免多次点击导致轮播速度混乱。
• 轮播终止：当图片索引走到数组最后一位时，自动停止定时器，结束轮播。
• 动画扩展：如果需要切换时的过渡效果，保留withAnimation即可，不想加直接删掉这段包裹代码。

内容的提问来源于stack exchange，提问作者Tim_Waddles