이미지 움직이는 제스쳐 추가

[QuaRang1225]

이미지 드래그,더블 터치,핀치 인&아웃 제스쳐 추가

• 이미지를 핀치 인&아웃 드래그해서 크기와 offset을 확인할 수 있도로 구현
• 이미지 더블 터치 시 확대 및 되돌리기 구현

[QuaRang1225]

이미지 확대 및 드래그 등 사진 자세히 보기 기능 구현

• 사진을 핀치 인&아웃해서 크기를 정할 수 있는 제스쳐 구현
• 만약 사진이 프레임 바깥으로 넘어갔다면 정중앙으로 이동하는 로직 구현
• 더블 터치로 2배 및 1/2 사진 프레임 크기 변경하는 제스쳐 구현
• 이미지를 내릴 시 닫는 애니메이션도 구현

핵심 코드

• 변환 아이템

  GeometryReader{ geo in
  let g = geo.frame(in: .named("G"))
  PhotosItemView(assets: selectedAssets)
      .scaledToFit()
      .frame(maxWidth: .infinity,maxHeight: .infinity)
      .matchedGeometryEffect(id: selectedAssets.localIdentifier, in: namespace)
      .onChange(of: changed) { change in
          withAnimation(.easeIn(duration: 0.1)){
              if g.minX > 0{
                  currentOffset.width = currentOffset.width - g.minX
              }
              if g.minY > 0{
                  currentOffset.height = currentOffset.height - g.minY
                  if mainCurrentScale == 1{
                      self.selectedAssets = nil
                  }
              }
              if g.maxX < width(){
                  currentOffset.width = g.minX - currentOffset.width
              }
              if g.maxY < width(){
                  currentOffset.height = g.minY - currentOffset.height
              }
              if !change{
                  endOffset = currentOffset
              }
          }
      }
  }
  .scaleEffect(mainCurrentScale)
  .offset(currentOffset)
  .frame(height: height()/1.3)
  .simultaneousGesture(drag)
  .simultaneousGesture(pinch)
  .onTapGesture(count: 2) { 
  withAnimation {
      if mainCurrentScale == 1{
          mainCurrentScale = 2
          endScale = 2
      }else{
          mainCurrentScale = 1
          endScale = 1
          currentOffset = .zero
          endOffset = .zero
      }
  }
  }
  .coordinateSpace(name: "G")

• 제스쳐 부분

  
  var drag:some Gesture{
  DragGesture()
      .updating($changed){ _,changed,_ in
          changed = true
      }
      .onChanged{ gesture in
          currentOffset = endOffset + gesture.translation
      }
  }
  var pinch:some Gesture{
  MagnificationGesture()
      .updating($changed){ _,changed,_ in
          changed = true
      }
      .onChanged { gesture in
          mainCurrentScale = min(max(gesture + endScale - 1, 1), 3)
      }
      .onEnded { gesture in
          withAnimation(.easeIn(duration: 0.1)){
              endScale = min(max(endScale + gesture - 1, 1), 3)
              if endScale < 1 {
                  mainCurrentScale = 1 
                  endScale = 1
                  currentOffset = .zero
                  endOffset = .zero
              }
          }
      }

}