卡片动画初体验

作者：@翁呀伟呀 授权本站转载。
这次的示例是我看过了 这篇Blog 后自己实现的。那篇 blog 里只写了个开头，后边的内容好像没时间写，但是我实现后感觉有很多问题。所以贴到这里，希望有人能指导一下。
ps: 题目没有别的意思，只是单纯觉得这3个字放在这里特别和谐，真的，我反正是信了。
效果图
首先看要实现的效果：


然后看看我实现的效果：


分析
包含若干个子视图，每层子视图越往后，宽度越小，y值越小，不透明度越小，逐层递减。

需要创建 2 个手势，一点单击手势 Tap，一个滑动手势 Pan。

滑动的时候，每层卡片都要往某个方向移动，并且每层卡片移动的距离也要递减。

滑动的时候，还需要旋转，并且也是逐层递减的。

滑动超过一个距离后，第一张卡片移除屏幕，其他的卡片依次先前移动。

单击的时候，需要翻转第一张视图。

激动人心的代码部分
创建卡片
这些卡片，我采用 UIImageView 代替，也就是说首先创建若干个 imageView。
为了重构方便，我将创建卡片分为 3 个方法，依次是：
这个方法用来 初始化一个卡片，传入卡片和索引，就会初始化它的 y方向上的距离、横向的缩放、不透明度的递减。

func setUpImageView(imageView: UIImageView, index: Int) {
      var transform = CATransform3DIdentity
      transform.m34 = -0.001
      imageView.layer.transform = transform
      imageView.layer.transform = CATransform3DTranslate(imageView.layer.transform, 0, -7.0 * CGFloat(index), 0)
      imageView.layer.transform = CATransform3DScale(imageView.layer.transform, 1 - 0.08 * CGFloat(index), 1, 1)
      imageView.layer.opacity = 1 - 0.2 * Float(index)
  }

这个方法用来 创建一个卡片，只用传入索引（用来初始化）就可以了，它会创建一个 UIImageView，并设置一些所有卡片共有的属性，然后调用上面的方法进行初始化，最后给卡片添加两个手势。

func createOneImageView(index: Int) -> UIImageView {
      let imageView = UIImageView()
      imageView.contentMode = UIViewContentMode.ScaleAspectFill
      imageView.frame = CGRectInset(self.view.frame, 20, 100)
      imageView.layer.cornerRadius = 10
      imageView.layer.masksToBounds = true
      setUpImageView(imageView, index: index)
      //点击手势
      let tap = UITapGestureRecognizer(target: self, action: Selector("tapPanGesture:"))
      imageView.addGestureRecognizer(tap)
      //滑动手势
      let pan = UIPanGestureRecognizer(target: self, action: Selector("panPanGesture:"))
      imageView.addGestureRecognizer(pan)
      imageView.userInteractionEnabled = true
      return imageView
  }

第三个是一次性创建多个卡片，传入数量即可。它会调用循环调用上面的方法创建若干个卡片，并把它们添加到 self.view 上 和 一个全局数组中，以供后面使用。

func createImageViews(count: Int) {
      for index in 0..《count { //显示原因，请将《自行改为英文
          let imageView = createOneImageView(index)
          imageView.image = UIImage(named: String(format: "Taylor Swift d", arguments: [index % 5]))
          self.view.insertSubview(imageView, atIndex: 1)
          self.imageViews.append(imageView)
      }
  }

滑动手势
手势中，有两个地方很重要，一个是滑动中，一个是滑动结束。在滑动中需要实时改变每个卡片的位置，还好监测是否超过规定距离，如果超过距离需要移除最上层的卡片，并让其他卡片复位，再然后让每层卡片向前移动，最后创建一个新的卡片添加到最后。在滑动结束后需要让每个卡片复位。
滑动中
如果没有超过规定距离，就改变每个卡片的位置。通过 view.layer.transform 属性改变。为了方便，我这里使用 KVC 来设置形变值。

for index in 0..《self.imageViews.count { //显示原因，请将《自行改为英文
      let imageView = self.imageViews[index]

      imageView.layer.setValue((1 - (CGFloat(index) / CGFloat(self.imageViews.count))) * delta, forKeyPath: "transform.translation.x")
      imageView.layer.setValue((1 - (CGFloat(index) / CGFloat(self.imageViews.count))) * (delta / self.maxLength) * (15.0 / 180) * CGFloat(M_PI), forKeyPath: "transform.rotation.z")
  }

如果超过了规定值，就是用动画让第一个视图移出屏幕外。注意：当调用 pan.enabled = false 后，会再次进入手势监听方法，并且手势的状态为 Cancelled。

pan.enabled = false
  let imageView = self.imageViews.first
  let current = imageView?.layer.valueForKeyPath("transform.translation.x") as! CGFloat
  UIView.animateWithDuration(0.5, animations: { () -> Void in
      imageView?.layer.setValue((current > 0) ? self.view.bounds.width : -self.view.bounds.width, forKeyPath: "transform.translation.x")
      }, completion: nil)

滑动结束
所以在手势结束（pan.state == .Ended || pan.state == .Cancelled）时需要判断 pan.enable 属性，如果 pan.enable == true，说明没有超过规定值，只用将所有卡片复位就可以了，如果 pan.enable == false，说明超过了规定值，就需要将第一张卡片从父视图移除，并添加到复用的数组中，然后让其他的卡片依次前移。

else if pan.state == .Ended || pan.state == .Cancelled {
      UIView.animateWithDuration(0.5, delay: 0, usingSpringWithDamping: 0.4, initialSpringVelocity: 0, options: UIViewAnimationOptions.CurveLinear, animations: { () -> Void in
          for index in 0.. Void in
          if !pan.enabled {
              pan.enabled = true
              let first = self.imageViews.removeAtIndex(0)
              first.removeFromSuperview()
              self.resueArray.append(first)
              self.endAnimation()
          }
      })
  }

最后我调用了 self.endAnimation() 方法。这个方法就是将数组中所有卡片向前移动的动画。

func endAnimation() {
    for index in 0.. Void in
                imageView.layer.setValue(-7.0 * CGFloat(index), forKeyPath: "transform.translation.y")
                imageView.layer.setValue(1 - 0.08 * CGFloat(index), forKeyPath: "transform.scale.x")
                imageView.layer.opacity = 1 - 0.2 * Float(index)
            }, completion: {(finish: Bool) -> Void in
                //最后一个动画完毕后，添加新的Card到最后
                if index == self.imageViews.count - 1 {
                    self.addNewCard()
                }
        })
    }
}

所有卡片移动完成后，调用 `` 方法，将一个新的卡片添加到最后。这个方法中，将判断重用数组中有没有卡片，如果没有，就创建一个，如果有，就直接拿来改变内容就可以了。最后将卡片添加到数组中。

func addNewCard() {
      var imageView: UIImageView
      if self.resueArray.isEmpty {
          imageView = createOneImageView(self.imageViews.count)
      } else {
          imageView = self.resueArray.removeAtIndex(0)
          setUpImageView(imageView, index: self.imageViews.count)
      }
      imageView.image = UIImage(named: String(format: "Taylor Swift d", arguments: [arc4random_uniform(5)]))
      self.view.insertSubview(imageView, atIndex: 1)
      self.imageViews.append(imageView)
  }

到这里，我的示例中的内容都讲完了，获取完整源代码请移步: GitHub
但是这和目标中的效果还有一段距离，下面就是一些问题，希望大家能指导一下。
存在的问题
效果感觉不是很流畅，大家可以下载源码感受一下，估计是移动过程中的代码有些麻烦，太过复杂。

这里的重用数组其实就装了一个卡片，因为移除一个添加一个，所以感觉没必要这么重用。谁有好点的想法希望告诉我一下。

最重要的一点，点击翻转效果，我在点击监听方法中是这么写的：

UIView.animateWithDuration(0.5, animations: { () -> Void in
     imageView.layer.transform = CATransform3DRotate(imageView.layer.transform, CGFloat(M_PI), 0, 1, 0)
 })

运行之后却是下面这个叼样子！目前还不知道为什么会这样，所以谁知道为什么或者有什么好的方法实现点击翻转效果，请一定要告诉我。


更新
上面第三个问题解决方法：
修改最上面的卡片的 layer.zPosition 属性，设置的足够大就可以解决这个问题。可以在点击的方法里修改。代码已更新。感谢 @从今以后 的解决方法！