Swift 画像をタップで扉が開くようなアニメーションをするには？

Swiftにてアプリを開発中です。
扉の画像を配置し、その画像をタップすると、扉が開くようなアニメーションをしたいと考えております。
扉が開くアニメーションの先にさらに画像を配置し、それをタップすると画面遷移するイメージです。

以前ホームページを製作した際に、CSSの『Magic』を使い、扉が開くアニメーションを実現したことがあります。
※こちらのデモページのPerspectiveLeftのようなもの

このような動きをSwiftで実現することは可能でしょうか？
ご存知の方はご教授いただけますと幸いです。

宜しくお願い致します。

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

回答1件

ベストアンサー

UIViewのtransformプロパティを使ってアニメーションさせる方法が使えると思います。反転状態はX方向に-1倍なので、UIView.animate()を使って、X方向に-1倍させるアニメーションを行えば良いと思います。

次のコードは、背景色を変更したUIViewで行っている例です。UIViewをUIImageViewなどに置き換えることで、画像に対しても出来ると思います。（frontViewとbackViewのことです）

swift
1import UIKit
2
3class ViewController: UIViewController {
4    
5    var frontView: UIView!
6
7    override func viewDidLoad() {
8        super.viewDidLoad()
9        
10        // ビューの表示位置はX方向右半分、Y方向中央とする
11        let frame = CGRect(x: self.view.bounds.width / 2,
12                           y: self.view.bounds.height / 4,
13                           width: self.view.bounds.width / 2,
14                           height: self.view.bounds.height / 2)
15        
16        // アニメーションの後ろに表示されるビュー
17        let backView = UIView(frame: frame)
18        backView.layer.backgroundColor = UIColor.red.cgColor
19        self.view.addSubview(backView)
20        
21        // アニメーションするビューを上に重ねる
22        self.frontView = UIView(frame: frame)
23        self.frontView.layer.backgroundColor = UIColor.blue.cgColor
24        self.view.addSubview(self.frontView)
25        
26        // タップされたらアニメーションさせる
27        let tap = UITapGestureRecognizer(target: self, action: #selector(self.handleTap(gesture:)))
28        frontView.addGestureRecognizer(tap)
29    }
30    
31    func handleTap(gesture: UIGestureRecognizer) {
32        if gesture.state == .ended {
33            let animationDuration = 1.5 // アニメーション時間
34            UIView.animate(withDuration: animationDuration, animations: {
35                // 右から左にめくるようなアニメーション
36                let dx = self.frontView.frame.width / 2
37                var at = CGAffineTransform(translationX: -dx, y: 0)
38                at = at.scaledBy(x: -1, y: 1)
39                at = at.translatedBy(x: dx, y: 0)
40                self.frontView.transform = at
41            }, completion: { (isFinished) in
42                // 完了したら少し待ってから、元に戻す。ここでは3秒としている
43                let waitTime = DispatchTime.now() + DispatchTimeInterval.seconds(3)
44                DispatchQueue.main.asyncAfter(deadline: waitTime, execute: {
45                    self.frontView.transform = CGAffineTransform()
46                })
47            })
48            
49        }
50    }
51}