動畫效果

經常用UC看到首頁有這麼一個動畫，就仿造寫了一下。

實現分析

1.畫曲線的動畫

這個一眼看去就想到用貝塞爾曲線畫，來看貝塞爾曲線方法，給出兩個定點，和一個控制點就可以畫。

於是按照下圖，兩個黃色的點是定點，綠色的是控制點，於是畫出了這樣的圖。

看左邊的圖，中間有大片空白，看起來很浪費螢幕空間，使用者體驗不太好，於是想著怎麼讓貝塞爾曲線過某個定點，比如讓曲線過綠色的定點，而不是把控制點設在綠色的位置。

重訴一下，現有的方法是給出兩個定點和一個控制點，能畫一條曲線。
現在是要，已知兩個定點，和過另外一個定點D，畫一條曲線。

我現在想讓這條曲線過綠色的點，就像下圖那樣，求控制點座標是多少？

看下圖，求出控制點座標的過程

由上圖就得出了控制點的座標，然後就可以畫出“圖3”的樣子了，實際中我覺得圖3貼太緊了，也不美觀，於是 yc 乘了個0.6的係數，即 yc = 0.6 * yc，就看起來比較順眼了。

2.頁面結構

頁面結構大概是這樣，底下的 tableView 鋪滿整個 view，然後藍色的headerView 加在 tableView 的上面，不是加 tableView.tableHeaderView 上面哦，至於為什麼你加加看就知道了。會跟著 tableview 動

3.不規則事件點選，事件穿透

headerView 上有一個頭像，是可以點選的，其他地方的點選事件要傳給底下的 tableView 也叫事件穿透，通過修改 hitTest 可以實現

hitTest 主要用來做事件分發的，可以實現不規則點選，它在整個 view 結構上是遞迴的，深度優先的，今天不講演算法，因為 hitTest 太厲害，不規則點選用 pointInside 函式就夠了。

這個函式會被 hitTest 呼叫，返回 false 表示點選的不是自己，返回 true 表示點選的是自己。
那麼，我只要判斷點選的 point 在不在頭像的那個圓圈裡面就可以了，就是判斷點在不在圓內，高中講過了，point 到圓心的距離小於半徑就表示在了，那麼返回 true 就行。具體的還是看程式碼吧。
如果有多個控制元件，需要自己確定每個控制元件的點選區域。

最後還是上個程式碼 下載地址，下載慢慢看吧。

4.後期改進

寫完這個部落格突然想到一個還要改的地方，就是當使用者手指鬆開的時候，scrollViewWillEndDragging，這個方法內判斷一下，contentOffset.y 值，如果超過多少值，那麼自動回撥一個 block，可實現下拉重新整理。