[iOS] 🎨 UI, UX 개선 - Bounceable Cell

이번 포스팅에서는 사용자가 Cell을 클릭 시 조금 더 자연스로운 경험을 제공하기 위해 Cell이 작아졌다가 다시 커질 수 있도록 하는 방법에 대해 정리하려 합니다.

import UIKit

public protocol BounceableCell: UICollectionViewCell {
    func animateBouncing(isTouched: Bool)
}

extension BounceableCell {
    public func animateBouncing(isTouched: Bool) {
        if isTouched {
            Self.animate(withDuration: 0.4,
                         delay: 0,
                         usingSpringWithDamping: 1,
                         initialSpringVelocity: 1,
                         options: .allowUserInteraction) { [weak self] in
                self?.transform = .init(scaleX: 0.96, y: 0.96)
            }
        } else {
            Self.animate(withDuration: 0.4,
                         delay: 0,
                         usingSpringWithDamping: 1,
                         initialSpringVelocity: 0,
                         options: .allowUserInteraction) { [weak self] in
                self?.transform = .identity
            }
        }
    }
}

animateBouncing(isTouched: ) 메소드를 통해 터치 시 또는 터치가 끝났을 때 Cell의 크기를 조정하는 애니메이션을 실행합니다.
애니메이션을 실행할 때 사용되는 매개변수는 다음과 같습니다.

• withDuration: 애니메이션이 실행되는 시간
• delay : 애니메이션이 실행되기 까지의 대기 시간
• usingSpringWithDamping : Spring 애니메이션의 진동 정도. 0에 가까울수록 애니메이션이 진동하는 형태이고, 1에 가까울수록 진동 없이 자연스럽게 진행됩니다.
• initialSpringVelocity : 애니메이션의 초기 속도. 0에 가까울수록 느리게 시작하며 1에 가까울수록 최종 속도에 가까운 속도로 시작합니다. 보다 빠른 반응을 보여주기 위해서 터치 시에는 1로 설정하였습니다.
• options : .allowUserInteraction을 통해 사용자와의 상호작용을 허용했습니다. (따로 설정하지 않아도 잘 동작하긴 했습니다)

이후 Cell에서 delegate 메소드를 통해 터치 시 위 메소드를 호출하여 애니메이션을 보여줍니다.

extension MyCollectionViewCell: BounceableCell {
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        super.touchesBegan(touches, with: event)
        self.animateBouncing(isTouched: true)
    }
    
    override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
        super.touchesEnded(touches, with: event)
        self.animateBouncing(isTouched: false)
    }
    
    override func touchesCancelled(_ touches: Set<UITouch>, with event: UIEvent?) {
        super.touchesCancelled(touches, with: event)
        self.animateBouncing(isTouched: false)
    }
}

이 때 자연스러운 UX를 위해 CollectionView의 scroll event보다 Cell의 touch event의 우선순위를 높게 설정할 수 있도록 아래와 같이 CollectionView의 delaysContentTouches를 설정해줍니다.

// UICollectionView
self.delaysContentTouches = false