[iOS - swift] 애니메이션 동시에 적용하는 방법 (CAAnimationGroup 개념)

CAAnimationGroup으로 구현한 fadeAndScale

CAAnimationGroup 개념

• 이름 그대로 동시에 여러가지의 CAAnimation을 적용하고 싶은 경우, group으로 묶어서 실행되게끔 할 수 있는데 이때 사용하는게 CAAnimationGroup

https://developer.apple.com/documentation/quartzcore/caanimationgroup

CAAnmationGroup 사용방법

• 직관적으로 CABasicAnimation들을 group에 넣고 이 group을 뷰의 layer에 add해주면 완성
• 파란색 뷰 준비

파란 뷰

final class CircleView: UIView {
    override func layoutSubviews() {
        super.layoutSubviews()
        clipsToBounds = true
        layer.cornerRadius = frame.height / 2
    }
}

class ViewController: UIViewController {
    let circleView = CircleView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        circleView.backgroundColor = .blue
        view.addSubview(circleView)
        circleView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            circleView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            circleView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            circleView.widthAnchor.constraint(equalToConstant: 100),
            circleView.heightAnchor.constraint(equalToConstant: 100),
        ])
    }
}

• 버튼을 눌렀을때 이 뷰에 애니메이션 부여하기 위해서, 애니메이션 함수 정의
  • CABasicAnimation은 기존 방법대로 생성

@objc
private func showAnimation() {
    /// 코드 참고:  https://developer.apple.com/documentation/quartzcore/caanimationgroup
    let fadeOut = CABasicAnimation(keyPath: "opacity")
    fadeOut.fromValue = 1
    fadeOut.toValue = 0
         
    let expandScale = CABasicAnimation()
    expandScale.keyPath = "transform"
    expandScale.valueFunction = CAValueFunction(name: CAValueFunctionName.scale)
    expandScale.fromValue = [1, 1, 1]
    expandScale.toValue = [3, 3, 3]
         
    let fadeAndScale = CAAnimationGroup()
    // TODO
}

• CAAnimationGroup 인스턴스를 얻어서 여기에 위에서 만든 두 개의 애니메이션을 넣고 dutation 설정한 후 뷰의 layer에 추가하면 완성

let fadeAndScale = CAAnimationGroup()
fadeAndScale.animations = [fadeOut, expandScale]
fadeAndScale.duration = 1

circleView.layer.add(fadeAndScale, forKey: "fade_and_scale")

(애니메이션 부분 전체 코드)

@objc
private func showAnimation() {
    /// 코드 참고:  https://developer.apple.com/documentation/quartzcore/caanimationgroup
    let fadeOut = CABasicAnimation(keyPath: "opacity")
    fadeOut.fromValue = 1
    fadeOut.toValue = 0
         
    let expandScale = CABasicAnimation()
    expandScale.keyPath = "transform"
    expandScale.valueFunction = CAValueFunction(name: CAValueFunctionName.scale)
    expandScale.fromValue = [1, 1, 1]
    expandScale.toValue = [3, 3, 3]
         
let fadeAndScale = CAAnimationGroup()
fadeAndScale.animations = [fadeOut, expandScale]
fadeAndScale.duration = 1

circleView.layer.add(fadeAndScale, forKey: "fade_and_scale")
}

완성)

CAAnimationGroup으로 구현한 fadeAndScale

읽어보면 좋을 다음 글) CAAnimationGroup으로 pulse 애니메이션 구현 방법 포스팅 글 

 

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

* 참고

- https://developer.apple.com/documentation/quartzcore/caanimationgroup