UIView（Animation options）swift3.0

终于空闲下来了，如今花一些时间学习我喜欢的动画。
今天着重研究UIViewAnimationOptions

1. 动画重复（Repeating）

.repeat: 让动画一直重复执行

.autoreverse: 配合.repeat使用，使动画反转并持续执行

2. 动画缓和（Animation easing）

.linear: 让动画保持匀速

.curveEaseIn: 在动画开始时加速

.curveEaseOut: 在动画结束时减速

.curveEaseInOut: 相当于[.curveEaseIn, .curveEaseOut]的组合，在开始加速和在结束动画时减速

3. 弹性动画（Spring animations）

// 方法展现与参数分析
UIView.animate(withDuration: 0.5, delay: 0.5, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.0, options: [], animations: {
      self.loginButton.center.y -= 30
      self.loginButton.alpha = 1.0
    }, completion: nil)

• usingSpringWithDamping: 设置弹性动画的阻尼(范围：0.0～1.0)，越接近0.0弹性越大，反之则越小。
• initialSpringVelocity: 控制动画初始速度。

4. 转换动画（Transitions）

转换动画选项列表

.transitionFlipFromLeft, // 从左边翻转
.transitionFlipFromRight, // 从右边翻转
.transitionFlipFromTop, // 从底部翻转
.transitionFlipFromBottom, // 从底部翻转
.transitionCurlUp, // 卷上去
.transitionCurlDown, // 卷下来
.transitionCrossDissolve // 交叉溶解

增加一个视图（Adding a new view）

var animationContainerView: UIView?

  override func viewDidLoad() {
    super.viewDidLoad()
    animationContainerView = UIView(frame: view.bounds)
    view.addSubview(animationContainerView!)
  }
  override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    
  }
  override func viewDidAppear(_ animated: Bool) {
    super.viewWillAppear(animated)

    // create new view
    let newView = UIImageView()
    
    newView.image = UIImage(named: "e50")
    newView.frame.size = CGSize(width: 50, height: 50)
    newView.center = animationContainerView!.center

    // add the new view via transition
    UIView.transition(with: animationContainerView!,
                      duration: 0.33,
                      options: [.curveEaseOut, .transitionFlipFromBottom],
                      animations: { self.animationContainerView?.addSubview(newView) },
                      completion: nil)
  }

移除一个视图（Removing a view）

  // remove the view via transition
  UIView.transition(with: newView,
                    duration: 0.33,
                    options: [.curveEaseOut, .transitionFlipFromBottom],
                    animations: { self.newView.removeFromSuperview() },
                    completion: nil)

隐藏／显示一个视图（Hiding/showing a view）

  // hide the view via transition
  UIView.transition(with: self.newView,
                    duration: 0.33,
                    options: [.curveEaseOut, .transitionFlipFromBottom],
                    animations:{ self.newView.isHidden = true },
                    completion: nil)

替换一个视图（Replacing a view with another view）

  注意事项，需要设置新视图frame，即大小和位置。
  // replace via transition
  UIView.transition(from: newView,
                    to: oldView,
                    duration: 0.33,
                    options: .transitionFlipFromTop,
                    completion: nil)

5. 关键帧动画（Keyframe animations）

UIViewKeyframeAnimationOptions选项如下：

  .calculationModeLinear, // 连续运算模式，线性
  .calculationModeDiscrete, // 离散运算模式，只显示关键帧
  .calculationModePaced, // 均匀执行运算模式，线性
  .calculationModeCubic, // 平滑运算模式
  .calculationModeCubicPaced // 平滑均匀运算模式

11月-14-2016 18-33-21.gif

demo

  func planeDepart() {
    // 记录初始位置
    let originalCenter = planeImage.center
    // 设置动画总时间为1.5秒, options动画
    UIView.animateKeyframes(withDuration: 1.5, delay: 0.0, options: [], animations: {
      // add keyframes
      // 下面使用的事件都是相对事件（相对于当前1.5s），范围为(0.0~0.1)
      UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 0.25, animations: {
        self.planeImage.center.x += 80.0
        self.planeImage.center.y -= 10.0
      })

      UIView.addKeyframe(withRelativeStartTime: 1.0, relativeDuration: 0.4, animations: {
        self.planeImage.transform = CGAffineTransform(rotationAngle: .pi * 0.125)
      })

      UIView.addKeyframe(withRelativeStartTime: 0.25, relativeDuration: 0.25, animations: {
        self.planeImage.center.x += 100.0
        self.planeImage.center.y -= 50
        self.planeImage.alpha = 0.0
      })

      UIView.addKeyframe(withRelativeStartTime: 0.51, relativeDuration: 0.01, animations: {
        self.planeImage.transform = CGAffineTransform.identity
        self.planeImage.center = CGPoint(x: 0.0, y: originalCenter.y)
      })

      UIView.addKeyframe(withRelativeStartTime: 0.55, relativeDuration: 0.45, animations: {
        self.planeImage.alpha = 1.0
        self.planeImage.center = originalCenter
      })
      
    }, completion: nil)

  }

最后编辑于：2017.12.04 07:48:56