iOS動(dòng)畫教你編寫Slack的Loading動(dòng)畫進(jìn)階篇
前幾天看了一篇關(guān)于動(dòng)畫的博客叫手摸手教你寫 Slack 的 Loading 動(dòng)畫，看著挺炫，但是是安卓版的，尋思的著仿造著寫一篇iOS版的，下面是我寫這個(gè)動(dòng)畫的分解
老規(guī)矩先上圖和demo地址：
剛看到這個(gè)動(dòng)畫的時(shí)候，腦海里出現(xiàn)了兩個(gè)方案，一種是通過drawRect畫出來，然后配合CADisplayLink不停的繪制線的樣式；第二種是通過CAShapeLayer配合CAAnimation來實(shí)現(xiàn)動(dòng)畫效果。再三考慮覺得使用后者，因?yàn)榍罢咝枰?jì)算很多，比較復(fù)雜，而且經(jīng)過測(cè)試前者相比于后者消耗更多的CPU，下面將我的思路寫下來：
相關(guān)配置和初始化方法
在寫這個(gè)動(dòng)畫之前，我們把先需要的屬性寫好，比如線條的粗細(xì)，動(dòng)畫的時(shí)間等等，下面是相關(guān)的配置和初識(shí)化方法：
//線的寬度
var lineWidth:CGFloat = 0
//線的長(zhǎng)度
var lineLength:CGFloat = 0
//邊距
var margin:CGFloat = 0
//動(dòng)畫時(shí)間
var duration:Double = 2
//動(dòng)畫的間隔時(shí)間
var interval:Double = 1
//四條線的顏色
var colors:[UIColor] = [UIColor.init(rgba: "#9DD4E9") , UIColor.init(rgba: "#F5BD58"), UIColor.init(rgba: "#FF317E") , UIColor.init(rgba: "#6FC9B5")]
//動(dòng)畫的狀態(tài)
private(set) var status:AnimationStatus = .Normal
//四條線
private var lines:[CAShapeLayer] = []
enum AnimationStatus {
//普通狀態(tài)
case Normal
//動(dòng)畫中
case Animating
//暫停
case pause
}
//MARK: Initial Methods
convenience init(fram: CGRect , colors: [UIColor]) {
self.init()
self.frame = frame
self.colors = colors
config()
}
override init(frame: CGRect) {
super.init(frame: frame)
config()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
config()
}
private func config() {
lineLength = max(frame.width, frame.height)
lineWidth = lineLength/6.0
margin = lineLength/4.5 + lineWidth/2
drawLineShapeLayer()
transform = CGAffineTransformRotate(CGAffineTransformIdentity, angle(-30))
}
通過CAShapeLayer繪制線條
看到這個(gè)線條我就想到了用CAShapeLayer來處理，因?yàn)镃AShapeLayer完全可以實(shí)現(xiàn)這種效果，而且它的strokeEnd的屬性可以用來實(shí)現(xiàn)線條的長(zhǎng)度變化的動(dòng)畫，下面上繪制四根線條的代碼：
//MARK: 繪制線
/**
繪制四條線
*/
private func drawLineShapeLayer() {
//開始點(diǎn)
let startPoint = [point(lineWidth/2, y: margin),
point(lineLength - margin, y: lineWidth/2),
point(lineLength - lineWidth/2, y: lineLength - margin),
point(margin, y: lineLength - lineWidth/2)]
//結(jié)束點(diǎn)
let endPoint = [point(lineLength - lineWidth/2, y: margin) ,
point(lineLength - margin, y: lineLength - lineWidth/2) ,
point(lineWidth/2, y: lineLength - margin) ,
point(margin, y: lineWidth/2)]
for i in 0...3 {
let line:CAShapeLayer = CAShapeLayer()
line.lineWidth = lineWidth
line.lineCap = kCALineCapRound
line.opacity = 0.8
line.strokeColor = colors[i].CGColor
line.path = getLinePath(startPoint[i], endPoint: endPoint[i]).CGPath
layer.addSublayer(line)
lines.append(line)
}
}
/**
獲取線的路徑
- parameter startPoint: 開始點(diǎn)
- parameter endPoint: 結(jié)束點(diǎn)
- returns: 線的路徑
*/
private func getLinePath(startPoint: CGPoint, endPoint: CGPoint) -> UIBezierPath {
let path = UIBezierPath()
path.moveToPoint(startPoint)
path.addLineToPoint(endPoint)
return path
}
private func point(x:CGFloat , y:CGFloat) -> CGPoint {
return CGPointMake(x, y)
}
private func angle(angle: Double) -> CGFloat {
return CGFloat(angle * (M_PI/180))
}
執(zhí)行完后就跟上圖一樣的效果了~~~
動(dòng)畫分解
經(jīng)過分析，可以將動(dòng)畫分為四個(gè)步驟：
•畫布的旋轉(zhuǎn)動(dòng)畫，旋轉(zhuǎn)兩圈
•線條由長(zhǎng)變短的動(dòng)畫，更畫布選擇的動(dòng)畫一起執(zhí)行，旋轉(zhuǎn)一圈的時(shí)候結(jié)束
•線條的位移動(dòng)畫，線條逐漸向中間靠攏，再畫筆旋轉(zhuǎn)完一圈的時(shí)候執(zhí)行，兩圈的時(shí)候結(jié)束
•線條由短變長(zhǎng)的動(dòng)畫，畫布旋轉(zhuǎn)完兩圈的時(shí)候執(zhí)行
第一步畫布旋轉(zhuǎn)動(dòng)畫
這里我們使用CABasicAnimation基礎(chǔ)動(dòng)畫，keyPath作用于畫布的transform.rotation.z，以z軸為目標(biāo)進(jìn)行旋轉(zhuǎn)，下面是效果圖和代碼：
//MARK: 動(dòng)畫步驟
/**
旋轉(zhuǎn)的動(dòng)畫，旋轉(zhuǎn)兩圈
*/
private func angleAnimation() {
let angleAnimation = CABasicAnimation.init(keyPath: "transform.rotation.z")
angleAnimation.fromValue = angle(-30)
angleAnimation.toValue = angle(690)
angleAnimation.fillMode = kCAFillModeForwards
angleAnimation.removedOnCompletion = false
angleAnimation.duration = duration
angleAnimation.delegate = self
layer.addAnimation(angleAnimation, forKey: "angleAnimation")
}
第二步線條由長(zhǎng)變短的動(dòng)畫
這里我們還是使用CABasicAnimation基礎(chǔ)動(dòng)畫，keyPath作用于線條的strokeEnd屬性，讓strokeEnd從1到0來實(shí)現(xiàn)線條長(zhǎng)短的動(dòng)畫，下面是效果圖和代碼：
/**
線的第一步動(dòng)畫，線長(zhǎng)從長(zhǎng)變短
*/
private func lineAnimationOne() {
let lineAnimationOne = CABasicAnimation.init(keyPath: "strokeEnd")
lineAnimationOne.duration = duration/2
lineAnimationOne.fillMode = kCAFillModeForwards
lineAnimationOne.removedOnCompletion = false
lineAnimationOne.fromValue = 1
lineAnimationOne.toValue = 0
for i in 0...3 {
let lineLayer = lines[i]
lineLayer.addAnimation(lineAnimationOne, forKey: "lineAnimationOne")
}
}
第三步線條的位移動(dòng)畫
這里我們也是使用CABasicAnimation基礎(chǔ)動(dòng)畫，keyPath作用于線條的transform.translation.x和transform.translation.y屬性，來實(shí)現(xiàn)向中間聚攏的效果，下面是效果圖和代碼：
/**
線的第二步動(dòng)畫，線向中間平移
*/
private func lineAnimationTwo() {
for i in 0...3 {
var keypath = "transform.translation.x"
if i%2 == 1 {
keypath = "transform.translation.y"
}
let lineAnimationTwo = CABasicAnimation.init(keyPath: keypath)
lineAnimationTwo.beginTime = CACurrentMediaTime() + duration/2
lineAnimationTwo.duration = duration/4
lineAnimationTwo.fillMode = kCAFillModeForwards
lineAnimationTwo.removedOnCompletion = false
lineAnimationTwo.autoreverses = true
lineAnimationTwo.fromValue = 0
if i < 2 {
lineAnimationTwo.toValue = lineLength/4
}else {
lineAnimationTwo.toValue = -lineLength/4
}
let lineLayer = lines[i]
lineLayer.addAnimation(lineAnimationTwo, forKey: "lineAnimationTwo")
}
//三角形兩邊的比例
let scale = (lineLength - 2*margin)/(lineLength - lineWidth)
for i in 0...3 {
var keypath = "transform.translation.y"
if i%2 == 1 {
keypath = "transform.translation.x"
}
let lineAnimationTwo = CABasicAnimation.init(keyPath: keypath)
lineAnimationTwo.beginTime = CACurrentMediaTime() + duration/2
lineAnimationTwo.duration = duration/4
lineAnimationTwo.fillMode = kCAFillModeForwards
lineAnimationTwo.removedOnCompletion = false
lineAnimationTwo.autoreverses = true
lineAnimationTwo.fromValue = 0
if i == 0 || i == 3 {
lineAnimationTwo.toValue = lineLength/4 * scale
}else {
lineAnimationTwo.toValue = -lineLength/4 * scale
}
let lineLayer = lines[i]
lineLayer.addAnimation(lineAnimationTwo, forKey: "lineAnimationThree")
}
}
第四步線條恢復(fù)的原來長(zhǎng)度的動(dòng)畫
這里我們還是使用CABasicAnimation基礎(chǔ)動(dòng)畫，keyPath作用于線條的strokeEnd屬性，讓strokeEnd從0到1來實(shí)現(xiàn)線條長(zhǎng)短的動(dòng)畫，下面是效果圖和代碼：
/**
線的第三步動(dòng)畫，線由短變長(zhǎng)
*/
private func lineAnimationThree() {
//線移動(dòng)的動(dòng)畫
let lineAnimationFour = CABasicAnimation.init(keyPath: "strokeEnd")
lineAnimationFour.beginTime = CACurrentMediaTime() + duration
lineAnimationFour.duration = duration/4
lineAnimationFour.fillMode = kCAFillModeForwards
lineAnimationFour.removedOnCompletion = false
lineAnimationFour.fromValue = 0
lineAnimationFour.toValue = 1
for i in 0...3 {
if i == 3 {
lineAnimationFour.delegate = self
}
let lineLayer = lines[i]
lineLayer.addAnimation(lineAnimationFour, forKey: "lineAnimationFour")
}
}
最后一步需要將動(dòng)畫組合起來
關(guān)于動(dòng)畫組合我沒用到CAAnimationGroup，因?yàn)檫@些動(dòng)畫并不是加到同一個(gè)layer上，再加上動(dòng)畫類型有點(diǎn)多加起來也比較麻煩，我就通過動(dòng)畫的beginTime屬性來控制動(dòng)畫的執(zhí)行順序，還加了動(dòng)畫暫停和繼續(xù)的功能，效果和代碼見下圖：
//MARK: Public Methods
/**
開始動(dòng)畫
*/
func startAnimation() {
angleAnimation()
lineAnimationOne()
lineAnimationTwo()
lineAnimationThree()
}
/**
暫停動(dòng)畫
*/
func pauseAnimation() {
layer.pauseAnimation()
for lineLayer in lines {
lineLayer.pauseAnimation()
}
status = .pause
}
/**
繼續(xù)動(dòng)畫
*/
func resumeAnimation() {
layer.resumeAnimation()
for lineLayer in lines {
lineLayer.resumeAnimation()
}
status = .Animating
}
extension CALayer {
//暫停動(dòng)畫
func pauseAnimation() {
// 將當(dāng)前時(shí)間CACurrentMediaTime轉(zhuǎn)換為layer上的時(shí)間, 即將parent time轉(zhuǎn)換為localtime
let pauseTime = convertTime(CACurrentMediaTime(), fromLayer: nil)
// 設(shè)置layer的timeOffset, 在繼續(xù)操作也會(huì)使用到
timeOffset = pauseTime
// localtime與parenttime的比例為0, 意味著localtime暫停了
speed = 0;
}
//繼續(xù)動(dòng)畫
func resumeAnimation() {
let pausedTime = timeOffset
speed = 1
timeOffset = 0;
beginTime = 0
// 計(jì)算暫停時(shí)間
let sincePause = convertTime(CACurrentMediaTime(), fromLayer: nil) - pausedTime
// local time相對(duì)于parent time時(shí)間的beginTime
beginTime = sincePause
}
}
//MARK: Animation Delegate
override func animationDidStart(anim: CAAnimation) {
if let animation = anim as? CABasicAnimation {
if animation.keyPath == "transform.rotation.z" {
status = .Animating
}
}
}
override func animationDidStop(anim: CAAnimation, finished flag: Bool) {
if let animation = anim as? CABasicAnimation {
if animation.keyPath == "strokeEnd" {
if flag {
status = .Normal
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, Int64(interval) * Int64(NSEC_PER_SEC)), dispatch_get_main_queue(), {
if self.status != .Animating {
self.startAnimation()
}
})
}
}
}
}
//MARK: Override
override func touchesEnded(touches: Set<UITouch>, withEvent event: UIEvent?) {
switch status {
case .Animating:
pauseAnimation()
case .pause:
resumeAnimation()
case .Normal:
startAnimation()
}
}
總結(jié)
動(dòng)畫看起來挺復(fù)雜，但是細(xì)細(xì)劃分出來也就那么回事，在寫動(dòng)畫之前要先想好動(dòng)畫的步驟，這個(gè)很關(guān)鍵，希望大家通過這篇博文章可以學(xué)到東西，有什么好的建議可以隨時(shí)提出來，謝謝大家閱讀~~demo地址
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
iOS自定義字體設(shè)置和系統(tǒng)自帶的字體詳解
這篇文章主要給大家介紹了關(guān)于iOS自定義字體設(shè)置和系統(tǒng)自帶的字體的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
在ios的程序開發(fā)中，經(jīng)常搞暈ios的開發(fā)模式，今天小編就給大家簡(jiǎn)單的總結(jié)一下，需要的的朋友參考下2017-03-03
iOS在Block中修改外部變量值的實(shí)現(xiàn)代碼
這篇文章主要介紹了iOS在Block中修改外部變量值的實(shí)現(xiàn)代碼,需要的朋友可以參考下2017-08-08
IOS 上架后出現(xiàn)90034代碼錯(cuò)誤問題解決
這篇文章主要介紹了IOS 上架后出現(xiàn)90034代碼錯(cuò)誤問題解決的相關(guān)資料,需要的朋友可以參考下2016-11-11
本篇文章主要介紹了iOS開發(fā)仿電商類APP首頁(yè)實(shí)例，主要是利用ui布局，具有一定的參考價(jià)值，有需要的可以了解一下。2016-11-11
iOS 鍵盤輸入限制(只能輸入字母,數(shù)字,禁止輸入特殊符號(hào))
本文主要介紹了iOS中鍵盤輸入限制(只能輸入字母,數(shù)字,禁止輸入特殊符號(hào))的方法。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-04-04
iOS設(shè)置圓角的4種方法實(shí)例（附性能評(píng)測(cè)）
這篇文章主要給大家介紹了關(guān)于iOS設(shè)置圓角的4種方法，并給大家附上了性能評(píng)測(cè)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
這篇文章主要給大家介紹了關(guān)于iOS仿高德首頁(yè)推拉效果的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-11-11
iOS 統(tǒng)計(jì)Xcode項(xiàng)目代碼行數(shù)的實(shí)例
下面小編就為大家分享一篇iOS 統(tǒng)計(jì)Xcode項(xiàng)目代碼行數(shù)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01
iOS實(shí)現(xiàn)類似微信和支付寶的密碼輸入框（UIKeyInput協(xié)議）
這篇文章主要介紹了iOS實(shí)現(xiàn)類似微信和支付寶的密碼輸入框，通過UIKeyInput協(xié)議為響應(yīng)者提供簡(jiǎn)單的鍵盤輸入的功，再通過CoreGraphics繪制出密碼輸入框，感興趣的小伙伴們可以參考一下2016-08-08