之前寫(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ū)分的話是無(wú)法停止動(dòng)畫(huà)的。這問(wèn)題也在前面的文章了記錄了。
這是自己第一篇在簡(jiǎn)書(shū)使用gif圖的文章 。感覺(jué)這gif造圖工具好是好用，但虛化的背景壓根渲染不來(lái)啊~下次換個(gè)git工具試試，哪位大牛有推薦嗎？
