[swift] PeekPop과 애니메이션 효과를 결합한 앱 디자인 예시

16 Nov 2023

swift

이번 포스트에서는 Swift 언어로 PeekPop과 애니메이션 효과를 결합한 앱 디자인 예시에 대해 알아보겠습니다. PeekPop은 3D Touch를 사용하여 뷰를 미리보는 기능이고, 애니메이션 효과를 추가하여 사용자들에게 더 흥미로운 경험을 제공할 수 있습니다.

예시 앱 소개

예시 앱은 음악 재생 앱으로, 아티스트의 앨범 아트와 곡 목록을 보여줍니다. PeekPop과 애니메이션 효과를 사용하여 앨범 아트를 눌렀을 때 애니메이션 효과와 함께 해당 앨범 자세히 보기 화면으로 전환되는 기능을 구현할 것입니다.

구현 단계

1. PeekPop 기능 추가

먼저, 뷰 컨트롤러에서 PeekPop 기능을 추가해야 합니다. UIViewControllerPreviewingDelegate 프로토콜을 채택하고, registerForPreviewing(with:sourceView:) 메소드를 사용하여 PeekPop을 사용할 뷰를 등록합니다. 아래는 예시 코드입니다.

class AlbumViewController: UIViewController, UIViewControllerPreviewingDelegate {
    
    override func viewDidLoad() {
        if traitCollection.forceTouchCapability == .available {
            registerForPreviewing(with: self, sourceView: albumArtImageView)
        }
    }
    
    func previewingContext(_ previewingContext: UIViewControllerPreviewing, viewControllerForLocation location: CGPoint) -> UIViewController? {
        // 미리보기 화면으로 전환할 뷰 컨트롤러를 반환하는 로직을 작성합니다.
        // 예를 들어, 앨범 자세히 보기 화면으로 전환하는 뷰 컨트롤러를 생성하고 반환할 수 있습니다.
    }
    
    func previewingContext(_ previewingContext: UIViewControllerPreviewing, commit viewControllerToCommit: UIViewController) {
        // 미리보기 화면을 실제 화면으로 전환하는 로직을 작성합니다.
        // 예를 들어, 앨범 자세히 보기 화면을 push 또는 present 할 수 있습니다.
    }
}

2. 애니메이션 효과 추가

PeekPop을 통해 미리보기 화면으로 전환될 때 애니메이션 효과를 추가합니다. 예를 들어, 앨범 아트가 커지면서 미리보기 화면이 나타나도록 애니메이션을 설정할 수 있습니다. 아래는 예시 코드입니다.

func previewingContext(_ previewingContext: UIViewControllerPreviewing, viewControllerForLocation location: CGPoint) -> UIViewController? {
    guard let albumDetailViewController = storyboard?.instantiateViewController(withIdentifier: "AlbumDetailViewController") as? AlbumDetailViewController else { return nil }
    
    // 애니메이션 효과를 추가합니다.
    albumDetailViewController.modalPresentationStyle = .custom
    let animator = CustomAnimator()
    animator.presenting = true
    albumDetailViewController.transitioningDelegate = animator
    
    return albumDetailViewController
}

3. 커스텀 애니메이터 설정

애니메이션 효과를 구현하기 위해 커스텀 애니메이터를 설정합니다. UIViewControllerAnimatedTransitioning 프로토콜을 채택하여 전환 애니메이션을 구현할 수 있습니다. 아래는 예시 코드입니다.

class CustomAnimator: NSObject, UIViewControllerAnimatedTransitioning {
    
    var presenting = true
    
    func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
        return 0.5
    }
    
    func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
        let containerView = transitionContext.containerView
        
        if presenting {
            guard let toView = transitionContext.view(forKey: .to) else { return }
            
            toView.frame = CGRect(x: 0, y: containerView.frame.height, width: containerView.frame.width, height: containerView.frame.height)
            containerView.addSubview(toView)
            
            UIView.animate(withDuration: transitionDuration(using: transitionContext), animations: {
                toView.frame = containerView.frame
            }) { _ in
                transitionContext.completeTransition(true)
            }
        } else {
            guard let fromView = transitionContext.view(forKey: .from) else { return }
            
            UIView.animate(withDuration: transitionDuration(using: transitionContext), animations: {
                fromView.frame = CGRect(x: 0, y: containerView.frame.height, width: containerView.frame.width, height: containerView.frame.height)
            }) { _ in
                fromView.removeFromSuperview()
                transitionContext.completeTransition(true)
            }
        }
    }
}

결론

위의 예시를 참고하여 PeekPop과 애니메이션 효과를 결합한 앱 디자인을 구현할 수 있습니다. 이를 통해 사용자들은 흥미로운 애니메이션과 함께 앱을 더욱 멋지게 경험할 수 있습니다. 추가적으로, PeekPop과 애니메이션 효과 외에도 다양한 기능을 추가하고 발전시켜 나갈 수 있습니다.

예시 앱 소개

구현 단계

1. PeekPop 기능 추가

2. 애니메이션 효과 추가

3. 커스텀 애니메이터 설정

결론

참고 자료