1.需要了解的東西
1.****貝塞爾曲線****:UIBezierPath是在 UIKit 中的一個類,繼承于NSObject,可以創(chuàng)建基于矢量的路徑.此類是Core Graphics框架關于path的一個OC封裝虐拓。使用此類可以定義常見的圓形饰潜、多邊形等形狀 奔脐。我們使用直線测萎、弧(arc)來創(chuàng)建復雜的曲線形狀沪铭。每一個直線段或者曲線段的結束的地方是下一個的開始的地方壮池。每一個連接的直線或者曲線段的集合成為subpath。一個UIBezierPath對象定義一個完整的路徑包括一個或者多個subpaths杀怠。
2火窒。****繪圖****:這個直接會在代碼中體現(xiàn)出來
2.實現(xiàn)的思路
大體思路
在tableView視圖的后面添加一個自定義視圖,通過tableView (ScrollView)的代理方法驮肉,每當視圖滾動的時候都去繪制一個圖形
細節(jié)
1.首先熏矿,畫出這個弧形軌跡,這里需要用到貝塞爾曲線,確定三個點:兩個拐點,一個控點票编,這樣就能畫出圖形的軌跡了褪储;
2.我們只要調節(jié)的就是那個控點的值,這里對應的就是tableView 的 ****contentOffset.y****慧域,所以我們要給自定義視圖一個變量鲤竹,來保存這個值,畫圖的時候 這個值 就是控點的位置昔榴;
3.對于畫圖辛藻,我們需要在- (void)drawRect:(CGRect)rect
方法下面寫繪圖的方法
值的注意的
重繪操作仍然在drawRect方法中完成,但是蘋果不建議直接調用drawRect方法互订,當然如果你強直直接調用此方法吱肌,當然是沒有效果的。蘋果要求我們調用UIView類中的setNeedsDisplay方法仰禽,則程序會自動調用drawRect方法進行重繪氮墨。(調用setNeedsDisplay會自動調用drawRect)
在UIView中,重寫drawRect: (CGRect) aRect方法,可以自己定義想要畫的圖案.且此方法一般情況下只會畫一次.也就是說這個drawRect方法一般情況下只會被掉用一次. 當某些情況下想要手動重畫這個View,只需要掉用[self setNeedsDisplay]方法即可.
也就是說 如果你要重新繪制的畫就要調用 [xxView setNeedsDisplay]
效果圖
3.不多嗶嗶 上代碼
1.首先,在我們的自定義視圖里 加一個屬性,用來記錄tableView 的偏移量
@property (nonatomic, assign) CGFloat offsetY;
2.drawRect方法
- (void)drawRect:(CGRect)rect
{
//初始化一個貝塞爾曲線
UIBezierPath *path = [UIBezierPath bezierPath];
//這個點可以認為 其中一個guaidian
[path moveToPoint:CGPointMake(0, 0)];
//添加另外一個拐點 和控點
[path addQuadCurveToPoint:CGPointMake(self.frame.size.width, 0) controlPoint:CGPointMake(self.frame.size.width/2,-(_offsetY * 1.2))];
//閉合曲線
[path closePath];
//路徑有了 下面是填充圖形
CGContextRef ref = UIGraphicsGetCurrentContext();
CGContextAddPath(ref, path.CGPath);
[[UIColor blueColor] set];
CGContextFillPath(ref);
}
3.在scrollView 的代理方法里 每次滾動我們都要重新繪制圖形
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
CGFloat offsetY = scrollView.contentOffset.y;
_list.offsetY = offsetY;
[_list setNeedsDisplay];
}
至此吐葵,彈性的效果就全部做完了
需要擴展的
這其中的效果规揪,是一個對稱的曲線,假如是一個不規(guī)則的曲線温峭,我們用貝塞爾曲線怎么畫呢猛铅,控點 和 拐點 我們應該怎么設置呢?后面等我研究一下再寫凤藏,嘻嘻嘻