前言

這次仿照Mac窗口最小化時(shí)的神奇效果（官方的中文版本是這么叫的，聽(tīng)起來(lái)很尷尬），做了一個(gè)iOS版本的。基礎(chǔ)代碼都沿用自iOS特效之破碎的ViewController。先來(lái)看一下效果圖。

?

原理

首先要分析一下官方的動(dòng)畫(huà)是如何進(jìn)行的，下面是效果的截圖。動(dòng)畫(huà)分為兩步，先是將圖片扭曲成下面的樣子，然后再吸入到左側(cè)。想要做圖片扭曲，用一個(gè)nxm的3D網(wǎng)格就可以了。n和m越大，扭曲后得到的邊緣越平滑。

?

在上圖的基礎(chǔ)上加入一個(gè)坐標(biāo)軸，這樣便于觀察規(guī)律。

?

在動(dòng)畫(huà)執(zhí)行過(guò)程中，網(wǎng)格上的點(diǎn)會(huì)沿著一個(gè)方向縮放，我們稱(chēng)縮放的軸為縮放軸，圖中的縮放軸是y軸。同時(shí)還需要在縮放軸上指定一個(gè)縮放中心點(diǎn)。在動(dòng)畫(huà)的第二個(gè)階段，所有點(diǎn)會(huì)沿著一個(gè)方向移動(dòng)，我們稱(chēng)這個(gè)軸為移動(dòng)軸，圖中的移動(dòng)軸是x軸。

動(dòng)畫(huà)第一階段

在動(dòng)畫(huà)的第一個(gè)階段中，網(wǎng)格上的點(diǎn)只在縮放軸上移動(dòng)。我們假設(shè)一個(gè)點(diǎn)在移動(dòng)軸上的位置為movLoc，那么我們可以使用公式0.5 * 0.98 * cos（3.14 * movLoc + 3.14） + 0.5 + 0.01;計(jì)算出第一階段結(jié)束時(shí)，該點(diǎn)需要向縮放中心點(diǎn)縮放的量。為什么是這個(gè)公式呢，我給大家貼一張圖就清楚了。是不是和上面的邊緣曲線有點(diǎn)像。圖我是用Mac自帶的Grapher繪制的。在調(diào)試曲線的過(guò)程中Grapher的確非常好用。公式里的0.98和0.01是相關(guān)的兩個(gè)量，控制左邊窄口的大小。0.01 = （1 - 0.98） / 2。動(dòng)畫(huà)第一階段主要的工作就是根據(jù)當(dāng)前動(dòng)畫(huà)的進(jìn)度百分比，控制點(diǎn)到達(dá)最終縮放量的進(jìn)度即可。

?

動(dòng)畫(huà)第二階段

第二階段主要就是移動(dòng)軸上的移動(dòng)，我們可以根據(jù)最遠(yuǎn)移動(dòng)距離和當(dāng)前的動(dòng)畫(huà)進(jìn)度計(jì)算出當(dāng)前點(diǎn)在移動(dòng)軸上的位置。然后根據(jù)當(dāng)前的位置計(jì)算出縮放軸上需要的縮放量。最遠(yuǎn)距離可以通過(guò)吸入點(diǎn)和另一側(cè)的邊界計(jì)算出來(lái)。

Shader

了解完原理我們來(lái)看Shader代碼吧。Swift代碼比較簡(jiǎn)單，只是生成了一個(gè)撐滿屏幕的nxm網(wǎng)格，稍候再說(shuō)。

傳入Shader的數(shù)據(jù)

VertexIn和VertexOut很普通，包含頂點(diǎn)位置和紋理坐標(biāo)。Uniforms里包含了動(dòng)畫(huà)相關(guān)的信息，當(dāng)前動(dòng)畫(huà)經(jīng)過(guò)的時(shí)間animationElapsedTime，動(dòng)畫(huà)總時(shí)間animationTotalTime，吸入點(diǎn)gatherPoint。