前言

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

?

原理

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

?

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

?

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

動畫第一階段

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

?

動畫第二階段

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

Shader

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

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

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