下面應(yīng)用Swift語言做地圖坐標(biāo)實(shí)現(xiàn)彈簧跳動(dòng)的效果，具體實(shí)現(xiàn)方法如下所示：

iOS動(dòng)畫大概分這幾種：

CoreAnimation動(dòng)畫（基礎(chǔ)）UIView動(dòng)畫（animateWithDuration開頭的函數(shù)，帶彈簧特效）UIDynamic動(dòng)畫（有物理引擎）

上次寫彈跳動(dòng)畫，由于剛開始學(xué)，就用了最基礎(chǔ)的CA動(dòng)畫，但是因?yàn)樽约翰粫?huì)寫KeyFrame，所以還引用了一個(gè)開源庫來實(shí)現(xiàn)下墜的彈跳效果，這樣固然是實(shí)現(xiàn)了需求，但是一點(diǎn)都不優(yōu)雅——從iOS7開始，有了2、3兩種動(dòng)畫，就不再需要用老的CA動(dòng)畫去一點(diǎn)一點(diǎn)拔了。做這個(gè)動(dòng)畫的正確姿勢(shì)，應(yīng)該是下面這樣~

我們的需求仍然是這個(gè)彈跳的marker：

這次我用了2、3兩種方式實(shí)現(xiàn)，效果如下：

一、UIView動(dòng)畫

之前使用CABasicAnimation實(shí)現(xiàn)，不僅代碼多，還要用CATransaction控制回來的一趟callback。其實(shí)直接用iOS7的UIView動(dòng)畫就搞定了：

UIView.animateWithDuration(0.2, 
animations: 
{ self.marker.layer.position.y -= 30 },
completion: {(finished) in UIView.animateWithDuration(0.5, delay: 0,
usingSpringWithDamping: 0.2,
initialSpringVelocity: 5.0,
options: UIViewAnimationOptions.CurveEaseOut,
animations: {//彈性參數(shù)的調(diào)教，可以參見本文的“參考”部分 
self.marker.layer.position.y += 30 }, 
completion: nil)})

在上升過程中，直接在0.2s的時(shí)間中，向上移動(dòng)30px；向下過程中，為了表示彈跳的效果，使用了Spring系列參數(shù)，做了一下調(diào)整之后，感覺效果還是挺有意思的。但是單純使用這個(gè)有一個(gè)缺點(diǎn)：我們要的是類似于重力下墜，而非像一根彈簧一樣彈到那個(gè)位置。注意那跟藍(lán)色的比較線，我們實(shí)現(xiàn)的是左邊的效果，在動(dòng)畫過程中，它會(huì)超過那根藍(lán)色線條，所以其實(shí)是不符合需求的。

二、UIDynamic動(dòng)畫

UIDynamic動(dòng)畫是有物理引擎的動(dòng)畫，我們只需要設(shè)定這個(gè)“物體”的物理特性，iOS就會(huì)自動(dòng)幫我們進(jìn)行物理世界的動(dòng)畫運(yùn)算。首先我們創(chuàng)建它的物理特性：

var animator : UIDynamicAnimator?override func viewDidLoad() { 
super.viewDidLoad() 
animator = UIDynamicAnimator(referenceView: view)}
override func viewDidAppear(animated: Bool) { 
let gravity = UIGravityBehavior(items: [marker2])//重力 
let elastic = UIDynamicItemBehavior(items: [marker2])//彈性 
elastic.elasticity = 0.6 let collision = UICollisionBehavior(items: [marker2])//邊緣 
let endY = marker2.frame.origin.y + marker2.frame.height//
記錄marker2的底部坐標(biāo) 
collision.addBoundaryWithIdentifier("floor", fromPoint: CGPoint(x: 0, y: endY),
toPoint: CGPoint(x: UIScreen.mainScreen().bounds.width, y: endY))//在marker2的底部畫一條線，從屏幕左邊到屏幕右邊 
animator!.addBehavior(collision) 
animator!.addBehavior(gravity) 
animator!.addBehavior(elastic)}

首先我們創(chuàng)建一個(gè)animator，然后創(chuàng)建關(guān)于marker2的重力、彈性、邊緣三個(gè)屬性，附加在animator上。于是這個(gè)marker2便有了物理特性。然后我們和以前一樣把它抬高：

UIView.animateWithDuration(0.2, 
animations: { 
self.marker2.layer.position.y -= 30 }, 
completion: {(finished : Bool) in 
self.animator!.updateItemUsingCurrentState(self.marker2)//如果不update，則animator不知道它的位置被移動(dòng)過了})

在動(dòng)畫完成后，讓animator重新對(duì)它進(jìn)行活動(dòng)，就達(dá)到了文章開始的gif圖中，第二個(gè)marker的彈跳效果。

文章到此為止，希望對(duì)大家有所幫助，謝謝。

最新評(píng)論