[swift] SnapKit으로 커스텀 애니메이션 이펙트 구현하기

15 Nov 2023

swift

커스텀 애니메이션 이펙트는 iOS 앱의 사용자 경험을 향상시키는 데 중요한 역할을 합니다. SnapKit은 Swift 기반의 레이아웃 라이브러리로, 애니메이션 및 뷰 구성을 쉽게 구현할 수 있도록 도와줍니다.

이 튜토리얼에서는 SnapKit을 사용하여 커스텀 애니메이션 이펙트를 구현하는 방법을 알아보겠습니다.

준비하기

먼저, SnapKit을 프로젝트에 추가해야 합니다. CocoaPods를 사용하는 경우 Podfile에 다음과 같이 추가합니다:

pod 'SnapKit'

그리고 터미널에서 pod install 명령을 실행하여 SnapKit을 설치합니다.

애니메이션 구현하기

SnapKit을 사용하여 커스텀 애니메이션 이펙트를 구현하는 예제를 살펴보겠습니다. 먼저, 동그라미 모양의 UIView를 생성하고 애니메이션 효과를 추가해보겠습니다.

import UIKit
import SnapKit

class CustomAnimationViewController: UIViewController {
    
    let circleView = UIView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        setupCircleView()
    }
    
    private func setupCircleView() {
        view.addSubview(circleView)
        
        circleView.snp.makeConstraints { make in
            make.centerX.equalToSuperview()
            make.centerY.equalToSuperview()
            make.width.height.equalTo(100)
        }
        
        circleView.layer.cornerRadius = 50
        circleView.backgroundColor = UIColor.red
        
        animateCircle()
    }
    
    private func animateCircle() {
        UIView.animate(withDuration: 2.0, delay: 0.0, options: [.repeat, .autoreverse], animations: {
            self.circleView.transform = CGAffineTransform(scaleX: 1.5, y: 1.5)
        }, completion: nil)
    }
}

위 예제에서는 CustomAnimationViewController에 circleView를 추가하고, setupCircleView() 메서드를 사용하여 뷰를 초기화하고 애니메이션을 설정합니다. animateCircle() 메서드에서는 UIView.animate를 사용하여 동그라미를 확대/축소하는 애니메이션을 구현합니다.

사용하기

CustomAnimationViewController를 사용하려면 해당 뷰 컨트롤러의 인스턴스를 생성하고 표시해야 합니다. 예를 들어, 뷰 컨트롤러를 탐색 스택에 푸시하여 표시할 수 있습니다.

let customVC = CustomAnimationViewController()
self.navigationController?.pushViewController(customVC, animated: true)

마지막으로, 앱을 빌드하고 실행하여 커스텀 애니메이션 이펙트가 작동하는지 확인할 수 있습니다.

결론

이 튜토리얼에서는 [SnapKit]을 사용하여 커스텀 애니메이션 이펙트를 구현하는 방법을 알아보았습니다. SnapKit의 간편한 문법과 애니메이션 기능을 사용하여 iOS 앱에서 멋진 사용자 경험을 제공할 수 있습니다.

더 자세한 정보와 예제는 SnapKit 공식 GitHub 저장소를 참조하세요.

Happy coding!