前言的前言
有很多人說用遮罩，移動下就能完成需求牺勾，這里我統(tǒng)一回復下：
- 1.是可以赞弥，但是火山口那個形狀絕對很生硬毅整，不自然
- 2.我只是想用動手寫寫畫畫算算，挑戰(zhàn)下自己嗤攻，所以不用再評論『用遮罩就能做balabala』了毛嫉，我知道的
前言
<br />
某天我接到了UI發(fā)給我的兩張圖：
看到圖的時候我一臉懵逼，顯然我需要做一個頁面切換的指示動畫妇菱。老實說承粤，從大三暑假開始做iOS開發(fā)也一年有余了，但是遇到復雜動畫總是唯恐避之不及闯团，只做過一些簡單的位移動畫辛臊。大腦中的舒適區(qū)總是讓我下意識避開麻煩的問題選擇簡單的解決方式。UI很善解人意得告訴我房交，你可以先用圖片替代動畫彻舰，以后有空慢慢完善。我突然不知哪里來的底氣拍了拍胸脯：“沒問題候味，包在我身上”刃唤。裝出去的b潑出去的水，沒辦法白群，我只好下定決心趁此機會好好鉆研一下形變動畫尚胞。（就在寫這篇文章的時候，UI看到了我最終的成果并點贊帜慢，頓時成就感爆棚）笼裳。
最終成果如圖：
<br />
具體代碼詳見：https://github.com/lfny2580832/NYTubeAnimation
<br />
需求分析
打定主意要搞定這個動畫唯卖，我首先在腦海中一遍遍模擬了整體效果。想象這是一個封閉光滑的管道躬柬，管道兩端是兩個可伸縮變形的白塊拜轨，當點擊下一步滑動到第二個頁面時，管道左邊的白塊被一股向右的力推動允青，逐步壓縮進管道中橄碾，最后從右邊釋放出來。這種感覺很抽象昧廷，只能隱隱約約想象出大概的效果堪嫂。我在紙上一遍遍得模擬每一個細節(jié)偎箫，開始進行簡化和分解木柬。
簡化
如果只看設計圖，顯然中間管道過窄淹办，白塊無法通過眉枕。于是我嘗試著將中間管道變寬，并用keynote利用圓弧與矩形畫出了簡化圖：
思路是不是立即清晰很多怜森！實際上簡化的過程我花了很長時間速挑。一開始我并沒有用圓形，而是用貝塞爾曲線來擬合圖形副硅，但是在擬合過程后中遇到了重重困難姥宝。比如要根據(jù)角度來確定某段弧線中貝塞爾點的控制點的長度（一小段曲線中至少需要計算五個點的坐標，計算非常復雜恐疲，且擬合效果不是很好）腊满，以及多個貝塞爾曲線UIBeizerPath閉合時各種錯位等等問題。多次嘗試無果后培己，我退而求其次碳蛋，使用了UIBeizerPath 自帶圓弧方法來構造整體圖形以及動畫。這段時間我花了整整兩天省咨。
簡化圖畫出來之后肃弟，心中有了思路，即用UIBeizerPath擬合圖形構造CAShapeLayer零蓉，然后使用CADisplayLink完成幀動畫笤受。對CAShapeLayer和CADisplayLink做動畫不太熟悉的同學可以參考我之前的一個水波動畫，github地址：https://github.com/lfny2580832/NYWaterWave
分解
<br />
看著上面的簡化圖敌蜂，我又懵逼了箩兽。這丫該怎么動起來？而且要想讓效果看起來自然流暢紊册，在形狀開始壓縮和在管道中移動速度肯定是不一樣的比肄，由管道的狹窄程度決定快耿，要計算的話難度太大，于是我便手動指定這兩塊區(qū)域的速度（所有參數(shù)都可以在代碼中指定）芳绩。經(jīng)過簡單的分解后我畫出了如下的參考圖掀亥，并標注了參數(shù)：
看著上圖腦海里有了些思路。我不可能只用一個CAShapelayer就做完這一系列的動畫妥色，當然只能將其分解成各個部分搪花，分別進行動畫。想象每個部分在整個動畫中的位置及大小嘹害，當每個部分都做好之后撮竿，再完美拼接起來尸闸，整個動畫不就完成了嗎运怖？
實現(xiàn)
屬性與實例變量
下圖屬性與實例變量位置及命名只是個人習慣，方便開發(fā)時自己查看玻褪，其中所有點都是根據(jù)上面的參考圖來命名的许师，大家可以對照查看：
看起來一臉懵逼房蝉？沒關系，我會將每個分解出來的模塊完整動畫向大家展示出來微渠。由于代碼有點多有點復雜搭幻，就直接以圖片形式像大家展示。這其中大部分都只是很多簡單的動畫逞盆，但將他們組合起來就不一樣啦檀蹋！
速度控制點—dynamic_Q_d和dynamic_Q2_d
</br>
這兩個點來控制在不同階段的速度，只需改變自增量即可云芦，邏輯稍稍復雜俯逾。
左邊的圓弧— leftSemiShape
</br>
主體矩形區(qū)域—maintubeShape
</br>
火山形狀—volcanoShape
</br>
火山形狀也是整個動畫中最復雜的一部分，需要一些簡單的計算焕数，下面附上計算使用的參考圖：
我們可以根據(jù)Q點移動的距離（dynamic_Q2_d）計算出b夾角纱昧，再通過UIBeizerPath畫出相應的形狀：
白塊右方圓形—rightCircleShape
</br>
尾部圓形形狀—tailCircleShape
</br>
管道形狀—tubeShape
</br>
背景形狀—wholeShape
</br>
背景形狀只需要將上方所有圖形拼合起來并擴大一圈即可，在此就不附代碼了堡赔。
拼合
</br>
總結
當動畫效果做出來后识脆，再將其封裝起來，開始事件善已、完成委托都變得那么簡單灼捂。寫這篇文章記錄我的思考過程是想讓更多人敢于挑戰(zhàn)自己，其實很多東西并沒有那么難换团，認真下去就能完成悉稠。如果總是待在自己的舒適區(qū)，很難提高自己的水平艘包。主動挑戰(zhàn)自己的猛，將一個復雜的問題分解成一個個小目標耀盗，然后一一達成，問題就迎刃而解啦!
順便安利一波我和幾個同樣年輕的小伙伴一起創(chuàng)建的公眾號“萌新碼路”卦尊，記錄一些有趣的問題和解決方案以及萌新碼農的日常叛拷，歡迎關注！
