做IOS也一段時間，總覺得缺了一點必備技能。不能熟練的使用各種動畫來使UI更有動感。所以近期特意下載了一份電子版的[iOS animations by Tutorials]，雖說是英文版的，兩天也看了一大章了。總結一下，以備平常時多查看。

UIView的動畫各種參數

UIView動畫可以設置的動畫屬性有:

1、大小變化(frame)
2、拉伸變化(bounds)
3、中心位置(center)
4、旋轉(transform)
5、透明度(alpha)
6、背景顏色(backgroundColor)
7、拉伸內容(contentStretch)

UIViewAnimationOptions的枚舉值如下，可組合使用：

UIViewAnimationOptionLayoutSubviews            //進行動畫時布局子控件
 UIViewAnimationOptionAllowUserInteraction      //進行動畫時允許用戶交互
 UIViewAnimationOptionBeginFromCurrentState     //從當前狀態開始動畫
 UIViewAnimationOptionRepeat                    //無限重復執行動畫
 UIViewAnimationOptionAutoreverse               //執行動畫回路
 UIViewAnimationOptionOverrideInheritedDuration //忽略嵌套動畫的執行時間設置
 UIViewAnimationOptionOverrideInheritedCurve    //忽略嵌套動畫的曲線設置
 UIViewAnimationOptionAllowAnimatedContent      //轉場：進行動畫時重繪視圖
 UIViewAnimationOptionShowHideTransitionViews   //轉場：移除（添加和移除圖層的）動畫效果
 UIViewAnimationOptionOverrideInheritedOptions  //不繼承父動畫設置

 UIViewAnimationOptionCurveEaseInOut            //時間曲線，慢進慢出（默認值）
 UIViewAnimationOptionCurveEaseIn               //時間曲線，慢進
 UIViewAnimationOptionCurveEaseOut              //時間曲線，慢出
 UIViewAnimationOptionCurveLinear               //時間曲線，勻速

 UIViewAnimationOptionTransitionNone            //轉場，不使用動畫
 UIViewAnimationOptionTransitionFlipFromLeft    //轉場，從左向右旋轉翻頁
 UIViewAnimationOptionTransitionFlipFromRight   //轉場，從右向左旋轉翻頁
 UIViewAnimationOptionTransitionCurlUp          //轉場，下往上卷曲翻頁
 UIViewAnimationOptionTransitionCurlDown        //轉場，從上往下卷曲翻頁
 UIViewAnimationOptionTransitionCrossDissolve   //轉場，交叉消失和出現
 UIViewAnimationOptionTransitionFlipFromTop     //轉場，從上向下旋轉翻頁
 UIViewAnimationOptionTransitionFlipFromBottom  //轉場，從下向上旋轉翻頁

UIViewKeyframeAnimationOptions的枚舉值如下，可組合使用：

UIViewAnimationOptionLayoutSubviews           //進行動畫時布局子控件
UIViewAnimationOptionAllowUserInteraction     //進行動畫時允許用戶交互
UIViewAnimationOptionBeginFromCurrentState    //從當前狀態開始動畫
UIViewAnimationOptionRepeat                   //無限重復執行動畫
UIViewAnimationOptionAutoreverse              //執行動畫回路
UIViewAnimationOptionOverrideInheritedDuration //忽略嵌套動畫的執行時間設置
UIViewAnimationOptionOverrideInheritedOptions //不繼承父動畫設置

UIViewKeyframeAnimationOptionCalculationModeLinear     //運算模式 :連續
UIViewKeyframeAnimationOptionCalculationModeDiscrete   //運算模式 :離散
UIViewKeyframeAnimationOptionCalculationModePaced      //運算模式 :均勻執行
UIViewKeyframeAnimationOptionCalculationModeCubic      //運算模式 :平滑
UIViewKeyframeAnimationOptionCalculationModeCubicPaced //運算模式 :平滑均勻

簡單動畫

1 .

UIView.animate(withDuration: 1.0) {
        //設置heading的中心點到view的中心
       self.heading.center.x += self.view.bounds.width
 }

這個動畫是最簡單的，只有一個參數，設置動畫時間。
2 .

UIView.animate(withDuration: 1.0, animations: {
        
    }, completion: { _ in
        
    })

3 .

UIView.animate(withDuration: 1.0, delay: 1.0, options: [], animations: {
        
    }, completion: { _ in
        
    })

duration 動畫時長
deley 延遲
option 是UIViewAnimationOptions，可以多選，動畫樣式
completion完成動畫后的操作

spring 彈簧動畫

    //usingSpringWithDamping參數來設置一個阻尼的動畫，從0.0-1.0, 參數值越小， 彈性值越大
    //initialSpringVelocity控制動畫的初始速度。代表彈簧動能的大小，快慢
    UIView.animate(withDuration: 1.0, delay: 1.0, usingSpringWithDamping: 1.0, initialSpringVelocity: 1.0, options: [], animations: {
        
    }, completion: { _ in
        
    })

Transitions 過渡動畫

此動畫主要用于添加和刪除一個 view的動畫

1 .

UIView.transition(with: animationContainerView, duration: TimeInterval, options: UIViewAnimationOptions, animations: {
    //添加view
        self.animationContainerView.addSubview(newView) 
   //刪除view
        self.newView.removeFromSuperview() 
   //Hide view 隱藏view
        self.newView.isHidden = true  
   //添加圖片
         imageView.image = toImage
    }, completion: { _ in
        
    })

2 . 兩個同級的view之間的替換

UIView.transition(from: UIView, to: UIView, duration: TimeInterval, options: UIViewAnimationOptions, completion: {
        
    })

幀動畫

1 .

主要支持多個，順序的動畫，

    UIView.animateKeyframes(withDuration: 1.0, delay: 1.0, options: [], animations: {
         //add keyframes
        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) {
          self.planeImage.transform = CGAffineTransform(rotationAngle: -.pi / 8)
        }

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

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

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

其中withRelativeStartTime 和 relativeDuration都是百分比，在總時間的百分比間隔中執行的動畫

平常用到的動畫

1. label等控件的transform對象集合，需要使用CGAffineTransform對象定義

label.transform = CGAffineTransform()

//尺寸變化
  public /*not inherited*/ init(translationX tx: CGFloat, y ty: CGFloat)
//比例變化
public /*not inherited*/ init(scaleX sx: CGFloat, y sy: CGFloat)
//旋轉變化
public /*not inherited*/ init(rotationAngle angle: CGFloat)

label.transform = .identity //每次變換前都要置位，不然你變換用的坐標系統不是屏幕坐標系統（即絕對坐標系統），而是上一次變換后的坐標系統 

1、CGAffineTransformIsIdentity //檢測一個Transformation是不是恒等變換，也就是說不變
     bool CGAffineTransformIsIdentity ( CGAffineTransform t);//其結果返回一個BOOL值

2、CGAffineTransformEqualToTransform  //檢測兩個Transformation是否相等。
bool CGAffineTransformEqualToTransform (CGAffineTransform t1,CGAffineTransform t2);

CGAffineTransform詳解

2. cubeTransition 類似于3D盒子的動畫

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()
      }
    )
  }

知行辦公，專業移動辦公平臺https://zx.naton.cn/
【總監】十二春秋之，3483099@qq.com；
【Master】zelo，616701261@qq.com；
【運營】運維艄公，897221533@qq.com；****
【產品設計】流浪貓，364994559@qq.com；
【體驗設計】兜兜，2435632247@qq.com；
【iOS】淘碼小工，492395860@qq.com；iMcG33K，imcg33k@gmail.com；
【Android】人猿居士，1059604515@qq.com；思路的頓悟，1217022114@qq.com；
【java】首席工程師MR_W，feixue300@qq.com；
【測試】土鏡問道，847071279@qq.com；
【數據】fox009521，42151960@qq.com；