1. 程式人生 > >讓一個檢視在隨著貝塞爾曲線的變化上動起來

讓一個檢視在隨著貝塞爾曲線的變化上動起來

具體demo@上海-鄧澤淼


1、涉及概念
1)UIDynamicItemCollisionBoundsType 碰撞界限的列舉型別(矩形,橢圓,路徑)
2)CADisplayLink是一個能讓我們以和螢幕重新整理率相同的頻率將內容畫到螢幕上的定時器。我們在應用中建立一個新的 CADisplayLink 物件,把它新增到一個runloop中,並給它提供一個 target 和selector 在螢幕重新整理的時候呼叫。
3)UIDynamicAnimator 可以通過該類新增不同的行為,來實現一些動態效果。
4)UIGravityBehavior 重力行為
5)UICollisionBehavior 碰撞行為
6)UIDynamicItemBehavior UIDynamicItemBehavior-動畫效果:增加各種物理特性
7) CAShapeLayer可以用來繪製所有通過CGPath來表示的形
2、實現過程
I、控制器的呼叫
1)如果tableView 下拉大於0.5則開始準備動畫檢視,否則移除;scrollView.contentOffset.y 下拉的時候小於0
2)建立動畫檢視 同時 開始 同頻率重新整理方法
3)建立動畫檢視
1\高超出螢幕300的高度,這個高度是小球最終載入時背景高度
2\建立一個形狀圖層,方便通過CGPath來繪製圖形
3\建立動畫主角,一個UIImageView的圖片(球)
4\建立動畫幫助類UIDynamicAnimator animator
5\為 animator 新增 重力、碰撞、物理特性等行為
4)同頻率重新整理方法
1\如果正在載入,保持載入旋轉狀態
2\否則根據tableView下拉狀態 重新整理控制輔助點的位置,以此改變圖形變化
3\setNeedsDisplay 重新繪製動畫層檢視
5)停止下拉時,並且設定最小位置時的操作
1\設定動畫層為小球最終載入旋轉狀態
2\讓貝塞爾曲線動畫趨於水平
3\延遲2s完成載入完成的回撥
4\載入完成時,停止小球的旋轉動畫
II、動畫檢視內部
1、繪製的過程
1)如果發現此時是載入旋轉狀態,給小球一個推力,彈到指定位置,旋轉載入
2)否則移除碰撞行為的邊界
3)獲取當前的貝塞爾曲線,賦值給檢視形狀圖層的path上
4)如果還沒有到載入旋轉狀態,此時如果球不再貝塞爾曲線區域內,要重置下,然後更新碰撞行為的邊界
2、小球的彈出
1)判斷是否可以彈出
2)設定吸附行為,將球定位在頂部的中心位置
3)開始旋轉動畫
3、貝塞爾曲線的建立
1)左上角 右上角 右下角 左下角 連線
2)貝塞爾曲線 由 右下角 左下角 以及 控制輔助點 控制
[bezierPath addQuadCurveToPoint:CGPointMake(0, self.selfFrame.size.height) controlPoint:self.controlPoint.center];
3)根據外界tableView下拉狀態 重新整理控制輔助點的位置,以此改變圖形變化
III、

具體demo@上海-鄧澤淼
利用 貝塞爾曲線,CADisplayLink,UIKit Dynamics 實現Q彈的下拉重新整理,有興趣的可以看看