之前寫(xiě)了幾篇關(guān)于UIView動(dòng)畫(huà)和CA動(dòng)畫(huà)的理論以及它們的關(guān)系丈秩，并沒(méi)有真正從實(shí)踐的角度去實(shí)現(xiàn)各個(gè)動(dòng)畫(huà)編程。然而這次就該記錄下到底怎么在APP中運(yùn)用各類(lèi)動(dòng)畫(huà)了扇丛，也剛剛手上剛好有個(gè)音樂(lè)播放器demo,就拿你練手吧绿映。
-
先來(lái)看看效果圖到底是怎樣的。
-
在構(gòu)建的多個(gè)動(dòng)畫(huà)中骂蓖，自己覺(jué)得有點(diǎn)小得意的就是歌曲列表后面那個(gè)隨音樂(lè)跳動(dòng)的動(dòng)畫(huà)积瞒。在第一個(gè)gif里面不能明顯清晰的呈現(xiàn)出來(lái)，于是有了第二個(gè)gif登下。
-
第二個(gè)gif中就比較清晰可見(jiàn)了茫孔。非常有節(jié)日氣氛，凌亂中帶有美的感覺(jué)被芳。如果加載到特定的app中缰贝，估計(jì)更有一番風(fēng)味。這些都不重要畔濒，重要的是動(dòng)畫(huà)簡(jiǎn)單易得卻不失風(fēng)范剩晴。怎么簡(jiǎn)單？一行代碼夠簡(jiǎn)單了吧侵状。世界上難道還存在不用代碼就能實(shí)現(xiàn)動(dòng)畫(huà)的嗎赞弥？那是storyboard世界嗎？嘻嘻開(kāi)個(gè)玩笑壹将，估計(jì)有嗤攻，是我不知道而已。
容我先記錄一下第一個(gè)gif里面所包含的動(dòng)畫(huà)嗎诽俯？其實(shí)光看gif妇菱，有點(diǎn)難看出所有animation，還需娓娓道來(lái)暴区。
1.首先從上往下開(kāi)始說(shuō)啊(要怪我嗎)闯团，第一個(gè)肯定是那個(gè)旋轉(zhuǎn)的封面，這旋轉(zhuǎn)動(dòng)畫(huà)想必不用多嘴仙粱，略過(guò)房交。
2.旋轉(zhuǎn)封面上有個(gè)綠色進(jìn)度條動(dòng)畫(huà)，高仿QQ音樂(lè)哦伐割。自己把circleSleder改造后就成進(jìn)度條了候味。
3.旋轉(zhuǎn)封面還有個(gè)彈性動(dòng)畫(huà)刃唤，界面切換時(shí)展現(xiàn)。duration比較短白群，不太明顯尚胞。
4.往下就是按鈕btn的動(dòng)畫(huà)，搖晃和放大帜慢。當(dāng)然也在界面切換時(shí)還有個(gè)彈性動(dòng)畫(huà)笼裳。
5.接著往下就是歌曲列表的動(dòng)畫(huà)。造gif時(shí)忘了拖動(dòng)列表粱玲，所以歌曲列表中cell的酷炫動(dòng)畫(huà)沒(méi)有呈現(xiàn)出來(lái)躬柬。不過(guò)這個(gè)動(dòng)畫(huà)在另一界面中滾動(dòng)tableView時(shí)呈現(xiàn)出來(lái)了。這動(dòng)畫(huà)思想源于老鎮(zhèn)抽减。
6.界面切換回來(lái)時(shí)允青，整個(gè)歌曲列表有個(gè)3D動(dòng)畫(huà)，不知道察覺(jué)到?jīng)]有胯甩。
7.歌曲列表背后有個(gè)隨音樂(lè)跳動(dòng)的動(dòng)畫(huà)昧廷，也就是待會(huì)重點(diǎn)記錄說(shuō)明的動(dòng)畫(huà)。
8.底部有個(gè)向左滾動(dòng)的label偎箫。其實(shí)它并不是label木柬，它是一個(gè)button。button上實(shí)現(xiàn)的動(dòng)畫(huà)哦淹办！原創(chuàng)哦眉枕，還可以吧！界面切換回來(lái)的時(shí)候它也有個(gè)彈性動(dòng)畫(huà)怜森。
9.另一界面的頻道列表滾動(dòng)時(shí)cell的動(dòng)畫(huà)速挑。
10.其實(shí)還有一個(gè)小動(dòng)畫(huà)，就是點(diǎn)擊音樂(lè)控制btn按鈕時(shí)候彈出的提示窗口副硅。很多牛人一看就知道怎么回事姥宝。我采用的的框架是swiftNotice。不過(guò)這框架不支持純文本動(dòng)畫(huà)恐疲，自己擴(kuò)展的呢腊满，順便把frame也重寫(xiě)了下。
-
至此已經(jīng)基本記錄完這個(gè)demo所具有的動(dòng)畫(huà)培己。
該好好說(shuō)說(shuō)那個(gè)隨音樂(lè)跳動(dòng)的動(dòng)畫(huà)了吧碳蛋？說(shuō)好的一行代碼呢？省咨！請(qǐng)看大屏幕肃弟。
animation音樂(lè)波動(dòng) = GRMusicAnimation(rect: self.geQuLieBiao.frame, number: 5)
-
夠簡(jiǎn)單的接口吧。只帶兩個(gè)參數(shù)。
rect: 是指定這個(gè)動(dòng)畫(huà)視圖的frame笤受。
number:是指動(dòng)畫(huà)中要顯示的柱子數(shù)穷缤。
-
柱子數(shù)為30的時(shí)候，是不是更有誘惑呢箩兽？
-
當(dāng)然也有控制API绅项，想要在什么時(shí)候啟動(dòng)就什么時(shí)候啟動(dòng)，什么時(shí)候停止就什么時(shí)候停止比肄。
animation音樂(lè)波動(dòng).GRAnimateStart() animation音樂(lè)波動(dòng).GRAnimateStop()
這里值得一提的是我這個(gè)是屬于UIView動(dòng)畫(huà),也是連續(xù)動(dòng)畫(huà)，因此在UIView動(dòng)畫(huà)的結(jié)束閉包里面是連續(xù)調(diào)用了UIView.而手動(dòng)終止動(dòng)畫(huà)layer.removeAllAnimations也會(huì)執(zhí)行結(jié)束閉包囊陡。因此在終止動(dòng)畫(huà)的時(shí)候一定要考慮到在閉包里區(qū)分到底是自動(dòng)播放動(dòng)畫(huà)完畢還是手動(dòng)終止了動(dòng)畫(huà)芳绩。不加以區(qū)分的話(huà)是無(wú)法停止動(dòng)畫(huà)的。這問(wèn)題也在前面的文章了記錄了撞反。
這是自己第一篇在簡(jiǎn)書(shū)使用gif圖的文章 妥色。感覺(jué)這gif造圖工具好是好用，但虛化的背景壓根渲染不來(lái)啊~下次換個(gè)git工具試試遏片，哪位大牛有推薦嗎嘹害？
