-
本節(jié)主要講解關(guān)于iOS中Swift下拉刷新的思路。
-
創(chuàng)建一個scrollView的category:
為scrollView添加headerView與footerView,表示上下拉的窗口。
為scrollView提供兩個屬性:header與footer,表示是進(jìn)行上拉或者下拉刷新。
-
創(chuàng)建視圖RefreshView:
- 為其添加一個枚舉,表示下拉的狀態(tài)(正在加載,正常狀態(tài),下拉狀態(tài),松手后刷新視圖)
- 為刷新視圖(例如headerView)添加動畫,在正在加載的時候開始刷新視圖的動畫,結(jié)束刷新的時候停止視圖動畫。
- 為其添加監(jiān)聽observer,監(jiān)聽用戶下拉的距離,并且根據(jù)此距離來決定下拉刷新的狀態(tài)。
- 自定義視圖,添加到RefreshView上面,此視圖可以根據(jù)自己的要求來自定義。用于與用戶交互。
-
-
本節(jié)主要講解UIBezierPath + CADisplayLink來實現(xiàn)上升水滿效果。
- 創(chuàng)建自定義的View:GoupView:
//用于屏幕刷新的計時器
@property (nonatomic, strong) CADisplayLink *display;
//視圖起始的狀態(tài)
@property (nonatomic, assign) CGFloat start;
//視圖末位的狀態(tài)
@property (nonatomic, assign) CGFloat end;
-(void)animation;
-(void)completeAnimation;
- 利用UIView動畫機制,先讓一個基礎(chǔ)視圖實現(xiàn)上升的效果
[UIView animateWithDuration:2.0 delay:0 usingSpringWithDamping:1 initialSpringVelocity:0.8 options:UIViewAnimationOptionCurveLinear animations:^{
goupview.center = CGPointMake(375/2, to);
} completion:^(BOOL finished) {
[goupview completeAnimation];
}];
```
+ 在GoupView中實現(xiàn)drawRect
//記載一個視圖圖層變化(當(dāng)前正在變化的圖層)
CALayer *layer = self.layer.presentationLayer;
//當(dāng)前變化圖層的位置
CGPoint curpoi = layer.position;
// Drawing code
UIBezierPath *path = [UIBezierPath bezierPath];
CGFloat width = rect.size.width;
CGFloat height = rect.size.height;
//比例 根據(jù)數(shù)學(xué)運算出的比例
CGFloat progress =1-(height/2 - (curpoi.y-667)) / (self.from - self.to);
CGFloat delHeight = height/2 * progress;
NSLog(@"%lf",delHeight);
CGPoint startPoint = CGPointMake(0.0, 0.0);
CGPoint endPoint = CGPointMake(width, 0.0);
//接下來是畫出圖層
[path moveToPoint:startPoint];
[path addQuadCurveToPoint:endPoint controlPoint:CGPointMake(width/2, delHeight)];
[path addLineToPoint:CGPointMake(width, height)];
[path addQuadCurveToPoint:CGPointMake(0, height) controlPoint:CGPointMake(width/2, height)];
[[UIColor magentaColor] setFill];
[path closePath];
[path fill];
+ 本節(jié)主要講述 QQ粘連效果的實現(xiàn)原理。
本節(jié)網(wǎng)上已經(jīng)有很多很好的講解,可以移步[至此](http://kittenyang.com/drawablebubble/)。
1. 首先創(chuàng)建自定義QQButton,繼承于UIButton。此類包含了兩個View,一個代表著本身的layer,另一個則在其之下添加一個小的視圖,這個視圖是一個小的圓餅。
2. 并且在QQButton中添加一個CAShapeLayer,此layer用于在其中連接兩個圓之間的圖層。
3. 接下來我們添加pan手勢,此手勢解決button移動小圓隨著其與圓心的距離變換半徑的方式。
4. 最后,通過UIBezierPath 曲線來畫出計算公式中的圖層即可。
注意下面的方式可以讓button隨著手勢的移動而移動,需要用setTranslation設(shè)定其參照點:
// 移動
CGPoint transPoint = [pan translationInView:self];
CGPoint center = self.center;
// NSLog(@"%lf",transPoint.x);
center.x += transPoint.x;
center.y += transPoint.y;
self.center = center;
// NSLog(@"%lf",center.x);
[pan setTranslation:CGPointZero inView:self];
另外,記載一個果凍效果的實例,沒有使用drawRect(此方法占據(jù)很大的內(nèi)存),而巧妙的運用一個小的視圖的位置來決定視圖的變化。移步[至此](http://www.cocoachina.com/ios/20151231/14823.html)。