現(xiàn)在在蘋果應(yīng)用商店上有超過140萬的App，想讓你的app事件非常具有挑戰(zhàn)的事情。你有這樣一個(gè)機(jī)會(huì)，在你的應(yīng)用的數(shù)據(jù)完全加載出來之前宁玫，你可以通過一個(gè)很小的窗口來捕獲用戶的關(guān)注。

沒有比這個(gè)更好的地方讓用戶大為贊嘆柑晒，當(dāng)你的應(yīng)用程序載入畫面的時(shí)候欧瘪，你可以添加一個(gè)愉快的動(dòng)畫，作為先導(dǎo)匙赞，以加載你的應(yīng)用佛掖。

在本教程中，你將學(xué)習(xí)如何做出這樣的動(dòng)畫涌庭。你將學(xué)習(xí)如何建立piece-by-piece芥被，采用前衛(wèi)的技術(shù)來創(chuàng)建一個(gè)流體和迷人的動(dòng)畫。

準(zhǔn)備

下載本教程開始的工程坐榆，把它保存到一個(gè)方便的地方拴魄，并在Xcode中打開。

打開HolderView.swift席镀。在這個(gè)UIView的子類中匹中，添加下面的子層在動(dòng)畫的上面展示：

OvalLayer.swift：這是第一層，從0慢慢變大豪诲，然后很短的時(shí)間抖動(dòng)

TriangleLayer.swift：當(dāng)OvalLayer層正在抖動(dòng)的時(shí)候出現(xiàn)顶捷，當(dāng)這層旋轉(zhuǎn)的時(shí)候，OvalLayer收縮到?jīng)]有屎篱，只讓TriangleLayer可視

RectangleLayer.swift：這層作為TriangleLayer可視的容器

ArcLayer.swift：這層填充RectangleLayer通過一個(gè)動(dòng)畫服赎，類似于玻璃中充滿水的樣子

打開OvalLayer.swift葵蒂，最初的項(xiàng)目已經(jīng)包含了初始化這些層和所有在你的動(dòng)畫中將使用的貝塞爾路徑的代碼。你會(huì)看到expand(),wobble()和contract()這些方法里面都是空的重虑，通過這個(gè)教程你將填充這些方法刹勃。所有其他的*Layer的文件都是類似的功能結(jié)構(gòu)。

Note：如果你想學(xué)習(xí)關(guān)于貝塞爾路徑的知識(shí)嚎尤，可以點(diǎn)擊這個(gè)教程Modern Core Graphics with Swift

最后，打開ViewController.swift伍宦，看到addHolderView()芽死，這個(gè)方法中添加了HolderView的實(shí)例對象，作為控制器視圖的中心的子視圖次洼。這個(gè)視圖將包含所有的動(dòng)畫关贵。該視圖控制器只需要將它放在屏幕上，然后該視圖將執(zhí)行實(shí)際的動(dòng)畫的代碼卖毁。

animateLabel()方法是有HolderView類提供的代理回調(diào)揖曾，當(dāng)你完成動(dòng)畫的次序時(shí)，你將會(huì)填充它亥啦。

addButton()僅僅是在視圖上增加了一個(gè)按鈕炭剪，以便您可以點(diǎn)擊并重新啟動(dòng)動(dòng)畫。

構(gòu)建并運(yùn)行該項(xiàng)目翔脱，你應(yīng)該看到一個(gè)空白的屏幕奴拦。這是件完美的事情在空白的畫布上開始制作你新的動(dòng)畫！

在教程的最后届吁，你的app將會(huì)是下面這樣的：

因此错妖，事不宜遲，讓我們開始吧疚沐！

添加橢圓

動(dòng)畫開始有個(gè)紅色的橢圓形暂氯，然后擴(kuò)展到視圖的中心，然后微微搖晃亮蛔。

打開HolderView.swift痴施，然后在HolderView上方附近定義下面的常量：

let?ovalLayer?=?OvalLayer()

添加下面的方法：

func?addOval()?{

layer.addSublayer(ovalLayer)

ovalLayer.expand()

}

你第一次添加的OvalLayer的實(shí)例作為視圖層的子視圖。

在OvalLayer.swift中尔邓，添加下面的代碼到expand()中：

func?expand()?{

var?expandAnimation:?CABasicAnimation?=?CABasicAnimation(keyPath:?"path")

expandAnimation.fromValue?=?ovalPathSmall.CGPath

expandAnimation.toValue?=?ovalPathLarge.CGPath

expandAnimation.duration?=?animationDuration

expandAnimation.fillMode?=?kCAFillModeForwards

expandAnimation.removedOnCompletion?=?false

addAnimation(expandAnimation,?forKey:?nil)

}

這個(gè)方法創(chuàng)建了一個(gè)CABasicAnimation實(shí)例晾剖，來改變橢圓的路徑從ovalPathSmall到ovalPathLarge。初始的項(xiàng)目中為你提供了這些貝塞爾路徑梯嗽。設(shè)置removedOnCompletion為false齿尽，fillMode的值為KCAFillModeForwards，在動(dòng)畫中一旦動(dòng)畫完成灯节，讓橢圓開辟一個(gè)新的路徑循头。

最后绵估，打開ViewController.swift，添加下面那一行到addHolderView()卡骂，就在view.addSubview(holderView)的下面：

holderView.addOval()

addOval在橢圓被添加到控制器的視圖中后開始動(dòng)畫国裳。

構(gòu)建并運(yùn)行你的app，你的動(dòng)畫將會(huì)顯示下面這樣：

晃動(dòng)橢圓

在橢圓被添加到視圖中并擴(kuò)展后全跨，下一步就是在步驟中加一些反彈缝左，讓其擺動(dòng)。

打開HolderView.swift浓若，然后添加下面的方法：

func?wobbleOval()?{

ovalLayer.wobble()

}

這個(gè)方法是讓其在OvalLayer中擺動(dòng)渺杉。

打開OvalLayer.swift，在wobble()中添加下面的代碼：

func?wobble()?{

//?1

var?wobbleAnimation1:?CABasicAnimation?=?CABasicAnimation(keyPath:?"path")

wobbleAnimation1.fromValue?=?ovalPathLarge.CGPath

wobbleAnimation1.toValue?=?ovalPathSquishVertical.CGPath

wobbleAnimation1.beginTime?=?0.0

wobbleAnimation1.duration?=?animationDuration

//?2

var?wobbleAnimation2:?CABasicAnimation?=?CABasicAnimation(keyPath:?"path")

wobbleAnimation2.fromValue?=?ovalPathSquishVertical.CGPath

wobbleAnimation2.toValue?=?ovalPathSquishHorizontal.CGPath

wobbleAnimation2.beginTime?=?wobbleAnimation1.beginTime?+?wobbleAnimation1.duration

wobbleAnimation2.duration?=?animationDuration

//?3

var?wobbleAnimation3:?CABasicAnimation?=?CABasicAnimation(keyPath:?"path")

wobbleAnimation3.fromValue?=?ovalPathSquishHorizontal.CGPath

wobbleAnimation3.toValue?=?ovalPathSquishVertical.CGPath

wobbleAnimation3.beginTime?=?wobbleAnimation2.beginTime?+?wobbleAnimation2.duration

wobbleAnimation3.duration?=?animationDuration

//?4

var?wobbleAnimation4:?CABasicAnimation?=?CABasicAnimation(keyPath:?"path")

wobbleAnimation4.fromValue?=?ovalPathSquishVertical.CGPath

wobbleAnimation4.toValue?=?ovalPathLarge.CGPath

wobbleAnimation4.beginTime?=?wobbleAnimation3.beginTime?+?wobbleAnimation3.duration

wobbleAnimation4.duration?=?animationDuration

//?5

var?wobbleAnimationGroup:?CAAnimationGroup?=?CAAnimationGroup()

wobbleAnimationGroup.animations?=?[wobbleAnimation1,?wobbleAnimation2,?wobbleAnimation3,

wobbleAnimation4]

wobbleAnimationGroup.duration?=?wobbleAnimation4.beginTime?+?wobbleAnimation4.duration

wobbleAnimationGroup.repeatCount?=?2

addAnimation(wobbleAnimationGroup,?forKey:?nil)

}

這里有很多的代碼挪钓，但它分解的很好是越，來看下這里干了些什么：

1、從遠(yuǎn)處到垂直壓扁

2碌上、從垂直壓扁改為水平和垂直都?jí)罕?/p>

3倚评、切換回垂直壓扁

4、完成動(dòng)畫馏予，結(jié)束回到最開始的位置

5天梧、將所有的動(dòng)畫整合到CAAnimationGroup中，然后將這組動(dòng)畫添加到OvalLayout中霞丧。

每個(gè)后續(xù)動(dòng)畫的beginTime是先前動(dòng)畫的beginTime和其持續(xù)時(shí)間的總和腿倚。重復(fù)這個(gè)動(dòng)畫組兩次，就會(huì)看到搬動(dòng)稍微拉長蚯妇。

即時(shí)你現(xiàn)在添加了所有搖晃動(dòng)畫的代碼敷燎，你也看不到你想看到的動(dòng)畫。

回到HolderView.swift中箩言，添加下面的代碼到addOval()中：

NSTimer.scheduledTimerWithTimeInterval(0.3,?target:?self,?selector:?"wobbleOval",

userInfo:?nil,?repeats:?false)

這里創(chuàng)建了一個(gè)定時(shí)器硬贯，在OvalLayer完成擴(kuò)展動(dòng)畫后，調(diào)用wobbleOval()

構(gòu)建并運(yùn)行你的app陨收，看下現(xiàn)在的動(dòng)畫：

這是非常微妙的饭豹，但這是一個(gè)非常重要的因素去創(chuàng)建一個(gè)真正令人愉快的動(dòng)畫。你不需要讓其充滿整個(gè)屏幕务漩！

開始變形

即將看到神奇的事情拄衰！你即將把橢圓變成三角形。在用戶的眼中饵骨，這個(gè)轉(zhuǎn)變應(yīng)該看上去是完全無縫的翘悉。那么你需要使用兩個(gè)顏色相同的單獨(dú)的形狀來實(shí)現(xiàn)它。

打開HolderView.swift居触，添加下面的代碼到HolderView中妖混，就在你之前添加的ovalLayer常量的下面：

let?triangleLayer?=?TriangleLayer()

這里定義了一個(gè)TriangleLayer實(shí)例老赤，跟你之前定義的ovalLayer一樣。

現(xiàn)在制市，實(shí)現(xiàn)wobbleOval()方法：

func?wobbleOval()?{

//?1

layer.addSublayer(triangleLayer)?//?Add?this?line

ovalLayer.wobble()

//?2

//?Add?the?code?below

NSTimer.scheduledTimerWithTimeInterval(0.9,?target:?self,

selector:?"drawAnimatedTriangle",?userInfo:?nil,

repeats:?false)

}

這段代碼做了下面這些事情：

1抬旺、該行添加了前面初始化的TriangleLayer實(shí)例，作為HolderView層里的一個(gè)子層

2祥楣、之前知道了擺動(dòng)動(dòng)畫運(yùn)行兩次的總共時(shí)間是1.8开财，中間的地方將會(huì)是一個(gè)非常好的地方去開始變形處理。因此误褪，添加一個(gè)計(jì)時(shí)器床未，在延遲0.9后，執(zhí)行drawAnimatedTriangle()方法振坚。

Note：在動(dòng)畫中尋找中一個(gè)正確的持續(xù)時(shí)間或者延遲時(shí)間需要一些實(shí)驗(yàn)和錯(cuò)誤的嘗試，然后才能發(fā)現(xiàn)一個(gè)好的動(dòng)畫和完美的動(dòng)畫的區(qū)別斋扰。我鼓勵(lì)你去和你的動(dòng)畫去鼓搗渡八，讓它們變得更完美。這可能需要一些時(shí)間传货，但它是值得的屎鳍。

接下來，添加下面的功能：

func?drawAnimatedTriangle()?{

triangleLayer.animate()

}

這個(gè)方法是實(shí)現(xiàn)剛剛寫的定時(shí)器的功能问裕，它讓三角形開始動(dòng)逮壁。

現(xiàn)在，打開TriangleLayer.swift粮宛，然后添加下面的代碼到animate()中：

func?animate()?{

var?triangleAnimationLeft:?CABasicAnimation?=?CABasicAnimation(keyPath:?"path")

triangleAnimationLeft.fromValue?=?trianglePathSmall.CGPath

triangleAnimationLeft.toValue?=?trianglePathLeftExtension.CGPath

triangleAnimationLeft.beginTime?=?0.0

triangleAnimationLeft.duration?=?0.3

var?triangleAnimationRight:?CABasicAnimation?=?CABasicAnimation(keyPath:?"path")

triangleAnimationRight.fromValue?=?trianglePathLeftExtension.CGPath

triangleAnimationRight.toValue?=?trianglePathRightExtension.CGPath

triangleAnimationRight.beginTime?=?triangleAnimationLeft.beginTime?+?triangleAnimationLeft.duration

triangleAnimationRight.duration?=?0.25

var?triangleAnimationTop:?CABasicAnimation?=?CABasicAnimation(keyPath:?"path")

triangleAnimationTop.fromValue?=?trianglePathRightExtension.CGPath

triangleAnimationTop.toValue?=?trianglePathTopExtension.CGPath

triangleAnimationTop.beginTime?=?triangleAnimationRight.beginTime?+?triangleAnimationRight.duration

triangleAnimationTop.duration?=?0.20

var?triangleAnimationGroup:?CAAnimationGroup?=?CAAnimationGroup()

triangleAnimationGroup.animations?=?[triangleAnimationLeft,?triangleAnimationRight,

triangleAnimationTop]

triangleAnimationGroup.duration?=?triangleAnimationTop.beginTime?+?triangleAnimationTop.duration

triangleAnimationGroup.fillMode?=?kCAFillModeForwards

triangleAnimationGroup.removedOnCompletion?=?false

addAnimation(triangleAnimationGroup,?forKey:?nil)

}

這段代碼讓三角形的角伴隨著OvalLayer層的晃動(dòng)一個(gè)一個(gè)出來窥淆；在最初的項(xiàng)目中貝塞爾路徑已經(jīng)定義了每個(gè)角。最左邊的角第一個(gè)出來巍杈，接著是右邊的忧饭，最后是最上面的那個(gè)角。通過創(chuàng)建三個(gè)基于CABasicAnimation的實(shí)例筷畦，添加到CAAnimationGroup中词裤。

構(gòu)建并運(yùn)行你的app，將會(huì)看到目前的動(dòng)畫狀態(tài)鳖宾；當(dāng)橢圓晃動(dòng)的時(shí)候吼砂，三角形的每個(gè)角開始出來知道三個(gè)角全部顯示出來，就像這樣：

完成變形

要實(shí)現(xiàn)其變形鼎文，你需要讓HolderView360度旋轉(zhuǎn)當(dāng)OvalLayer收縮的時(shí)候渔肩，最終僅留下TriangleLayer

打開HolderView.swift，添加下面的代碼在drawAnimatedTriangle()的最后：

NSTimer.scheduledTimerWithTimeInterval(0.9,?target:?self,?selector:?"spinAndTransform",

userInfo:?nil,?repeats:?false)

在三角形動(dòng)畫完成后設(shè)置一個(gè)定時(shí)器拇惋，0.9秒的這個(gè)時(shí)間也是一次次通過嘗試而得到的赖瞒。

現(xiàn)在女揭，添加下面的方法：

func?spinAndTransform()?{

//?1

layer.anchorPoint?=?CGPointMake(0.5,?0.6)

//?2

var?rotationAnimation:?CABasicAnimation?=?CABasicAnimation(keyPath:?"transform.rotation.z")

rotationAnimation.toValue?=?CGFloat(M_PI?*?2.0)

rotationAnimation.duration?=?0.45

rotationAnimation.removedOnCompletion?=?true

layer.addAnimation(rotationAnimation,?forKey:?nil)

//?3

ovalLayer.contract()

}

剛剛創(chuàng)建的定時(shí)器一旦橢圓晃動(dòng)停止并且三角形的每個(gè)角都出現(xiàn)時(shí)調(diào)用這個(gè)函數(shù)。下面看下這個(gè)函數(shù)的詳細(xì)功能：

1栏饮、更新該層的錨點(diǎn)略低于視圖的中心吧兔。這讓旋轉(zhuǎn)閑的更加自然。這是因?yàn)榕坻遥瑱E圓和三角形事實(shí)上以垂直方向從視圖的中心偏離境蔼。因此，如果視圖繞著中心旋轉(zhuǎn)伺通，那么橢圓和三角似乎是垂直移動(dòng)的箍土。

2、CABasicAnimation讓圖層旋轉(zhuǎn)360度或者2π弧度罐监。旋轉(zhuǎn)是繞著z軸吴藻，垂直于屏幕的表面進(jìn)入和移出。

3弓柱、OvalLayer調(diào)用contract()方法執(zhí)行動(dòng)畫沟堡，縮減橢圓的大小直至看不見。

現(xiàn)在矢空，打開OvalLayer.swift航罗，然后添加下面的代碼到contract()中：

func?contract()?{

var?contractAnimation:?CABasicAnimation?=?CABasicAnimation(keyPath:?"path")

contractAnimation.fromValue?=?ovalPathLarge.CGPath

contractAnimation.toValue?=?ovalPathSmall.CGPath

contractAnimation.duration?=?animationDuration

contractAnimation.fillMode?=?kCAFillModeForwards

contractAnimation.removedOnCompletion?=?false

addAnimation(contractAnimation,?forKey:?nil)

}

這是讓OvalLayer返回最開始的路徑上ovalPathSmall，通過執(zhí)行一個(gè)CABasicAnimation動(dòng)畫屁药。這是跟之前調(diào)用的動(dòng)畫是相反的粥血。

構(gòu)建并運(yùn)行你的app；一旦動(dòng)畫結(jié)束后酿箭，就只剩下三角形在屏幕的中間复亏。

繪制容器

在接下來的部分中，你將會(huì)繪制一個(gè)長方形的容器來創(chuàng)建一個(gè)外殼缭嫡。要做到這一點(diǎn)蜓耻，你需要使用RectangleLayer的畫筆。你將要做兩次械巡，通過使用紅色和藍(lán)色作為筆的顏色刹淌。

打開HolderView.swift，然后定義兩個(gè)RectangularLayer常量讥耗，如下有勾，在triangleLayer的下方：

let?redRectangleLayer?=?RectangleLayer()

let?blueRectangleLayer?=?RectangleLayer()

接下來添加下面的代碼在spinAndTransform()的后面：

NSTimer.scheduledTimerWithTimeInterval(0.45,?target:?self,

selector:?"drawRedAnimatedRectangle",

userInfo:?nil,?repeats:?false)

NSTimer.scheduledTimerWithTimeInterval(0.65,?target:?self,

selector:?"drawBlueAnimatedRectangle",

userInfo:?nil,?repeats:?false)

這里你創(chuàng)建了兩個(gè)定時(shí)器分別調(diào)用drawRedAnimatedRectangle()和drawBlueAnimatedRectangle()。

首先畫紅色的矩形框古程，之后完成向右的一個(gè)旋轉(zhuǎn)動(dòng)畫蔼卡。在紅色的矩形框繪制接近完成的時(shí)候開始繪制藍(lán)色的矩形框。

添加下面的兩個(gè)方法：

func?drawRedAnimatedRectangle()?{

layer.addSublayer(redRectangleLayer)

redRectangleLayer.animateStrokeWithColor(Colors.red)

}

func?drawBlueAnimatedRectangle()?{

layer.addSublayer(blueRectangleLayer)

blueRectangleLayer.animateStrokeWithColor(Colors.blue)

}

一旦你添加RectangleLayer作為HolderView的一個(gè)子層時(shí)挣磨，就開始調(diào)用animateStrokeWithColor(color:)雇逞，并開始執(zhí)行繪制邊框的動(dòng)畫荤懂。

現(xiàn)在打開RectangleLayer.swift，填充animateStrokeWithColor(color:)方法塘砸，如下：

func?animateStrokeWithColor(color:?UIColor)?{

strokeColor?=?color.CGColor

var?strokeAnimation:?CABasicAnimation?=?CABasicAnimation(keyPath:?"strokeEnd")

strokeAnimation.fromValue?=?0.0

strokeAnimation.toValue?=?1.0

strokeAnimation.duration?=?0.4

addAnimation(strokeAnimation,?forKey:?nil)

}

這里通過添加一個(gè)CABasicAnimation去繪制一個(gè)筆节仿。CAShapeLayer中的strokeEnd指示著畫筆去描繪這個(gè)矩形框。

構(gòu)建并運(yùn)行你的app掉蔬，將會(huì)看到下面的動(dòng)畫：

填充容器

現(xiàn)在有了容器廊宪，下一步就是將它填補(bǔ)起來。這個(gè)效果類似于水填充滿玻璃女轿，這是一個(gè)偉大的詩視覺效果箭启！

打開HolderView.swift，就在RectangleLayer屬性的后面蛉迹，添加一個(gè)常量：

let?arcLayer?=?ArcLayer()

添加下面的代碼在drawBlueAnimatedRectangle()的最后面：

NSTimer.scheduledTimerWithTimeInterval(0.40,?target:?self,?selector:?"drawArc",

userInfo:?nil,?repeats:?false)

這里創(chuàng)建了一個(gè)計(jì)時(shí)器傅寡，一旦藍(lán)色的RectangleLayer繪制完成后便去調(diào)用drawArc()。

添加下面的方法：

func?drawArc()?{

layer.addSublayer(arcLayer)

arcLayer.animate()

}

在執(zhí)行動(dòng)畫之前北救，這里增加了一個(gè)在HolderView層上已經(jīng)創(chuàng)建了的ArcLayer的實(shí)例荐操。

打開ArcLayer.swift，添加下面的代碼到animate()方法中：

func?animate()?{

var?arcAnimationPre:?CABasicAnimation?=?CABasicAnimation(keyPath:?"path")

arcAnimationPre.fromValue?=?arcPathPre.CGPath

arcAnimationPre.toValue?=?arcPathStarting.CGPath

arcAnimationPre.beginTime?=?0.0

arcAnimationPre.duration?=?animationDuration

var?arcAnimationLow:?CABasicAnimation?=?CABasicAnimation(keyPath:?"path")

arcAnimationLow.fromValue?=?arcPathStarting.CGPath

arcAnimationLow.toValue?=?arcPathLow.CGPath

arcAnimationLow.beginTime?=?arcAnimationPre.beginTime?+?arcAnimationPre.duration

arcAnimationLow.duration?=?animationDuration

var?arcAnimationMid:?CABasicAnimation?=?CABasicAnimation(keyPath:?"path")

arcAnimationMid.fromValue?=?arcPathLow.CGPath

arcAnimationMid.toValue?=?arcPathMid.CGPath

arcAnimationMid.beginTime?=?arcAnimationLow.beginTime?+?arcAnimationLow.duration

arcAnimationMid.duration?=?animationDuration

var?arcAnimationHigh:?CABasicAnimation?=?CABasicAnimation(keyPath:?"path")

arcAnimationHigh.fromValue?=?arcPathMid.CGPath

arcAnimationHigh.toValue?=?arcPathHigh.CGPath

arcAnimationHigh.beginTime?=?arcAnimationMid.beginTime?+?arcAnimationMid.duration

arcAnimationHigh.duration?=?animationDuration

var?arcAnimationComplete:?CABasicAnimation?=?CABasicAnimation(keyPath:?"path")

arcAnimationComplete.fromValue?=?arcPathHigh.CGPath

arcAnimationComplete.toValue?=?arcPathComplete.CGPath

arcAnimationComplete.beginTime?=?arcAnimationHigh.beginTime?+?arcAnimationHigh.duration

arcAnimationComplete.duration?=?animationDuration

var?arcAnimationGroup:?CAAnimationGroup?=?CAAnimationGroup()

arcAnimationGroup.animations?=?[arcAnimationPre,?arcAnimationLow,?arcAnimationMid,

arcAnimationHigh,?arcAnimationComplete]

arcAnimationGroup.duration?=?arcAnimationComplete.beginTime?+?arcAnimationComplete.duration

arcAnimationGroup.fillMode?=?kCAFillModeForwards

arcAnimationGroup.removedOnCompletion?=?false

addAnimation(arcAnimationGroup,?forKey:?nil)

}

這個(gè)動(dòng)畫非常類似于之前的擺動(dòng)的動(dòng)畫扭倾；創(chuàng)建了一個(gè)CAAnimationGroup，包含5個(gè)基于路徑的CABasicAnimation實(shí)例挽绩。每個(gè)路徑隨著高度的增加都有一個(gè)稍微不同的弧度膛壹。最后，將CAAnimationGroup應(yīng)用到圖層中唉堪，并指示著它不被移除模聋，在動(dòng)畫完成之前將保持這個(gè)狀態(tài)。

構(gòu)建并運(yùn)行你的app唠亚，將會(huì)看到神奇的一幕链方！

完成動(dòng)畫

剩下的事情就是將藍(lán)色的HolderView擴(kuò)大直至填充滿整個(gè)屏幕，并在視圖添加一個(gè)UILabel作為logo灶搜。

打開HolderView.swift祟蚀，添加下面的代碼到drawArc()的最后面：

NSTimer.scheduledTimerWithTimeInterval(0.90,?target:?self,?selector:?"expandView",

userInfo:?nil,?repeats:?false)

這里創(chuàng)建了一個(gè)計(jì)時(shí)器，當(dāng)ArcLayer填充滿容器的時(shí)候調(diào)用expandView()割卖。

現(xiàn)在前酿，添加下面的方法：

func?expandView()?{

//?1

backgroundColor?=?Colors.blue

//?2

frame?=?CGRectMake(frame.origin.x?-?blueRectangleLayer.lineWidth,

frame.origin.y?-?blueRectangleLayer.lineWidth,

frame.size.width?+?blueRectangleLayer.lineWidth?*?2,

frame.size.height?+?blueRectangleLayer.lineWidth?*?2)

//?3

layer.sublayers?=?nil

//?4

UIView.animateWithDuration(0.3,?delay:?0.0,?options:?UIViewAnimationOptions.CurveEaseInOut,

animations:?{

self.frame?=?self.parentFrame

},?completion:?{?finished?in

self.addLabel()

})

}

該方法做了寫什么事情呢：

1、holder view的背景被設(shè)置為藍(lán)色鹏溯，和你之前填充的矩形框的顏色一樣罢维；

2、這個(gè)frame擴(kuò)大到之前設(shè)定的RectangleLayer畫筆的寬度丙挽；

3肺孵、所有的子層都被移除≡冉瑁現(xiàn)在沒有橢圓，沒有三角形平窘，沒有矩形圖層吓肋；

4、添加一個(gè)動(dòng)畫初婆，讓HolderView擴(kuò)大至填充滿整個(gè)屏幕蓬坡。一旦該動(dòng)畫執(zhí)行了，你需要調(diào)用addLabel()方法磅叛；

在下面添加該方法：

func?addLabel()?{

delegate?.animateLabel()

}

動(dòng)畫顯示這個(gè)Label僅僅使用了視圖的委托動(dòng)能屑咳。

現(xiàn)在打開ViewController.swift，添加下面的代碼到animateLabel()中：

func?animateLabel()?{

//?1

holderView.removeFromSuperview()

view.backgroundColor?=?Colors.blue

//?2

var?label:?UILabel?=?UILabel(frame:?view.frame)

label.textColor?=?Colors.white

label.font?=?UIFont(name:?"HelveticaNeue-Thin",?size:?170.0)

label.textAlignment?=?NSTextAlignment.Center

label.text?=?"S"

label.transform?=?CGAffineTransformScale(label.transform,?0.25,?0.25)

view.addSubview(label)

//?3

UIView.animateWithDuration(0.4,?delay:?0.0,?usingSpringWithDamping:?0.7,?initialSpringVelocity:?0.1,?options:?UIViewAnimationOptions.CurveEaseInOut,

animations:?({

label.transform?=?CGAffineTransformScale(label.transform,?4.0,?4.0)

}),?completion:?{?finished?in

self.addButton()

})

}

依次注釋每個(gè)部分：

1弊琴、將HolderView從視圖上移除兆龙，并設(shè)置視圖的背景顏色為藍(lán)色；

2敲董、創(chuàng)建UILabel紫皇，內(nèi)容為“S”，作為logo腋寨，添加到視圖中聪铺；

3、執(zhí)行一個(gè)彈簧動(dòng)畫顯示那個(gè)Label萄窜。一旦動(dòng)畫執(zhí)行完铃剔，調(diào)用addButton()方法，在視圖中添加一個(gè)按鈕查刻，當(dāng)點(diǎn)擊時(shí)键兜，重復(fù)顯示該動(dòng)畫過程。

構(gòu)建并運(yùn)行你的app穗泵，給自己鼓掌吧普气，然后花點(diǎn)時(shí)間來享受自己實(shí)現(xiàn)了什么！

終

你可以到這里下載完整的項(xiàng)目

由于第一次翻譯外文佃延，可能很多缺陷和不足现诀，求各路大神指正！無比感謝履肃！原文地址

此譯文已發(fā)表在我的CSDN博客上zmp1123

另外赶盔，獲取更多的iOS開發(fā)的相關(guān)資料、資訊榆浓、課程于未，可關(guān)注iOS開發(fā)者開發(fā)者公眾平臺(tái)！