前言

為什么要做個(gè)動(dòng)畫？ 通常來(lái)說(shuō)，一個(gè)app的消息小標(biāo)識(shí)，只是給用戶知道你有多少條未讀信息，是沒(méi)有用戶交互的，用戶必須要去查看全部未讀信息后才會(huì)消失，這只是針對(duì)于一種用戶，如果對(duì)于另一種用戶（不想點(diǎn)擊未讀消息，小標(biāo)識(shí)又要給我消失）那就不好使了，這就大大影響了用戶體驗(yàn)了。

明白了為什么要做這個(gè)交互，那么我們可以在此基礎(chǔ)上在思考，如何去優(yōu)化這種交互，毫無(wú)疑問(wèn)，第一反應(yīng)就是動(dòng)畫。沒(méi)錯(cuò)，動(dòng)畫是交互中最能提高用戶體驗(yàn)的方式。

效果圖：

這個(gè)動(dòng)畫的核心部分就是圓拖拽過(guò)程離開(kāi)始點(diǎn)的軌跡要如何去計(jì)算,接下來(lái)我會(huì)放一張圖分析是如何計(jì)算這段軌跡，如圖。

小圓到大圓的軌跡就是BPCDOA這個(gè)填充不規(guī)則圖形

AD和BC這兩段是一個(gè)拋物線貝塞爾曲線，為此我們要計(jì)算出曲率O,P的位置。

通過(guò)勾股定義，以及相似三角形角度的知識(shí)，可以得出以上角度都是相同的a。之后算出各點(diǎn)的位置，并用貝塞爾曲線每個(gè)點(diǎn)相連接。

注意：

初始化屬性要寫在layoutSubViews里，在這個(gè)方法里才能得到真正的frame

手勢(shì)滑動(dòng)，隨著曲線不斷改變，超過(guò)最大范圍曲線消失，當(dāng)手勢(shì)消失，按鈕沒(méi)有超過(guò)最大范圍就利用彈性動(dòng)畫來(lái)復(fù)原位置，反之消除。

最后，按鈕消失的爆炸動(dòng)畫是利用gif來(lái)實(shí)現(xiàn)的

總結(jié)：動(dòng)畫之美靠我們程序猿去發(fā)掘，用心學(xué)動(dòng)畫，發(fā)散自己的想象空間，只要你敢想，才能有更炫酷的動(dòng)畫特效。。。

源碼下載鏈接github