iOS 动画 -- Chapter 3

Transitions

The transition animates the container view

• 前提

   animationContainerView = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
   animationContainerView.backgroundColor = UIColor.orange
   view.addSubview(animationContainerView)
  
   let newView = UIView(frame: CGRect(x: 0, y: 0, width: 50, height: 50))
   newView.backgroundColor = UIColor.red
  

• Add view
  // with参数: 作为容器view
  UIView.transition(with: animationContainerView, duration: 3, options: [.curveEaseInOut, .transitionFlipFromLeft], animations: {
  self.animationContainerView.addSubview(newView)
  self.animationContainerView.frame.size.width += 100
  self.animationContainerView.frame.size.height += 300
  }, completion: nil)

添加view

• Remove subview
  // with参数: 作为容器view
  animationContainerView.addSubview(newView)
  UIView.transition(with: animationContainerView, duration: 3, options: [.curveEaseInOut, .transitionFlipFromLeft], animations: {
  newView.removeFromSuperview()
  self.animationContainerView.frame.size.width += 100
  self.animationContainerView.frame.size.height += 300
  }, completion: nil)

删除subview

• Hide view
  // with参数: 作为容器view, 也是执行动画的本身
  UIView.transition(with: animationContainerView, duration: 3, options: [.curveEaseInOut, .transitionFlipFromLeft], animations: {
  self.animationContainerView.isHidden = true
  }, completion: nil)

隐藏view

• Replace view
  // 翻转的是animationContainerView 的容器，即它的 parentView
  UIView.transition(from: animationContainerView, to: newView, duration: 3, options: [.curveEaseInOut, .transitionFlipFromBottom], completion: nil)

替换view

• 状态连续动画

  点击登录按钮后，显示登录状态动画。延时2s后，运行移除动画。

  func showMessage(index: Int) {
    label.text = messages[index]
    UIView.transition(with: status, duration: 0.5, options: [.curveEaseInOut, .transitionCurlDown], animations: {
        self.status.isHidden = false;
        }, completion: {_ in
            delay(2.0) {
            if index < self.messages.count-1 {
                self.removeMessage(index: index)
            } else {
                //reset form
            }
        }
    })
  }
  

  移除时，从右边滑出屏幕。隐藏并重置到初始位置，重新运行登录动画。

  func removeMessage(index: Int) {
  UIView.animate(withDuration: 0.5, delay: 0, options: [], animations: {
  self.status.center.x += self.view.frame.size.width
  }, completion: { _ in
  self.status.isHidden = true
  self.status.center = self.statusPosition
  self.showMessage(index: index + 1)
  })
  }

连续动画

• 重置状态
  登录失败的动画后，需要重置状态，否则再次点击登录按钮会重播之前的动画。使用与显示时相反的动画来隐藏状态，同时将登录按钮也重置到最初的状态。

  func resetForm() {
    UIView.transition(with: status, duration: 0.8, options: [.curveEaseInOut, .transitionFlipFromTop], animations: {
        self.status.isHidden = true
        self.status.center = self.statusPosition
        UIView.animate(withDuration: 0.3, animations: { 
            self.spinner.alpha = 0
            self.loginButton.bounds.size.width -= 20
            self.loginButton.center.y -= 80
            self.loginButton.backgroundColor = UIColor(colorLiteralRed: 0.63, green: 0.84, blue: 0.35, alpha: 1)
        })
        }, completion: nil)
  }
  

登录失败后重置

Transitions are the only way to create 3D-styled animations inUIKit.

• 云层移动

云层线性移动，使用.curveLinear。结束后，云层位置重置到屏幕左侧外面，并重新开始动画。

  func animateCloud(cloud: UIImageView) {
    let cloudSpeed = 60.0/view.frame.size.width
    
    let timeInterval = TimeInterval((view.frame.size.width - cloud.frame.origin.x) * cloudSpeed)
    UIView.animate(withDuration: timeInterval, delay: 0.0, options: [.curveLinear], animations: {
        cloud.frame.origin.x = self.view.frame.size.width
        }, completion: { _ in
            cloud.frame.origin.x = -cloud.frame.size.width
            self.animateCloud(cloud: cloud)
    })
  }

云层移动