[iOS] 🎉 CAEmitterLayer 사용해보기

Charlie·2024년 3월 14일

이번 포스팅에서는 CAEmitterLayer를 이용하여 특정 이벤트 성공 시 이를 축하하는(?) 느낌으로 조금 더 재밌게 사용자 경험을 높이고자 했던 시도에 대해서 정리해보겠습니다.

프로젝트에서 기존에는 사용자가 주문을 완료하면 햅틱으로만 주문의 성공, 실패에 대한 피드백을 제공했습니다. 그러나 주문 성공 시 햅틱으로만 피드백을 받기에는 뭔가 밋밋하게 느껴져서 사용자가 성공에 대한 피드백을 보다 확실하게 받으며 서비스를 재밌게 즐길 수 있도록 하고자 CAEmitterLayer를 활용하게 되었습니다.

CAEmitterLayer

final class MyViewController: UIViewController {
	private let emitterLayer = CAEmitterLayer()
    
    override func viewDidAppear(_ animated: Bool) {
    	super.viewDidAppear(animated)
        self.startEntranceAnimation()
    }
    
	private func startEntranceAnimation() {
        self.emitterLayer.emitterPosition = CGPoint(x: Constant.Screen.screenWidth / 2, y: 130)
        self.emitterLayer.birthRate = 1
        self.emitterLayer.emitterCells = self.getEmojiEmitterCells()
        
        self.view.layer.addSublayer(self.emitterLayer)
        
        DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) { [weak self] in
            self?.emitterLayer.birthRate = 0
        }
    }
    
    private func getEmojiEmitterCells() -> [CAEmitterCell] {
        return [/* emojis */].map { emoji in
            let cell = CAEmitterCell()
            cell.contents = emoji.image.resized(to: CGSize(width: 40, height: 40)).cgImage
            cell.lifetime = 3
            cell.birthRate = 14
            
            cell.scale = 0.3
            cell.scaleRange = 0.15
            
            cell.spin = 5
            cell.spinRange = 10
            
            cell.emissionRange = .pi * 2
            
            cell.velocity = 600
            cell.velocityRange = 50
            
            cell.yAcceleration = 1200
            
            return cell
        }
    }}