时间戳

首页 > 解决方案 > SwiftUI：在带有动画的计时器上更改图像

swiftui - SwiftUI：在带有动画的计时器上更改图像

问题描述

我想在具有不同动画的计时器的视图中更改图像。像滑入、淡入淡出、从小图增长到填充等

struct ContentView: View {
    
    let images = ["1", "2", "3", "4", "5", "6", "7"] // Array of image names to showcase 
    
    @State var activeImageIndex = 0 // Index of the currently displayed image
    @State var isExpanded = false
    
    let imageSwitchTimer = Timer.publish(every: 5, on: .main, in: .common)
        .autoconnect()
    
    var body: some View {
        VStack {
            Image(images[activeImageIndex])
                .resizable()
                .aspectRatio(contentMode: .fit)
                .padding()
                .transition(.asymmetric(insertion: .scale, removal: .opacity))
                .animation(.spring())
                .onReceive(imageSwitchTimer) { _ in
                    self.activeImageIndex = (self.activeImageIndex + 1) % self.images.count
                }
        }
    }
}

标签： swiftui

解决方案

您可以添加一个计算属性来指定基于以下的转换activeImageIndex：

var transition: AnyTransition {
    switch activeImageIndex {
    case 0:
        return .asymmetric(insertion: .scale, removal: .opacity)
    default:
        return .identity
    }
}

并像这样使用它：

Image(images[activeImageIndex])
    .resizable()
    .aspectRatio(contentMode: .fit)
    .padding()
    .transition(transition) // use here
    .animation(.spring())
    .onReceive(imageSwitchTimer) { _ in
        self.activeImageIndex = (self.activeImageIndex + 1) % self.images.count
    }

推荐阅读