美文网首页swift
UIView(Animation options)swift3.

UIView(Animation options)swift3.

作者: 断忆残缘 | 来源:发表于2016-11-13 16:14 被阅读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)
    
      }
    

    相关文章

      网友评论

        本文标题:UIView(Animation options)swift3.

        本文链接:https://www.haomeiwen.com/subject/rkaauttx.html