[iOS - swift] Wave Animation (웨이브 애니메이션)

구현 아이디어

• UIView 2개를 준비
  • 안쪽 뷰 하나
  • 바깥 쪽 waveView 하나
• 바깥 쪽 waveView의 CGSize를 크게했다가, 줄였다가를 재귀적으로 계속 요청하여 반복되도록 설정

구현

• 원 형태로 그려지게 할것이므로, RoundView 준비

import UIKit

class RoundView: UIView {
  override func layoutSubviews() {
    super.layoutSubviews()
    self.clipsToBounds = true
    self.layer.cornerRadius = self.bounds.height / 2.0
  }
}

 

• Wave Animation을 적용할 ViewController 준비

import UIKit

class ViewController: UIViewController {
}

• 상수 선언
  • contentSize는 wave 애니메이션 안에 있는 원의 크기
  • waveSize는 웨이브 애니메이션이 보여지는 뷰의 크기

  private enum Const {
    static let contentSize = CGSize(width: 120, height: 120)
    static var waveSize: CGSize {
      CGSize(width: Self.contentSize.width + 50, height: Self.contentSize.height + 50)
    }
  }

• UI 준비
  • contentsView
  • waveView

  private let contentsView: RoundView = {
    let view = RoundView()
    view.backgroundColor = .blue
    view.alpha = 0.05
    view.translatesAutoresizingMaskIntoConstraints = false
    return view
  }()
  private let waveView: RoundView = {
    let view = RoundView()
    view.backgroundColor = .blue
    view.alpha = 0.15
    view.translatesAutoresizingMaskIntoConstraints = false
    return view
  }()

• 레이아웃 정의
  • 애니메이션이 시작되기 전에는 contentsView와 waveView의 위치와 크기가 같도록 설정

  override func viewDidLoad() {
    super.viewDidLoad()
    
    self.view.addSubview(self.contentsView)
    self.view.addSubview(self.waveView)
    
    NSLayoutConstraint.activate([
      self.contentsView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
      self.contentsView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
      self.contentsView.widthAnchor.constraint(equalToConstant: Const.contentSize.width),
      self.contentsView.heightAnchor.constraint(equalToConstant: Const.contentSize.height),
    ])
    NSLayoutConstraint.activate([
      self.waveView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
      self.waveView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
      self.waveView.widthAnchor.constraint(equalToConstant: Const.contentSize.width),
      self.waveView.heightAnchor.constraint(equalToConstant: Const.contentSize.height),
    ])
    
    self.animate() // 아래에서 구현
  }

• shouldBeAnimated 프로퍼티를 두어서, 이 프로퍼티를 통해 쉽게 애니메이션을 사용할 수 있도록 설계

  var shouldBeAnimated = true {
    didSet {
      guard self.shouldBeAnimated else { return }
      self.animate() // 아래에서 구현
    }
  }

• 애니메이션 구현
  • 오토 레이아웃을 사용하므로, UIView.animate에서 layoutIfNeeded를 선언하여 구현
  • completion에서 다시 자기 자신을 호출하여 계속 반복되도록 구현

  private func animate(_ flag: Bool = true) {
    guard self.shouldBeAnimated else { return }
    self.view.layoutIfNeeded()
    
    if flag {
      self.waveView.removeConstraints(self.waveView.constraints)
      NSLayoutConstraint.activate([
        self.waveView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
        self.waveView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
        self.waveView.widthAnchor.constraint(equalToConstant: Const.waveSize.width),
        self.waveView.heightAnchor.constraint(equalToConstant: Const.waveSize.height),
      ])
    } else {
      self.waveView.removeConstraints(self.waveView.constraints)
      NSLayoutConstraint.activate([
        self.waveView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
        self.waveView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
        self.waveView.widthAnchor.constraint(equalToConstant: Const.contentSize.width),
        self.waveView.heightAnchor.constraint(equalToConstant: Const.contentSize.height),
      ])
    }
    
    UIView.animate(
      withDuration: 0.5,
      delay: 0,
      options: [.curveEaseInOut, .beginFromCurrentState],
      animations: self.view.layoutIfNeeded,
      completion: {
        guard $0 else { return }
        self.animate(!flag)
      }
    )
  }

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