[iOS/UIKit] Fade 효과로 Transform Animation 구현하기

Transform

Transform (변형) 은 크게 다음 3가지로 분류할 수 있다.

 

  1. 회전 (Rotation)

  2. 확대/축소 (Scale)

  3. 옮김 (Translation)  

 

원하는 변형 방법을 Fade 효과와 함께 사용할 수 있다. 아래 예시에서는 Translation 을 이용해본다.

Label 을 이동(Translation)시키며 fade 효과로 전환하기

  1. 보조 라벨(변경된 텍스트를 가진)을 투명하게 하여 기존 라벨 위치에 놓은 뒤 옆이나 위 아래로 translation 한다.

  2. 기존의 라벨의 alpha 값을 0으로 바꾸며(Fade out) 보조 라벨이 translation 된 위치로 이동한다.

  3. 보조 라벨을 Fade in하며 원래의 위치 (기존 라벨이 있던 위치) 로 옮긴다.

  4. 기존 라벨을 보조 라벨의 텍스트로 갱신하고 원래의 자리에 위치시킨다. (보조 라벨은 제거한다.)

 

func move(label: UILabel, text: String, offset: CGPoint) {
        // Create & set up temp label.
        let  tempLabel = duplicate(label) // duplicate function duplicates the label's everything.
        tempLabel.text = text
        tempLabel.transform = .init(translationX: offset.x, y: offset.y)
        tempLabel.alpha = 0
        view.addSubview(tempLabel)
        
        UIView.animate(
            withDuration: 0.5, delay: 0,
            options: .curveEaseIn,
            animations: {
                // Fade out and translate the real label.
                label.transform = .init(translationX: offset.x, y: offset.y)
                label.alpha = 0
                
                // Fade in and translate the temp label.
                tempLabel.transform = .identity
                tempLabel.alpha = 1
            },
            completion: { _ in
                // Update the real label and remove the temp label.
                label.text = text
                label.alpha = 1
                label.transform = .identity
                tempLabel.removeFromSuperview()
            }
        )
}