animateKeyframes / addKeyframe 실습

예시 코드 1)

/* 레이아웃이 결정되고 나서 아래와 같은 일을 수행하고자 할 때 이 메서드를 override하여 사용
 다른 뷰들의 컨텐트 업데이트
 뷰들의 크기나 위치를 최종적으로 조정
 테이블의 데이터를 reload */
override func viewDidLayoutSubviews() {
    let viewAnimated = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
    viewAnimated.center = view.center

    view.addSubview(viewAnimated)

    keyFrameAnimate(for: viewAnimated)
}

func keyFrameAnimate(for viewToAnimate: UIView) {
        let overallDuration: Double = 10
        
        UIView.animateKeyframes(withDuration: overallDuration, delay: 0, options: [.autoreverse, .calculationModeLinear], animations: {
            UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 1/overallDuration, animations: {
                viewToAnimate.transform = CGAffineTransform(rotationAngle: CGFloat(Float.pi/2))
                viewToAnimate.alpha = 1.0
                viewToAnimate.backgroundColor = .systemPink
                viewToAnimate.layer.cornerRadius = viewToAnimate.frame.height / 2
            })
            
            UIView.addKeyframe(withRelativeStartTime: 1/overallDuration, relativeDuration: 2/overallDuration, animations: {
                viewToAnimate.transform = CGAffineTransform(scaleX: 50, y: -50)
                viewToAnimate.alpha = 0.5
                viewToAnimate.backgroundColor = .systemMint
            })
            
            UIView.addKeyframe(withRelativeStartTime: 2/overallDuration, relativeDuration: 1/overallDuration, animations: {
                viewToAnimate.transform = CGAffineTransform(translationX: -100, y: -100)
                viewToAnimate.alpha = 1.0
                viewToAnimate.backgroundColor = .systemPurple
                viewToAnimate.layer.cornerRadius = 0
            })
            
            UIView.addKeyframe(withRelativeStartTime: 3/overallDuration, relativeDuration: 2/overallDuration, animations: {
                viewToAnimate.transform = CGAffineTransform(translationX: 0, y: 0)
                viewToAnimate.backgroundColor = .systemPink
            })
            
        }, completion: nil)
    }

구동화면

예시 코드 2)

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var basketTop: UIImageView!
    @IBOutlet weak var basketBottom: UIImageView!
    
    @IBOutlet weak var fabricTop: UIImageView!
    @IBOutlet weak var fabricBottom: UIImageView!
    
    @IBOutlet weak var basketTopConstraint : NSLayoutConstraint!
    @IBOutlet weak var basketBottomConstraint : NSLayoutConstraint!
    
    @IBOutlet weak var bug: UIImageView!
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }
    
    override func viewDidAppear(_ animated: Bool) {
        openBasket()
        openNapkins()
    }
    
    // AutoLayout이 지정된 경우
    private func openBasket() {
        basketTopConstraint.constant -= basketTop.frame.size.height
        basketBottomConstraint.constant -= basketBottom.frame.size.height
        
        UIView.animate(withDuration: 0.7, delay: 1.0, options: .curveEaseOut, animations: {
            self.view.layoutIfNeeded()
        }, completion: { finished in
            print("Basket Opened")
        })
    }
    
    // AutoLayout이 지정되지 않은 경우
    private func openNapkins() {
        UIView.animate(withDuration: 1.0, delay: 1.2, options: .curveEaseOut, animations: {
            self.fabricTop.frame.origin.y -= self.fabricTop.frame.size.height
            self.fabricBottom.frame.origin.y += self.fabricBottom.frame.size.height
        }, completion: { finished in
            print("Napkins Opened")
        })
    }
}

📚 알쓸신잡

pi 원주율

 

참고 링크

🎬 Youtube - https://www.youtube.com/watch?v=M1UeQVfSIik

📒 Blog - https://jarnowouda.com/what-are-radians/