0

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?

Pro Girl
  • 762
  • 7
  • 21
  • If you don't need to support earlier versions of iOS, I'd have a look at Layouts (https://developer.apple.com/documentation/swiftui/composing_custom_layouts_with_swiftui). Haven't tried them in conjunction with ScrollView, but they might get all the necessary information with the bounds in the placeSubviews(). – Baglan Feb 25 '23 at 11:33
  • Otherwise, I would make images report their locations as "preferences" (https://swiftwithmajid.com/2020/01/15/the-magic-of-view-preferences-in-swiftui/) and would have dome something with that. Too lazy to actually write code, but, hope, it helps! – Baglan Feb 25 '23 at 11:38

0 Answers0