iOS動畫：多個視圖的3D動畫（19）

通過這章，你將實現如下的相冊效果：

在viewDidApear中添加卡片：

    for image in images {
        image.layer.anchorPoint.y = 0.0
        image.frame = view.bounds
        
        view.addSubview(image)
    }
     navigationItem.title = images.last?.title

在上一章中，我們只是在單個視圖上調整transform屬性，然後在3D空間中旋轉它，現在由於我們的視圖很多，所以我們只需設置它們父視圖的透視圖，節省大量工作。

    var perspective = CATransform3DIdentity
    perspective.m34 = -1.0/250.0
    view.layer.sublayerTransform = perspective

在這裏，可以使用layer的sublayerTransform屬性來設置所有子layer的透視圖。
設置圖像的偏移量，在barButton的點擊方法裏添加：

  @IBAction func toggleGallery(_ sender: AnyObject) {
    var imageYOffset: CGFloat = 50.0
    for subview in view.subviews {
        guard let image = subview as? ImageViewCard else {
            continue
        }
        var imageTransform = CATransform3DIdentity
        imageTransform = CATransform3DTranslate(imageTransform, 0.0, imageYOffset, 0.0)
        imageTransform = CATransform3DScale(imageTransform, 0.95, 0.6, 1.0)
        imageTransform = CATransform3DRotate(imageTransform, .pi/8, -1.0, 0, 0)
        
        
        image.layer.transform = imageTransform
        
        imageYOffset += view.frame.height / CGFloat(images.count)
    }
  }

因爲已經在父視圖裏面設置了透視屬性，所以上面的方法裏面只需要專注於transform，看起來效果是這樣的：

當我們點擊按鈕切換到卡片狀態時，還沒有進入的動畫，在設置image的transform之前，我們來添加動畫效果：

        let animation = CABasicAnimation(keyPath: "transform")
        animation.fromValue = NSValue(caTransform3D: image.layer.transform)
        animation.toValue = NSValue(caTransform3D: imageTransform)
        animation.duration = 0.33
        image.layer.add(animation, forKey: nil)

運行效果

當點擊其中一個卡片時，將image切換到最前端，下面我們來實現這個功能。
其中有兩個動畫需要實現：一個是選擇image的動畫，另外一個是隱藏其它未選中的所有images。

    func selectImage(selectedImage: ImageViewCard) {
        for subview in view.subviews {
            guard let image = subview as? ImageViewCard else {
                continue
            }
            if image === selectedImage {//選中image
                
            }else {//隱藏其它images：
                UIView.animate(withDuration: 0.33, delay: 0.0, options: .curveEaseIn, animations: {
                    image.alpha = 0.0//首先設置爲透明
                }) { (_) in//動畫完成後設置爲不透明，因爲所選image會置於最前端，所以看不到其它image，設置alpha爲1.0沒有影響
                    image.alpha = 1.0
                    image.layer.transform = CATransform3DIdentity
                }
            }
        }
    }

將所選image顯示在最前端：

                UIView.animate(withDuration: 0.33, delay: 0.0, options: .curveEaseIn, animations: {
                    image.layer.transform = CATransform3DIdentity
                }) { (_) in
                    self.view.bringSubview(toFront: image)
                }

最後設置標題

	self.navigationItem.title = selectedImage.title

運行效果：