[swift] Swift Koloda를 사용하여 카드 이동 시 애니메이션 효과 추가하기

16 Nov 2023

swift

Koloda는 Swift로 작성된 카드 스와이프 기능을 제공하는 라이브러리입니다. 이 라이브러리를 사용하면 Tinder와 같은 앱에서의 카드 스와이프 기능을 간단하게 구현할 수 있습니다. 이번에는 Swift Koloda를 사용하여 카드 이동 시 애니메이션 효과를 추가하는 방법에 대해 알아보겠습니다.

먼저, Koloda 라이브러리를 프로젝트에 추가해야 합니다. Cocoapods를 사용하신다면, Podfile에 다음과 같이 추가해주세요.

pod 'Koloda'

이제 터미널을 열고 pod install 명령어를 실행하여 라이브러리를 설치합니다.

설치가 완료되면, 뷰 컨트롤러에서 Koloda뷰를 추가하고, 데이터를 로드하는 방법을 알아보겠습니다.

import UIKit
import Koloda

class ViewController: UIViewController, KolodaViewDelegate, KolodaViewDataSource {
    
    @IBOutlet weak var kolodaView: KolodaView!
    var cards: [Card] = []

    override func viewDidLoad() {
        super.viewDidLoad()
        
        kolodaView.delegate = self
        kolodaView.dataSource = self
        
        // 카드 데이터를 로드하는 함수 호출
        loadCards()
    }
    
    // 카드 데이터를 로드하는 함수
    func loadCards() {
        // 데이터를 로드하고 cards 배열에 저장하는 코드
    }
    
    // MARK: KolodaViewDelegate와 KolodaViewDataSource 메서드 구현
    // ...

}

이제 KolodaView의 delegate와 dataSource를 뷰 컨트롤러에 연결했으므로, 카드 이동 시 애니메이션 효과를 추가해보겠습니다.

// MARK: KolodaViewDelegate 메서드 구현

func koloda(_ koloda: KolodaView, didSwipeCardAt index: Int, in direction: SwipeResultDirection) {
    // 카드를 스와이프했을 때의 애니메이션 효과를 추가하는 코드
    switch direction {
    case .left:
        // 왼쪽으로 스와이프한 경우
        UIView.animate(withDuration: 0.3) {
            kolodaView.transform = CGAffineTransform(translationX: -kolodaView.frame.width, y: 0)
        } completion: { _ in
            kolodaView.transform = .identity
            // 다음 카드를 로드하고 새로운 애니메이션 효과를 적용하는 코드
            self.nextCard()
        }
    case .right:
        // 오른쪽으로 스와이프한 경우
        UIView.animate(withDuration: 0.3) {
            kolodaView.transform = CGAffineTransform(translationX: kolodaView.frame.width, y: 0)
        } completion: { _ in
            kolodaView.transform = .identity
            // 다음 카드를 로드하고 새로운 애니메이션 효과를 적용하는 코드
            self.nextCard()
        }
    default:
        break
    }
}

// 다음 카드를 로드하고 애니메이션 효과를 적용하는 함수
func nextCard() {
    kolodaView.swipe(.up)
    // 새로운 카드를 로드하고 해당 카드에 애니메이션 효과를 적용하는 코드
}

위의 코드에서는 카드를 왼쪽 또는 오른쪽으로 스와이프한 경우에 애니메이션 효과를 주는 예시를 보여주고 있습니다. 여기서는 translationX 속성을 사용하여 카드를 이동시키는 애니메이션을 구현했으며, 애니메이션의 지속시간은 0.3초로 설정하였습니다.

위의 코드는 애니메이션 효과를 주는 예시이므로 실제 프로젝트에 사용될 수 있는 완벽한 코드는 아닙니다. 필요에 따라 적절한 애니메이션 효과와 움직임을 추가해주세요.

이제 Swift Koloda를 사용하여 카드 이동 시 애니메이션 효과를 추가하는 방법에 대해 알아보았습니다. 이를 참고하여 프로젝트에 원하는 애니메이션 효과를 적용해보세요.