问题
According to my logic, on tap gesture to the image it should be changed with fade animation, but actual result is that image changes without animation. Tested with Xcode 11.3.1, Simulator 13.2.2/13.3 if it is important.
P.S. Images are named as "img1", "img2", "img3", etc.
enum ImageEnum: String {
case img1
case img2
case img3
func next() -> ImageEnum {
switch self {
case .img1: return .img2
case .img2: return .img3
case .img3: return .img1
}
}
}
struct ContentView: View {
@State private var img = ImageEnum.img1
var body: some View {
Image(img.rawValue)
.onTapGesture {
withAnimation {
self.img = self.img.next()
}
}
}
}
回答1:
Here is possible approach using one Image (for demo some small modifications made to use default images). The important changes marked with comments.
enum ImageEnum: String {
case img1 = "1.circle"
case img2 = "2.circle"
case img3 = "3.circle"
func next() -> ImageEnum {
switch self {
case .img1: return .img2
case .img2: return .img3
case .img3: return .img1
}
}
}
struct QuickTest: View {
@State private var img = ImageEnum.img1
@State private var fadeOut = false
var body: some View {
Image(systemName: img.rawValue).resizable().frame(width: 300, height: 300)
.opacity(fadeOut ? 0 : 1)
.animation(.easeInOut(duration: 0.25)) // animatable fade in/out
.onTapGesture {
self.fadeOut.toggle() // 1) fade out
// delayed appear
DispatchQueue.main.asyncAfter(deadline: .now() + 0.25) {
withAnimation {
self.img = self.img.next() // 2) change image
self.fadeOut.toggle() // 3) fade in
}
}
}
}
}
来源:https://stackoverflow.com/questions/60688925/is-it-possible-to-change-image-with-fade-animation-using-same-image-swiftui