View Animation

Wednesday, March 7, 2018

UIView Animation 介绍

  • UIView Animation 是个非常易于使用的动画API,从最普通的 UIView.animate 到 springs 动画,到 transitions,再到 keyframe animations,都能够通过UIView Animation 来简单实现。

  • 比如如下效果: [WPGP gif_id="92” width="400”]

  • 上图中,飞机,文字均仅仅用了 UIView Animation 即可实现该效果。

  • 图中的背景图片切换,过渡效果较为自然,通过 Transitions 来实现:

    //图片切换可以使用transition 动画来过渡 func fade(_ imageView: UIImageView, _ toImage: UIImage, showEffect: Bool) { UIView.transition(with: imageView, duration: 1.0, options: [.transitionCrossDissolve], animations: { imageView.image = toImage }, completion: nil)

        UIView.animate(withDuration: 1.0, delay: 0.0, options: .curveEaseOut, animations: {
            self.snowView.alpha = showEffect ? 1.0 : 0.0
        }, completion: nil)
    }
    
  • 图中的飞机,用了 keyframe Animation 实现,代码如下:

    func planeDepart() { let originCenter = planeImage.center UIView.animateKeyframes(withDuration: 1.5, delay: 0.0, options: [], animations: { //下列的时间是指总时间的百分比 UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 0.25, animations: { self.planeImage.center.x += 80.0 self.planeImage.center.y -= 10.0 })

            UIView.addKeyframe(withRelativeStartTime: 0.1, relativeDuration: 0.4, animations: {
                self.planeImage.transform = CGAffineTransform.init(rotationAngle: -.pi / 8)
            })
    
            UIView.addKeyframe(withRelativeStartTime: 0.25, relativeDuration: 0.25, animations: {
                self.planeImage.center.x += 100
                self.planeImage.center.y -= 50
                self.planeImage.alpha = 0.0
            })
    
            UIView.addKeyframe(withRelativeStartTime: 0.51, relativeDuration: 0.01, animations: {
                self.planeImage.transform = .identity
                self.planeImage.center = CGPoint.init(x: 0.0, y: originCenter.y)
            })
    
            UIView.addKeyframe(withRelativeStartTime: 0.55, relativeDuration: 0.45, animations: {
                self.planeImage.alpha = 1
                self.planeImage.center = originCenter
            })
        }, completion: nil)
    }
    
  • 上部分的文字动画效果代码如下:

  • 文字过渡动画,创建一个临时label,再与原本的文字一起进行执行动画,结束后再把文字替换,临时 label 移除掉

    func cubeTransition(label: UILabel, text: String, direction: AnimationDirection) { let auxLabel = UILabel(frame: label.frame) auxLabel.text = text auxLabel.font = label.font auxLabel.textAlignment = label.textAlignment auxLabel.textColor = label.textColor auxLabel.backgroundColor = label.backgroundColor

    let auxLabelOffset = CGFloat(direction.rawValue) *
      label.frame.size.height/2.0
    
    auxLabel.transform = CGAffineTransform(scaleX: 1.0, y: 0.1).concatenating(
      CGAffineTransform(translationX: 0.0, y: auxLabelOffset))
    
    label.superview!.addSubview(auxLabel)
    
    UIView.animate(withDuration: 0.5, delay: 0.0, options: .curveEaseOut,
      animations: {
        auxLabel.transform = .identity
        label.transform =
          CGAffineTransform(scaleX: 1.0, y: 0.1).concatenating(
          CGAffineTransform(translationX: 0.0, y: -auxLabelOffset))
      },
      completion: {_ in
        label.text = auxLabel.text
        label.transform = .identity
    
        auxLabel.removeFromSuperview()
      }
    )
    

    }

  • 飞机旁边的文字动画,原理与上面的文字动画效果一样,只是呈现方式不同,代码如下:

    func moveLabel(label: UILabel, text: String, offset: CGPoint) { let auxLabel = UILabel(frame: label.frame) auxLabel.text = text auxLabel.font = label.font auxLabel.textAlignment = label.textAlignment auxLabel.textColor = label.textColor auxLabel.backgroundColor = UIColor.clear

    auxLabel.transform = CGAffineTransform(translationX: offset.x, y: offset.y)
    auxLabel.alpha = 0
    view.addSubview(auxLabel)
    
    UIView.animate(withDuration: 0.5, delay: 0.0, options: .curveEaseIn,
      animations: {
        label.transform = CGAffineTransform(translationX: offset.x, y: offset.y)
        label.alpha = 0.0
      },
      completion: nil
    )
    
    UIView.animate(withDuration: 0.25, delay: 0.1, options: .curveEaseIn,
      animations: {
        auxLabel.transform = .identity
        auxLabel.alpha = 1.0
      },
      completion: {_ in
        //clean up
        auxLabel.removeFromSuperview()
        label.text = text
        label.alpha = 1.0
        label.transform = .identity
      }
    )
    

    }

iOS动画

Auto layout Animation

GCD详解