カードをめくるアニメーションを実装したい

前提・実装したいこと

カードゲームアプリを制作しています。
オープンボタンを押すと裏面を向いていたカードが反転するようなアニメーションをし、表面の画像が表示されるようにしたいのですが、裏面画像をフリップするアニメーションは実装できたのですが、表面の画像への切り替えができずに困っています。
1枚の画像をアニメーションさせるだけでなく、2枚の画像が反転しながら切り替わるようなアニメーションの実装方法をご存知の方がいらっしゃいましたらご教授いただけますと幸いです。

現在参考にしているサイト
iOSアプリ開発でアニメーションするなら押さえておきたい基礎
https://qiita.com/hachinobu/items/57d4c305c907805b4a53

該当のソースコード

Swift
1import UIKit
2
3class ViewController: UIViewController {
4    //カード画像を挿入したいImageView
5    @IBOutlet weak var cardImage: UIImageView!
6    
7    override func viewDidLoad() {
8        super.viewDidLoad()
9                //裏面のカード画像を読み込み
10                let backImage = UIImage(named: "backCard")
11                // cardImageに画像を設定
12                cardImage.image = backImage
13    }
14 
15    @IBAction func openBtn(_ sender: Any) {
16       //裏面のカードを左反転させるアニメーション
17       UIView.transition(with: cardImage, duration: 1.0, options: [.transitionFlipFromLeft], animations: nil, completion: nil)
18        }
19
20}

行動規範の内容に同意します

回答1件

ベストアンサー

UIView.transition(with:duration:options:animations:completion:) の animations: で指定するクロージャに、画像反転後に行いたい操作を入れると期待されているようなアニメーションを行うことが可能となります。

transition(with:duration:options:animations:completion:) - Creates a transition animation for the specified container view.

animations

A block object that contains the changes you want to make to the specified view. This block takes no parameters and has no return value. This parameter must not be NULL.

Discussion

This method applies a transition to the specified view so that you can make state changes to it. The block you specify in the animations parameter contains whatever state changes you want to make. You can use this block to add, remove, show, or hide subviews of the specified view. If you want to incorporate other animatable changes, you must include the allowAnimatedContent key in the options parameter.

全体としてはこのような感じでしょうか。

Swift
1class ViewController: UIViewController {
2    //カード画像を挿入したいImageView
3    @IBOutlet weak var cardImage: UIImageView!
4    
5    // 裏面のカード画像を読み込み
6    let backImage = UIImage(systemName: "circle.fill")
7    
8    // 前面のカード画像を読み込み
9    let frontImage = UIImage(systemName: "circle")
10    
11    override func viewDidLoad() {
12        super.viewDidLoad()
13        
14        // cardImageに画像を設定
15        cardImage.image = frontImage
16    }
17    
18    @IBAction func openBtn(_ sender: Any) {
19        if cardImage.image == frontImage {
20            // 表示されている画像が前面の場合、裏面に返す
21            UIView.transition(with: cardImage,
22                              duration: 1.0,
23                              options: [.transitionFlipFromLeft],
24                              animations: {
25                                self.cardImage.image = self.backImage
26                              },
27                              completion: nil)
28        } else {
29            // 裏面の場合
30            UIView.transition(with: cardImage,
31                              duration: 1.0,
32                              options: [.transitionFlipFromLeft],
33                              animations: {
34                                self.cardImage.image = self.frontImage
35                              },
36                              completion: nil )
37        }
38    }
39}