iOS) Confetti Animation Effect

Confetti : 색종이 조각 이라는 뜻 

 

이번에는 CAEmitterLayer 를 활용해서 신기한 animation 을 연습해봤다. 

이걸 활용하면 ios 날씨 앱에서 비오는 효과를 줄 수도 있을것같다. (단, 이미지를 여기서는 기본 white 네모 이미지를 사용했지만 비효과 이미지를 사용할 경우)

 

이 예제에서는 간단하게 버튼을 생성해서 버튼을 클릭하면 애니메이션 효과가 발생하도록 하였다.

 

import UIKit

class ViewController: UIViewController {

  //MARK: - Properties
  
  //MARK: - Lifecycle
  override func viewDidLoad() {
    super.viewDidLoad()
    let button = UIButton(frame: CGRect(x: 0, y: 0, width: 200, height: 50))
    view.addSubview(button)
    button.backgroundColor = .systemBlue
    button.center = view.center
    button.setTitle("START", for: .normal)
    button.addTarget(self, action: #selector(didTapButton), for: .touchUpInside)
  }
  
  //MARK: - Functions
  private func createLayer() {
    let layer = CAEmitterLayer()
    layer.emitterPosition = CGPoint(x: view.center.x, y: -100) // where to start
    
    let colors : [UIColor] = [.systemRed, .systemBlue, .systemOrange, .systemGreen, .systemPink, .systemYellow]
    
    let cells : [CAEmitterCell] = colors.compactMap {
      let cell = CAEmitterCell()
      cell.scale = 0.05 
      cell.emissionRange = .pi * 2
      cell.lifetime = 10 
      cell.birthRate = 50
      cell.velocity = 150 
      cell.color = $0.cgColor // Important! 하얀 이미지를 사용해야 색이 render 되서 입혀진다.
      cell.contents = UIImage(named: "image2")!.cgImage
      return cell
    }
    
    layer.emitterCells = cells
    view.layer.addSublayer(layer)
  }

  @objc private func didTapButton() {
    createLayer()
  }
}

• CAEmitterLayer() 사용
• emitterPosition : 애니메이션 시작 위치 
• scale : 크기 
• lifetime : 지속 시간 
• birthRate : 나타나는 빈도 
• velocity : 속도 
• color : 이미지 색
• contents : 내용 (이미지) 
• 중요! color 속성을 주기 위해서 이미지는 반드시 white 이미지를 사용해야 한다.