swift

UIView(Animation options)swift3.

2016-11-13  本文已影响396人  断忆残缘

终于空闲下来了,如今花一些时间学习我喜欢的动画。
今天着重研究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)

  }
上一篇下一篇

猜你喜欢

热点阅读