萬盛學電腦網

 萬盛學電腦網 >> 網絡編程 >> ios >> iOS動畫——ViewAnimations

iOS動畫——ViewAnimations

   這一篇我們來說說UIKit中的動畫API,期中包括:

  UIView.UIView.animateWithDuration

  UIView.transitionWithView

  UIView.animateKeyframesWithDuration

  UIView.addKeyframeWithRelativeStartTime

  今天的故事就將圍繞這些API展開,闡述他的前世今生。

  UIKit動畫API使用起來十分簡單與方便,他避免了Core Animation的復雜性,雖然事實上UIKit動畫API的底層使用的也是Core Animation。

  來看第一個,UIView.UIView.animateWithDuration

  先來看一下函數原型:

  class func animateWithDuration(duration: NSTimeInterval, delay: NSTimeInterval, usingSpringWithDamping dampingRatio: CGFloat, initialSpringVelocity velocity: CGFloat, options: UIViewAnimationOptions, animations: () -> Void, completion: ((Bool) -> Void)?)

  一共七個參數:

  duration

  表示動畫執行時間。

  delay

  動畫延遲時間。

  usingSpringWithDamping

  表示彈性屬性。

  initialSpringVelocity

  初速度。

  options

  可選項,一些可選的動畫效果,包括重復等。

  animations

  表示執行的動畫內容,包括透明度的漸變,移動,縮放。

  completion

  表示執行完動畫後執行的內容。

  關於這些參數,選一個列子,嘗試不同的參數,這樣可以更好的理解每個參數的意義。

iOS動畫——ViewAnimations 三聯

  好丑的動畫

  self.animationView2.alpha = 0

  self.animationView3.alpha = 0

  UIView.animateWithDuration(5, delay: 0.5, usingSpringWithDamping: 0.5, initialSpringVelocity: 0, options: .Repeat, animations: { () -> Void in

  self.animationView.center.y += 100

  }) { (Bool) -> Void in

  println("finish")

  }

  UIView.animateWithDuration(5, delay: 0.5, usingSpringWithDamping: 0.5, initialSpringVelocity: 0, options: .Repeat, animations: { () -> Void in

  self.animationView2.alpha = 1

  }) { (Bool) -> Void in

  println("finish")

  }

  UIView.animateWithDuration(5, delay: 0.5, usingSpringWithDamping: 0.5, initialSpringVelocity: 0, options: .Repeat, animations: { () -> Void in

  self.animationView3.center.y -= 100

  self.animationView3.alpha = 1

  }) { (Bool) -> Void in

  println("finish")

  }

  代碼就不逐行解釋,三個UIView.animateWithDuration分別操作三個方塊。第一個方塊是一個移動動畫,第二個方塊是一個透明度漸變動畫,第三個方塊是移動加透明度漸變的組合動畫,可能看的不是很清楚。不得不說這個動畫真的很丑~~~

  UIView.UIView.animateWithDuration這個API說穿了就是逐漸改變UIView的某項屬性,這些屬性包括:位置,大小,透明度,顏色等等。

  再來看一下UIView.transitionWithView,這是一個過度動畫,主要用於UIView進入或者離開視圖。

  先看一下這一個動畫效果吧:

9.gif

  9.gif

  其中banner右移消失的動畫用的就是上面提到的UIView.UIView.animateWithDuration,而進入的動畫用的就是現在要講的UIView.transitionWithView。很像一頁書頁翻下來的感覺哈。

  我們來看一下函數原型

  class func transitionWithView(view: UIView, duration: NSTimeInterval, options: UIViewAnimationOptions, animations: () -> Void, completion: ((Bool) -> Void)?)

  一共五個參數:

  view

  這當然就是指定要進行動畫的對象了。

  duration

  和上面一樣這個參數指定動畫時間長短。

  options

  這是一個可選參數,雖然是可選的但是不填這個API就沒意義了,因為UIView如何進入視圖就是由這個參數決定。到底是像書頁一樣翻進去,還是像百葉窗一樣轉動就是由這個參數決定,具體有哪些可以選擇,點進去看看就知道了。

  animations

  這個選項你可以將它理解為在動畫結束後UIView的形態。

  completion

  動畫結束後運行的代碼。

  代碼大概長這樣

  UIView.transitionWithView(status, duration: 0.33, options:

  .CurveEaseOut | .TransitionCurlDown, animations: {

  self.yourView.hidden = false

  }, completion:nil

  })

  這一部分代碼已上傳Github,Github地址在文章的最後面。

  我相信看看源代碼,大家都能明白的。

  這裡再給大家看一個動畫,也是用前面提到過的函數寫的:

尼瑪~這顯示效果太差了吧,不知道你們那裡看到的是什麼樣的

  尼瑪~這顯示效果太差了吧,不知道你們那裡看到的是什麼樣的

  仿3D效果,代碼也在上傳的那個Demo中,大家自己看啦~

  到最後一個函數啦啦,UIView.animateKeyframesWithDuration,先來看一下動畫效果吧。

小飛機~飛啊飛~

  小飛機~飛啊飛~

  我們很容易就可以發現,這個動畫分了很多階段完成,我們當然可以用我們提到的第一個函數UIView.UIView.animateWithDuration來完成,但是,你不覺得嵌套加嵌套顯得很不好看嗎,我們當然還有更好的方法來實現,就是我們現在要說的,先來看一下函數原型:

  class func animateKeyframesWithDuration(duration: NSTimeInterval, delay: NSTimeInterval, options: UIViewKeyframeAnimationOptions, animations: () -> Void, completion: ((Bool) -> Void)?)

  一共五個參數:

  duration:整個動畫過程的時間。

  delay:延遲多久開始。

  options:可選項,比如說重復,倒著來一遍等效果,自己都試試看吧。

  animations:需要執行的動畫,裡面可以是多個UIView.addKeyframeWithRelativeStartTime。

  至於這個UIView.addKeyframeWithRelativeStartTime方法,類似於我們提到的第一個UIView.UIView.animateWithDuration,也是一個屬性漸變的方法,不過這個方法只能寫在他的爸爸UIView.addKeyframeWithRelativeStartTime的animation參數函數塊中。

  completion:動畫執行結束之後執行的代碼。

  來看一下我們實現這個小飛機~飛啊飛~~的代碼:

  let originalCenter = planeImage.center

  UIView.animateKeyframesWithDuration(1.5, delay: 0.0, options: .Repeat, animations: {

  //add keyframes

  UIView.addKeyframeWithRelativeStartTime(0.0, relativeDuration: 0.25, animations: {

  self.planeImage.center.x += 80.0

  self.planeImage.center.y -= 10.0

  })

  UIView.addKeyframeWithRelativeStartTime(0.1, relativeDuration: 0.4) {

  self.planeImage.transform = CGAffineTransformMakeRotation(CGFloat(-M_PI_4/2))

  }

  UIView.addKeyframeWithRelativeStartTime(0.25, relativeDuration: 0.25) {

  self.planeImage.center.x += 100.0

  self.planeImage.center.y -= 50.0

  self.planeImage.alpha = 0.0

  }

  UIView.addKeyframeWithRelativeStartTime(0.51, relativeDuration: 0.01) {

  self.planeImage.transform = CGAffineTransformIdentity

  self.planeImage.center = CGPoint(x: 0.0, y: originalCenter.y)

  }

  UIView.addKeyframeWithRelativeStartTime(0.55, relativeDuration: 0.45) {

  self.planeImage.alpha = 1.0

  self.planeImage.center = originalCenter

  }

  }, completion:nil)

  完整的代碼在最後提供的源代碼中有。

  事實告訴我們動畫是要靠設計的,你看我上面的動畫抽的一筆,但事實上用同樣的代碼可以寫出很漂亮的動畫。

copyright © 萬盛學電腦網 all rights reserved