[xcode8, Swift 3] UIImageView 에서 탭제스처를 이용해서 가운데 위치 시키기

사전 학습

[xcode8, Swift 3] UIScrollView 에서 UIImageView 적용하고 이미지 줌인, 줌아웃

"UIScrollView 에서 UIImageView 적용하고 이미지 줌인, 줌아웃" 글에서 작성한 프로젝트에 Tap Gesture 를 이용해서 선택한 영역을 UIScrollView의 가운데 위치 하도록 코드를 추가할 것입니다.

개발 환경

xcode8, Swift 3

코드 작성

ViewController.swift 파일의 viewDidLoad() 에 다음 코드를 추가한다.

override func viewDidLoad() {

...

//ImageView의 TabGesture 인식 시킨다.

imageView.isUserInteractionEnabled = true

let tapGesture = UITapGestureRecognizer(target: self, action: #selector(buttonTapped))

imageView.addGestureRecognizer(tapGesture)

...

}

Tap Gesture를 처리하기 위한 메소드를 클래스 ViewController 에 추가한다.

    //ImageView의 TabGesture이벤트를 처리한다.

    func buttonTapped(sender: UITapGestureRecognizer) {

        if (sender.state == .ended) {

            //터치한 이미지뷰의 좌표를 가져온다.

            let point = sender.location(in: sender.view)

            

            //터치한 좌표를 스크롤뷰의 중앙에 위치 시킨다.

            let x = (point.x * scrollView.zoomScale) - (scrollView.bounds.size.width / 2)

            let y = (point.y * scrollView.zoomScale) - (scrollView.bounds.size.height / 2)

            scrollView.contentOffset = CGPoint(x: x, y: y)

        }

    }

scrollView.contentOffset = CGPoint(x: x, y: y) 를 실행하면 점프 하듯이 화면이 변합니다. 

이것을 부드럽게 일정 시간동안 이동을 해서 원하는 위치로 가도록 할 수 있습니다.

위 코드 대신 아래 코드를 사용하면 됩니다.

DispatchQueue.main.async {

UIView.animate(withDuration: 0.5, delay: 0, options: UIViewAnimationOptions.curveEaseOut, animations: {

self.scrollView.contentOffset = CGPoint(x: x, y: y)

}, completion: nil)

}

animateWithDuration 클래스 메서드의 options 인자에 애니메이션 커브(animation curve)를 지정하여 설정할 수 있습니다. 지정 가능한 애니메이션 커브는 다음과 같습니다.

 

• UIViewAnimationOptions.CurveLinear : 지정된 시간동안 일정한 속도로 애니메이션이 수행
• UIViewAnimationOptions.CurveEaseOut : 시작은 빠르지만 점점 느리게 진행
• UIViewAnimationOptions.CurveEaseIn : 천천히 시작되지만 점점 빨라진다
• UIViewAnimationOptions.CurveEaseInOut : 천천히 시작하여 점점 빨라지다가 다시 천천히 종료

[출처] [iOS] 코어 애니메이션(Core Animation)에 대해 알아보자 |작성자 zzozzo