[swift] 이미지 슬라이드쇼에서 이미지 스와이프 속도 변경하기

27 Nov 2023

swift

이미지 슬라이드쇼를 구현하고 있는데, 이미지를 스와이프할 때의 속도를 변경하고 싶다면 어떻게 해야 할까요? 이번 포스트에서는 Swift 언어를 기반으로 이미지 스와이프 속도를 변경하는 방법에 대해 알아보겠습니다.

1. UIPanGestureRecognizer 사용하기

먼저, 이미지 스와이프 동작을 구현하기 위해서는 UIPanGestureRecognizer를 사용해야 합니다. 이 클래스를 사용하여 사용자의 스와이프 동작을 감지하고, 그에 따라 이미지를 이동시킬 수 있습니다. 다음은 UIPanGestureRecognizer를 사용한 이미지 스와이프 동작의 예시 코드입니다.

import UIKit

class ImageSliderViewController: UIViewController {

    @IBOutlet weak var imageView: UIImageView!
    
    var originalCenter: CGPoint!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let panGestureRecognizer = UIPanGestureRecognizer(target: self, action: #selector(handlePan(_:)))
        imageView.addGestureRecognizer(panGestureRecognizer)
    }
    
    @objc func handlePan(_ gestureRecognizer: UIPanGestureRecognizer) {
        if gestureRecognizer.state == .began {
            originalCenter = imageView.center
        } else if gestureRecognizer.state == .changed {
            let translation = gestureRecognizer.translation(in: imageView)
            imageView.center = CGPoint(x: originalCenter.x + translation.x, y: originalCenter.y)
        }
    }
}

위의 코드에서는 UIPanGestureRecognizer를 이용하여 이미지 뷰를 스와이프하는 동작을 구현하였습니다. 사용자가 이미지 뷰를 스와이프하면 handlePan(_:) 메서드가 호출되어 이미지 뷰의 위치를 변경합니다.

2. 스와이프 속도 변경하기

이제 스와이프 속도를 변경해보겠습니다. UIPanGestureRecognizer 클래스에는 velocity(in:) 메서드가 있습니다. 이 메서드를 사용하면 사용자의 스와이프 속도를 알 수 있습니다. 다음은 스와이프 속도를 이용하여 이미지 이동 속도를 변경하는 예시 코드입니다.

@objc func handlePan(_ gestureRecognizer: UIPanGestureRecognizer) {
    if gestureRecognizer.state == .began {
        originalCenter = imageView.center
    } else if gestureRecognizer.state == .changed {
        let translation = gestureRecognizer.translation(in: imageView)
        let velocity = gestureRecognizer.velocity(in: imageView)
        imageView.center = CGPoint(x: originalCenter.x + translation.x + velocity.x * 0.1, y: originalCenter.y)
    }
}

위의 코드에서는 velocity(in:) 메서드를 사용하여 사용자의 스와이프 속도를 가져옵니다. 그리고 이 속도를 이미지의 이동에 반영하여 이미지가 빠른 속도로 이동하도록 합니다. velocity.x 값에 0.1을 곱해서 값을 조정하고 있습니다. 이 값을 조정함으로써 속도를 변경할 수 있습니다.

3. 참고 자료

이제 스와이프 속도를 변경하여 이미지 슬라이드쇼를 향상시킬 수 있습니다. 위의 예시 코드를 참고하여 원하는 속도 조정을 해보세요.