iOS動(dòng)畫(huà)教你編寫(xiě)Slack的Loading動(dòng)畫(huà)進(jìn)階篇
前幾天看了一篇關(guān)于動(dòng)畫(huà)的博客叫手摸手教你寫(xiě) Slack 的 Loading 動(dòng)畫(huà)，看著挺炫，但是是安卓版的，尋思的著仿造著寫(xiě)一篇iOS版的，下面是我寫(xiě)這個(gè)動(dòng)畫(huà)的分解
老規(guī)矩先上圖和demo地址：
剛看到這個(gè)動(dòng)畫(huà)的時(shí)候，腦海里出現(xiàn)了兩個(gè)方案，一種是通過(guò)drawRect畫(huà)出來(lái)，然后配合CADisplayLink不停的繪制線的樣式；第二種是通過(guò)CAShapeLayer配合CAAnimation來(lái)實(shí)現(xiàn)動(dòng)畫(huà)效果。再三考慮覺(jué)得使用后者，因?yàn)榍罢咝枰?jì)算很多，比較復(fù)雜，而且經(jīng)過(guò)測(cè)試前者相比于后者消耗更多的CPU，下面將我的思路寫(xiě)下來(lái)：
相關(guān)配置和初始化方法
在寫(xiě)這個(gè)動(dòng)畫(huà)之前，我們把先需要的屬性寫(xiě)好，比如線條的粗細(xì)，動(dòng)畫(huà)的時(shí)間等等，下面是相關(guān)的配置和初識(shí)化方法：
//線的寬度
var lineWidth:CGFloat = 0
//線的長(zhǎng)度
var lineLength:CGFloat = 0
//邊距
var margin:CGFloat = 0
//動(dòng)畫(huà)時(shí)間
var duration:Double = 2
//動(dòng)畫(huà)的間隔時(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)畫(huà)的狀態(tài)
private(set) var status:AnimationStatus = .Normal
//四條線
private var lines:[CAShapeLayer] = []
enum AnimationStatus {
//普通狀態(tài)
case Normal
//動(dòng)畫(huà)中
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))
}
通過(guò)CAShapeLayer繪制線條
看到這個(gè)線條我就想到了用CAShapeLayer來(lái)處理，因?yàn)镃AShapeLayer完全可以實(shí)現(xiàn)這種效果，而且它的strokeEnd的屬性可以用來(lái)實(shí)現(xiàn)線條的長(zhǎng)度變化的動(dòng)畫(huà)，下面上繪制四根線條的代碼：
//MARK: 繪制線
/**
繪制四條線
*/
private func drawLineShapeLayer() {
//開(kāi)始點(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: 開(kāi)始點(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)畫(huà)分解
經(jīng)過(guò)分析，可以將動(dòng)畫(huà)分為四個(gè)步驟：
•畫(huà)布的旋轉(zhuǎn)動(dòng)畫(huà)，旋轉(zhuǎn)兩圈
•線條由長(zhǎng)變短的動(dòng)畫(huà)，更畫(huà)布選擇的動(dòng)畫(huà)一起執(zhí)行，旋轉(zhuǎn)一圈的時(shí)候結(jié)束
•線條的位移動(dòng)畫(huà)，線條逐漸向中間靠攏，再畫(huà)筆旋轉(zhuǎn)完一圈的時(shí)候執(zhí)行，兩圈的時(shí)候結(jié)束
•線條由短變長(zhǎng)的動(dòng)畫(huà)，畫(huà)布旋轉(zhuǎn)完兩圈的時(shí)候執(zhí)行
第一步畫(huà)布旋轉(zhuǎn)動(dòng)畫(huà)
這里我們使用CABasicAnimation基礎(chǔ)動(dòng)畫(huà)，keyPath作用于畫(huà)布的transform.rotation.z，以z軸為目標(biāo)進(jìn)行旋轉(zhuǎn)，下面是效果圖和代碼：
//MARK: 動(dòng)畫(huà)步驟
/**
旋轉(zhuǎn)的動(dòng)畫(huà)，旋轉(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)畫(huà)
這里我們還是使用CABasicAnimation基礎(chǔ)動(dòng)畫(huà)，keyPath作用于線條的strokeEnd屬性，讓strokeEnd從1到0來(lái)實(shí)現(xiàn)線條長(zhǎng)短的動(dòng)畫(huà)，下面是效果圖和代碼：
/**
線的第一步動(dòng)畫(huà)，線長(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)畫(huà)
這里我們也是使用CABasicAnimation基礎(chǔ)動(dòng)畫(huà)，keyPath作用于線條的transform.translation.x和transform.translation.y屬性，來(lái)實(shí)現(xiàn)向中間聚攏的效果，下面是效果圖和代碼：
/**
線的第二步動(dòng)畫(huà)，線向中間平移
*/
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ù)的原來(lái)長(zhǎng)度的動(dòng)畫(huà)
這里我們還是使用CABasicAnimation基礎(chǔ)動(dòng)畫(huà)，keyPath作用于線條的strokeEnd屬性，讓strokeEnd從0到1來(lái)實(shí)現(xiàn)線條長(zhǎng)短的動(dòng)畫(huà)，下面是效果圖和代碼：
/**
線的第三步動(dòng)畫(huà)，線由短變長(zhǎng)
*/
private func lineAnimationThree() {
//線移動(dòng)的動(dòng)畫(huà)
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)畫(huà)組合起來(lái)
關(guān)于動(dòng)畫(huà)組合我沒(méi)用到CAAnimationGroup，因?yàn)檫@些動(dòng)畫(huà)并不是加到同一個(gè)layer上，再加上動(dòng)畫(huà)類(lèi)型有點(diǎn)多加起來(lái)也比較麻煩，我就通過(guò)動(dòng)畫(huà)的beginTime屬性來(lái)控制動(dòng)畫(huà)的執(zhí)行順序，還加了動(dòng)畫(huà)暫停和繼續(xù)的功能，效果和代碼見(jiàn)下圖：
//MARK: Public Methods
/**
開(kāi)始動(dòng)畫(huà)
*/
func startAnimation() {
angleAnimation()
lineAnimationOne()
lineAnimationTwo()
lineAnimationThree()
}
/**
暫停動(dòng)畫(huà)
*/
func pauseAnimation() {
layer.pauseAnimation()
for lineLayer in lines {
lineLayer.pauseAnimation()
}
status = .pause
}
/**
繼續(xù)動(dòng)畫(huà)
*/
func resumeAnimation() {
layer.resumeAnimation()
for lineLayer in lines {
lineLayer.resumeAnimation()
}
status = .Animating
}
extension CALayer {
//暫停動(dòng)畫(huà)
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)畫(huà)
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)畫(huà)看起來(lái)挺復(fù)雜，但是細(xì)細(xì)劃分出來(lái)也就那么回事，在寫(xiě)動(dòng)畫(huà)之前要先想好動(dòng)畫(huà)的步驟，這個(gè)很關(guān)鍵，希望大家通過(guò)這篇博文章可以學(xué)到東西，有什么好的建議可以隨時(shí)提出來(lái)，謝謝大家閱讀~~demo地址
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
iOS 使用 socket 實(shí)現(xiàn)即時(shí)通信示例（非第三方庫(kù)）
這篇文章主要介紹了iOS 使用 socket 即時(shí)通信示例（非第三方庫(kù)）的資料,這里整理了詳細(xì)的代碼,有需要的小伙伴可以參考下。2017-02-02
iOS的UI開(kāi)發(fā)中Button的基本編寫(xiě)方法講解
這篇文章主要介紹了iOS的UI開(kāi)發(fā)中Button的基本編寫(xiě)方法講解,代碼基于傳統(tǒng)的Objective-C,需要的朋友可以參考下2015-11-11
iOS實(shí)現(xiàn)數(shù)字倍數(shù)動(dòng)畫(huà)效果
在iOS開(kāi)發(fā)中,制作動(dòng)畫(huà)效果是最讓開(kāi)發(fā)者享受的環(huán)節(jié)之一，下面這篇文章主要給大家介紹了關(guān)于iOS實(shí)現(xiàn)數(shù)字倍數(shù)動(dòng)畫(huà)效果的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
iOS11 SectionHeader 胡亂移動(dòng)且滑動(dòng)時(shí)出現(xiàn)重復(fù)內(nèi)容的解決方法
這篇文章主要介紹了iOS11 SectionHeader 胡亂移動(dòng)且滑動(dòng)時(shí)出現(xiàn)重復(fù)內(nèi)容的解決方法,需要的朋友可以參考下2017-11-11
本文主要介紹了iOS15適配小結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家詳細(xì)介紹了iOS實(shí)現(xiàn)掃描二維碼控件的封裝，具有一定的實(shí)用性和參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
下面小編就為大家?guī)?lái)一篇老生常談iOS應(yīng)用程序生命周期。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
iOS中使用UISearchBar控件限制輸入字?jǐn)?shù)的實(shí)現(xiàn)方法
這篇文章主要介紹了iOS中使用UISearchBar控件限制輸入字?jǐn)?shù)的實(shí)現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下2016-08-08
本篇文章主要介紹了iOS開(kāi)發(fā)系列--詳解地圖與定位，具有一定的參考價(jià)值，有需要的可以了解一下。2016-11-11
升級(jí)到ios10遇到一系列問(wèn)題，今天小編抽時(shí)間吧iOS10適配問(wèn)題點(diǎn)整理分享給大家，感興趣的朋友可以參考下2016-09-09