Swift Card Flip 애니메이션 구현하기

iOS 앱을 만들때, 애니메이션을 적용시키는 것이 생각보다 간단한 방법이길래 소개해본다.

 

 

 

1. Xcode - Single View App 프로젝트를 생성한다.

2. Asset 에 전환시킬 사진을 업로드한다.

 

Image: 낮 사진 / Image-1: 밤 사진

 

3. Storyboard로 가서 이미지가 보여질 ImageView와 Button을 생성한다.

 

 

4. Contraints를 걸어준다. (시뮬레이터가 바뀌어도 View들을 고정시킬 수 있다.)

5. command+option+control+enter 키로 Assistant Editor를 켜고 control 을 누른 상태로 ImageView를 보조편집기로 끌어온다.

 

 

6. Button은 마우스 우클릭을 한 후 Touch Up Inside 를 끌어서 보조 편집기에 마찬가지로 추가한다.

7. ViewController에서 아래와 같이 코드를 작성한다.

 

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var imageView: UIImageView!
    var isDayImage: Bool = true

    override func viewDidLoad()
    {
        super.viewDidLoad()
        imageView.image = UIImage(named: "Image")
    }

    @IBAction func buttonClicked(_ sender: Any) {
        if isDayImage {
            isDayImage = false
            let toImage = UIImage(named: "Image-1")
            imageView.image = toImage
            UIView.transition(with: imageView, duration: 0.3, options: .transitionFlipFromLeft, animations: nil, completion: nil)
        }
        else {
            isDayImage = true
            let toImage = UIImage(named: "Image")
            imageView.image = toImage
            UIView.transition(with: imageView, duration: 0.3, options: .transitionCrossDissolve, animations: nil, completion: nil)
        }
    }
}

 

애니메이션에 해당하는 코드부분은

 

UIView.transition(with: imageView, 
        duration: 0.3, 
                 options: .transitionFlipFromLeft, 
                 animations: nil, 
                 completion: nil)

 

인데, imageView를 가지고 duration의 시간동안 options에 해당하는 애니메이션을 진행한다. .transitionFlipFromLeft 는 왼쪽에서 카드가 뒤집어지는 액션이고, .transitionCrossDissolve 는 희미하게 변화하는 액션이다.

 

이 외에도 여러 옵션들이 있다.

 

 

애니메이션 효과를 주는 방법에는 transition 말고도 animate라는 타입 메소드도 있다. 차이를 정확하게 알지 모르니 학습 후에 다루어 보도록 하겠다..

 

 

 

 

참고
공식 문서