圖片來源于網(wǎng)絡(luò)

前言：

前段時(shí)間，蘋果爸爸警告了熱更新技術(shù)，估計(jì)是為了力推swift做準(zhǔn)備，swift會(huì)越來越重要。所以我特地整理了下去年學(xué)習(xí)swift動(dòng)畫的demo，給大家分享下。

外觀屬性：

backgroundColor 背景顏色
alpha 透明度

一、一般動(dòng)畫

1、普通平移

普通平移.gif

UIView.animate(withDuration: 2, delay: 0.0, options: [], animations: {
   self.dog.center.x += 140
}, completion: nil)

說明：改變參數(shù)，會(huì)出現(xiàn)不同的動(dòng)畫效果
1、withDuration 動(dòng)畫持續(xù)時(shí)間
2、delay 延遲時(shí)間
3、options []代表傳入?yún)?shù)為空

2、重復(fù)來回移動(dòng)

重復(fù)來回移動(dòng).gif

UIView.animate(withDuration: 2, delay: 0.0, options: [.repeat, .autoreverse], animations: {
    self.dog.center.x += 140
}, completion: nil)

說明：[.autoreverse, .repeat]添加兩個(gè)參數(shù)，需要用冒號(hào),分開，方括號(hào)[]包起來
1、options .repeat重復(fù) .autoreverse來回移動(dòng)

3、淡入淡出

火車啟動(dòng)停止

現(xiàn)實(shí)生活中，物體不僅僅突然啟動(dòng)或者停止，很多東西像火車都是慢慢啟動(dòng)(speed up)慢慢停止(slow down)

淡入淡出.gif

說明：
1、options .repeat重復(fù) .curveEaseOut淡出(逐漸減速) .curveEaseIn淡入(逐漸加速)

二、彈簧動(dòng)畫(Spring Animation)

由于 iOS 本身大量使用的就是 Spring Animation，用戶已經(jīng)習(xí)慣了這種動(dòng)畫效果

iOS的彈簧效果.gif

彈簧圖解.png

Spring Animation 的 API 和一般動(dòng)畫相比多了兩個(gè)參數(shù)，分別是usingSpringWithDamping和initialSpringVelocity

UIView.animate(withDuration: 1.5, delay: 0.0, usingSpringWithDamping: 0.2, initialSpringVelocity: 0.0, options: [.repeat, .autoreverse], animations: {
    self.dog.center.x += 140
}, completion: nil)

說明：
1、usingSpringWithDamping傳入數(shù)值為0.0~1.0,數(shù)值越大，彈性越不明顯
2、initialSpringVelocity 動(dòng)畫速度，usingSpringWithDamping相同情況下，initialSpringVelocity數(shù)值越大，初始速度越大（個(gè)人想法：withDuration持續(xù)時(shí)間相同，但是初始速度大，我覺得是通過擺動(dòng)的幅度，反彈效果來扯平，也就是說數(shù)值越大，反彈效果更明顯）

該圖來源其他資料.gif

從上圖可以看出，25的比5.0初始速度快，而且有反彈效果，下面是我代碼寫的，值分別為0.2和9.0的效果

慣性0.2.gif

慣性9.0.gif

三、過渡(Transitions)

1、普通過渡

transitionFlipFromBottom效果

UIView.transition(with: animationContainerView!, duration: 1.33, options: [.repeat, .curveEaseOut, .transitionFlipFromBottom], animations: {
    self.animationContainerView!.addSubview(newView)
}, completion: nil)

transitionFlipFromBottom把底部作為視圖翻轉(zhuǎn)的“樞紐”

transitionCurlDown效果

2、替換view

替換.gif

//替換圖片 
UIView.transition(from: dogView, to: pandaView, duration: 3.0, options: [.transitionFlipFromBottom, .repeat], completion: nil)

全部代碼均已校正，總結(jié)自外文《iOS.Animations.by.Tutorials》