I am using SWIFTUI for iOS16 development of an app. My app is in landscape mode only, and I have a ScrollView horizontal, in the middle of the screen.
The ScrollView works fine, however I would like to add a beautiful animation effect so that when the user is scrolling the image that is in the middle becomes bigger/pops out basically.
I found the ".scaleEffect" modifier, but how to apply it so the it only work on an image when it's in the middle or is there any better way to do this?
Here is my code:
import SwiftUI
struct TestView: View {
var body: some View {
GeometryReader { geometry in
VStack {
Spacer()
ScrollView(.horizontal, showsIndicators: false) {
ScrollViewReader { proxy in
HStack(spacing: 20) {
Image("img1")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: geometry.size.width / 3)
.id(1)
Image("img2")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: geometry.size.width / 3)
.id(2)
Image("img3")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: geometry.size.width / 3)
.id(3)
Image("img4")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: geometry.size.width / 3)
.id(4)
Image("img5")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: geometry.size.width / 3)
.id(5)
Image("img6")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: geometry.size.width / 3)
.id(6)
}
}
}
Spacer()
}
}
}
}
struct TestView_Previews: PreviewProvider {static var previews: some View {TestView()}}
How to make an image scale up bigger with animation only when it finds itself in the middle of the screen?