[iOS - swift] Pulse 애니메이션 구현 방법 (펄스 애니메이션, CABasicAnimation, CAKeyframeAnimation, CAAnimationGroup)

Pulse 애니메이션

Pulse 애니메이션 구현 아이디어

• CABasicAnimation와 CAKeyframeAnimation 사용
  • 크기를 키우는 애니메이션은 단순히 시간에 따라 일정한 방향으로 키우면 되므로 CABasicAnimation사용(keyPath: transform.scale.xy)
  • 투명도가 밝아졌다가 다시 투명해져야 하므로, 값이 프레임에 따라 다르게 적용되어야하는 CAKeyframeAnimation사용 (keyPath: opacity)
• 위 애니메이션이 동시에 적용되어야 하므로, CAAnimationGroup을 사용

애니메이션 구현

• 클래스 준비

import UIKit

class ViewController: UIViewController {

}

• 뷰 준비

  private let sampleView: UIView = {
    let view = UIView()
    view.backgroundColor = .red
    view.layer.cornerRadius = 50
    view.translatesAutoresizingMaskIntoConstraints = false
    return view
  }()
  
  override func viewDidLoad() {
    super.viewDidLoad()
    
    self.view.addSubview(self.sampleView)
    NSLayoutConstraint.activate([
      self.sampleView.heightAnchor.constraint(equalToConstant: 100),
      self.sampleView.widthAnchor.constraint(equalToConstant: 100),
      self.sampleView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
      self.sampleView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
    ])
  }

• CABasicAnimation으로 크기를 키우는 애니메이션 정의
  • fromValue: xy스케일의 시작 크기 비율
  • toValue: xy스케일의 

let scaleAnimaton = CABasicAnimation(keyPath: "transform.scale.xy")
scaleAnimaton.fromValue = 1
scaleAnimaton.toValue = 1.5

• opacity가 커졌다가 작아져야하므로 CAKeyframeAnimation 사용

let opacityAnimiation = CAKeyframeAnimation(keyPath: "opacity")
opacityAnimiation.values = [0.3, 0.7, 0]
opacityAnimiation.keyTimes = [0, 0.3, 1]

• CAAnimationGroup으로 위 두 애니메이션을 동시에 실행

let animationGroup = CAAnimationGroup()
animationGroup.duration = 1.5
animationGroup.repeatCount = .infinity
animationGroup.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.default)
animationGroup.animations = [scaleAnimaton, opacityAnimiation]

DispatchQueue.main.async {
  self.sampleView.layer.add(animationGroup, forKey: "pulse")
}

* 전체 코드: https://github.com/JK0369/ExPulse