iOS animations學習(1)-簡單的UIView動畫

做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詳解

  1. 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.comiMcG33K,imcg33k@gmail.com
【Android】人猿居士,1059604515@qq.com;思路的頓悟,1217022114@qq.com
【java】首席工程師MR_W,feixue300@qq.com
【測試】土鏡問道,847071279@qq.com
【數據】fox009521,42151960@qq.com

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 在iOS中隨處都可以看到絢麗的動畫效果,實現這些動畫的過程并不復雜,今天將帶大家一窺ios動畫全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,572評論 6 30
  • 在iOS中隨處都可以看到絢麗的動畫效果,實現這些動畫的過程并不復雜,今天將帶大家一窺iOS動畫全貌。在這里你可以看...
    F麥子閱讀 5,141評論 5 13
  • 戰略即是決策,決策即是投資。 我一直相信,如果我們所做的每一個選擇都能用投資的眼光和視角去決策的話,我們生命的質量...
    墨律的律閱讀 3,269評論 5 78
  • 你說你最愛口袋妖怪,是因為人生本來就是一場不斷打怪升級的過程。 打怪意味著掉血,當然,你也可以選擇逃跑。而每一次你...
    000a4b56e026閱讀 183評論 0 0