8. MagnificationGesture (확대/축소)

⭐️MagnificationGesture (확대/축소)⭐️

인스타그램에서 피드의 사진을 손가락을 통해 핀치 인/아웃을 하면 사진이 확대/축소 되는 기능이 있다.
이것을 MagnificationGesture와 ScaleEffect를 통해 구현해보자. + 좋아요 버튼까지 간단하게

//  Created by Toughie on 2023/05/24.
//

import SwiftUI

struct MagnificationGesturePrac: View {

    @State var currentAmount: CGFloat = 0
    @State var heartTapped = false
    
    var body: some View {
        
        VStack(spacing: 10) {
            HStack {
                Circle().frame(width: 25, height: 25)
                Text("Toughie")
                Spacer()
                Image(systemName: "ellipsis")
            }
            .padding(.horizontal)
            
            Image("Frame 16")
                .resizable()
                .scaledToFit()
                .frame(height: 300)

                .scaleEffect(1 + currentAmount)
                .gesture (
                    MagnificationGesture()
                        //최초 스케일(100%)에서 MgnificationGesture의 value만큼 변경
                        .onChanged { value in
                            currentAmount = value - 1
                        }
                        //원래 크기로 되돌리기
                        .onEnded { value in
                            withAnimation(.spring()) {
                                currentAmount = 0
                            }
                        }
                )
                //이미지 위로 버튼들이 보이는 현상 방지로 zIndex 사용
                .zIndex(2)
            
            HStack {
                //좋아요 눌렀을 때 색상,스케일 변경
                Image(systemName: heartTapped ? "heart" : "heart.fill")
                    .foregroundColor(heartTapped ? .white : .pink)
                    .scaleEffect(heartTapped ? 1 : 1.2)
                    .onTapGesture {
                        withAnimation(.spring(response: 0.5, dampingFraction: 0.4, blendDuration: 0.1)) {
                            heartTapped.toggle()
                        }
                    }
                Image(systemName: "message")
                Image(systemName: "paperplane")
                Spacer()

            }
            .padding(.horizontal)
            .font(.headline)
            Text("핀치 인 핀치 아웃")
                .frame(maxWidth: .infinity, alignment: .leading)
                .padding(.horizontal)
        }
    }
}

//마지막 확대한 상태를 관리할 때 필요한 변수
    //@State var lastAmount: CGFloat = 0

//        Text("확대 축소 크기 유지")
//            .font(.title)
//            .padding(40)
//            .background(Color.blue.cornerRadius(10))
//            .scaleEffect(1.0 + currentAmount + lastAmount)
//            .gesture(
//                MagnificationGesture()
//                    .onChanged { value in
//                        currentAmount = value - 1
//                    }
//                    .onEnded{ value in
//                        lastAmount += currentAmount
//                        currentAmount = 0
//                    }
//            )