iOS仿Mac窗口最小化的原理
前言
這次仿照Mac窗口最小化時的神奇效果（官方的中文版本是這么叫的，聽起來很尷尬），做了一個iOS版本的。基礎代碼都沿用自iOS特效之破碎的ViewController。先來看一下效果圖。
?
原理
首先要分析一下官方的動畫是如何進行的，下面是效果的截圖。動畫分為兩步，先是將圖片扭曲成下面的樣子，然后再吸入到左側。想要做圖片扭曲，用一個nxm的3D網格就可以了。n和m越大，扭曲后得到的邊緣越平滑。
?
在上圖的基礎上加入一個坐標軸，這樣便于觀察規律。
?
在動畫執行過程中，網格上的點會沿著一個方向縮放，我們稱縮放的軸為縮放軸，圖中的縮放軸是y軸。同時還需要在縮放軸上指定一個縮放中心點。在動畫的第二個階段，所有點會沿著一個方向移動，我們稱這個軸為移動軸，圖中的移動軸是x軸。
動畫第一階段
在動畫的第一個階段中，網格上的點只在縮放軸上移動。我們假設一個點在移動軸上的位置為movLoc，那么我們可以使用公式0.5 * 0.98 * cos（3.14 * movLoc + 3.14） + 0.5 + 0.01;計算出第一階段結束時，該點需要向縮放中心點縮放的量。為什么是這個公式呢，我給大家貼一張圖就清楚了。是不是和上面的邊緣曲線有點像。圖我是用Mac自帶的Grapher繪制的。在調試曲線的過程中Grapher的確非常好用。公式里的0.98和0.01是相關的兩個量，控制左邊窄口的大小。0.01 = （1 - 0.98） / 2。動畫第一階段主要的工作就是根據當前動畫的進度百分比，控制點到達最終縮放量的進度即可。
?
動畫第二階段
第二階段主要就是移動軸上的移動，我們可以根據最遠移動距離和當前的動畫進度計算出當前點在移動軸上的位置。然后根據當前的位置計算出縮放軸上需要的縮放量。最遠距離可以通過吸入點和另一側的邊界計算出來。
Shader
了解完原理我們來看Shader代碼吧。Swift代碼比較簡單，只是生成了一個撐滿屏幕的nxm網格，稍候再說。
傳入Shader的數據
VertexIn和VertexOut很普通，包含頂點位置和紋理坐標。Uniforms里包含了動畫相關的信息，當前動畫經過的時間animationElapsedTime，動畫總時間animationTotalTime，吸入點gatherPoint。
非常好我支持^.^
(0) 0%
不好我反對
(0) 0%
下載地址
iOS仿Mac窗口最小化的原理下載
相關電子資料下載
- iOS17.1可能明天發布，iOS17.1主要修復哪些問題？ 376
- 華為全新鴻蒙蓄勢待發 僅支持鴻蒙內核和鴻蒙系統應用 719
- 蘋果手機系統iOS 17遭用戶質疑 731
- iPhone12輻射超標？蘋果推送iOS 17.1解決此事 750
- 傳華為囤積零部件 目標明年智能手機出貨7000萬部；消息稱 MiOS 僅限國內，小米 28208
- 蘋果推送iOS17.0.3，解決iPhone15Pro系列存在機身過熱 216
- Testin云測兼容和真機服務平臺中上線iPhone 15系列手機 208
- 利爾達推出搭載HooRiiOS的Matter模組 145
- 運放參數解析：輸入偏置電流(Ibias)和失調電流(Ios) 128
- 昆侖太科發布支持國產飛騰騰銳D2000芯片的開源BIOS固件版本 448