SwiftUI+GeometryReader (Make the center item larger)

README.md

スクリーンショット

参考サイト

https://qiita.com/masa7351/items/0567969f93cc88d714ac https://qiita.com/takaf51/items/a67db8bbc42a4c82b1f0

ContentView.swift

import SwiftUI

struct ContentView: View {
    let halfScreenWidth = UIScreen.main.bounds.width / 2
    let magnification: CGFloat = 1.8
    
    var body: some View {
        ScrollView(.vertical, showsIndicators: false) {
            horizontalBalls
            Spacer()
            horizontalImages
            Spacer()
            horizontalCircleImages
            Spacer()
        }
    }
    
    var horizontalBalls: some View {
        ScrollView(.horizontal, showsIndicators: true) {
            HStack(spacing: 15) {
                ForEach(0...100, id: \.self) { _ in
                    GeometryReader { geometry in
                        Circle()
                            .frame(width: 100, height: 100)
                            .frame(minHeight: geometry.size.height)
                            .foregroundColor(.red)
                            .scaleEffect(
                                max(1,
                                    -abs(geometry.frame(in: .global).midX - self.halfScreenWidth) / self.halfScreenWidth * self.magnification + self.magnification
                                   )
                            )
                    }
                    .frame(width: 100, height: self.magnification * 100)
                    .padding()
                }
            }
        }
    }
    
    var horizontalImages: some View {
        ScrollView(.horizontal, showsIndicators: true) {
            HStack(spacing: 15) {
                ForEach(0...100, id: \.self) { _ in
                    GeometryReader { geometry in
                        Image("turtlerock")
                            .resizable()
                            .frame(width: 100, height: 100)
                            .frame(minHeight: geometry.size.height)
                            .foregroundColor(.red)
                            .scaleEffect(
                                max(1,
                                    -abs(geometry.frame(in: .global).midX - self.halfScreenWidth) / self.halfScreenWidth * self.magnification + self.magnification
                                   )
                            )
                    }
                    .frame(width: 100, height: self.magnification * 100)
                    .padding()
                }
            }
        }
    }
    
    var horizontalCircleImages: some View {
        ScrollView(.horizontal, showsIndicators: true) {
            HStack(spacing: 15) {
                ForEach(0...100, id: \.self) { _ in
                    GeometryReader { geometry in
                        Image("turtlerock")
                            .resizable()
                            .clipShape(Circle())
                            .overlay {
                                Circle().stroke(.white, lineWidth: 2)
                            }
                            .shadow(radius: 7)
                            .frame(width: 100, height: 100)
                            .frame(minHeight: geometry.size.height)
                            .foregroundColor(.red)
                            .scaleEffect(
                                max(1,
                                    -abs(geometry.frame(in: .global).midX - self.halfScreenWidth) / self.halfScreenWidth * self.magnification + self.magnification
                                   )
                            )
                    }
                    .frame(width: 100, height: self.magnification * 100)
                    .padding()
                }
            }
        }
    }
}