因?yàn)轫?xiàng)目有個(gè)界面要模仿高德地圖路徑規(guī)劃滑動(dòng)效果突颊，因此寫了demo，并簡單說下分析過程冗锁。
高德地圖效果演示:
demo效果演示:
Demo地址:https://github.com/fangjinfeng/MySampleCode/tree/master/FJFBlogProjectDemo
一. 分析
首先齐唆，我們可以看出這個(gè)滾動(dòng)的視圖應(yīng)該是
UIScrollView或者UIScrollView的子類(比如:UITableView);其次，從高德地圖里的視圖一開始的滑動(dòng)冻河，可以看出這個(gè)滑動(dòng)是平穩(wěn)的滑動(dòng)箍邮，沒有加速和減速茉帅，因此這里不可能是
UIScrollView的滾動(dòng)效果，因?yàn)?code>UIScrollView的滾動(dòng)效果是由一個(gè)加減速的過程锭弊，因此一開始滑動(dòng)堪澎，應(yīng)該是通過滑動(dòng)手勢UIPanGestureRecognizer，來移動(dòng)UIScrollView的y值來移動(dòng)接著滑動(dòng)到指定位置之后味滞，
UIScrollView的y值固定不動(dòng)樱蛤，然后UIScrollView的內(nèi)容進(jìn)行滾動(dòng)。這里就涉及到滑動(dòng)手勢UIPanGestureRecognizer的滑動(dòng)剑鞍，還有UIScrollView內(nèi)部的滾動(dòng)的處理昨凡。高德地圖的演示效果里面，一開始滑動(dòng)視圖向上移動(dòng)蚁署，移動(dòng)到指定的點(diǎn)之后便脊，立馬就變成視圖的滾動(dòng)，這里可以分析光戈，UIScrollView既支持手勢的滑動(dòng)又支持視圖的滾動(dòng)哪痰，只是通過條件來判斷限制兩者的執(zhí)行邏輯。同時(shí)我們可以看到久妆，如果一開始
向上拉動(dòng)視圖力度大一點(diǎn)晌杰，視圖會(huì)直接滾動(dòng)到指定位置，如果力度小镇饺，就恢復(fù)到原來位置乎莉，因此這里需要依據(jù)手勢滑動(dòng)的加速度來進(jìn)行判斷處理。而當(dāng)你滑動(dòng)到
中間位置的時(shí)候奸笤，也需要依據(jù)最后滑動(dòng)的位置來判斷應(yīng)該動(dòng)畫滾動(dòng)到上方還是下方。最后滑動(dòng)的時(shí)候上方的視圖和滑動(dòng)視圖本身有背景顏色的
漸變效果哼鬓，這里需要依據(jù)滑動(dòng)距離來判斷监右。
二.代碼分析:
- 首先由于滾動(dòng)視圖(
demo里面是UITableView)需要支持手勢滑動(dòng)和內(nèi)部滾動(dòng)，因此需要寫一個(gè)類FJBaseTableView繼承自UITableView异希，然后在FJBaseTableView的實(shí)現(xiàn)里面重寫如下方法：
// 當(dāng)有 多個(gè)手勢 都可以 響應(yīng)
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer {
return YES;
}
來支持響應(yīng)多個(gè)手勢健盒。
- 然后給
滾動(dòng)視圖tableView添加滑動(dòng)手勢，當(dāng)tableView從底部滑動(dòng)到頂部指定位置時(shí)称簿，應(yīng)該限制tableView內(nèi)部的視圖滾動(dòng)扣癣。
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
if (self.tableView.frame.origin.y > _scrollViewStartPositionY) {
[scrollView setContentOffset:CGPointMake(0, 0)];
}
}
這里的_scrollViewStartPositionY是頂部指定位置。
- 接著看下
手勢滑動(dòng)的處理邏輯:
#pragma mark - 手勢處理
- (void)handlePanGesture:(UIPanGestureRecognizer *)sender {
if (sender.state == UIGestureRecognizerStateBegan) {
_beganPoint = [sender locationInView:sender.view.superview];
_curPoint = sender.view.center;
_topTipContainerViewCurrentY = _topContainerView.frame.origin.y;
_previousOffsetY = self.tableView.contentOffset.y;
} else if(sender.state == UIGestureRecognizerStateChanged) {
CGPoint point = [sender locationInView:sender.view.superview];
CGFloat offsetY = _previousOffsetY - self.tableView.contentOffset.y;
NSInteger y_offset = point.y - _beganPoint.y - offsetY;
if (sender.view.frame.origin.y >= _scrollViewStartPositionY || (self.tableView.contentOffset.y == 0 && self.tableView.contentSize.height > self.tableView.frame.size.height)) {
sender.view.center = CGPointMake(_curPoint.x, _curPoint.y + y_offset);
[self updateViewControlsWithSlideOffset:y_offset];
}
if (sender.view.frame.origin.y > _scrollViewLimitMaxY) {
sender.view.y = _scrollViewLimitMaxY;
[self updateViewControlsWithSlideUp:NO];
}
else if(sender.view.frame.origin.y < _scrollViewStartPositionY) {
sender.view.y = _scrollViewStartPositionY;
[self updateViewControlsWithSlideUp:YES];
}
} else if(sender.state == UIGestureRecognizerStateEnded) {
if (sender.view.frame.origin.y <= _scrollViewStartPositionY || sender.view.frame.origin.y > _scrollViewLimitMaxY) {
if (sender.view.frame.origin.y <= _scrollViewStartPositionY) {
[self updateViewControlsWithSlideUp:YES];
}
if (sender.view.frame.origin.y > _scrollViewLimitMaxY) {
[self updateViewControlsWithSlideUp:NO];
}
return;
}
// 滑動(dòng)速度處理
CGPoint velocity = [sender velocityInView:self.view];
CGFloat speed = 350;
if (velocity.y < - speed) {
// 快速向上
[self tableViewMoveToTop];
return;
} else if (velocity.y > speed) {
// 快速向下
[self tableViewMoveToBottom];
return;
}
// 滑動(dòng)臨界值
CGFloat criticalValue = _scrollViewLimitMaxY/2.0;
if (sender.view.frame.origin.y <= criticalValue) {
[self tableViewMoveToTop];
} else {
[self tableViewMoveToBottom];
}
}
}
這里幾個(gè)點(diǎn)需要注意:
-
_beganPoint憨降、_curPoint兩個(gè)參數(shù)是用來計(jì)算手勢滑動(dòng)距離然后調(diào)整scrollView的滑動(dòng)距離父虑。而_previousOffsetY是用來記錄滑動(dòng)之前tableView的內(nèi)部視圖的偏移距離，因?yàn)楫?dāng)tableView滑動(dòng)到頂部指定位置后授药，tableView開始滾動(dòng)士嚎，這時(shí)候tableView向下滑動(dòng)是先移動(dòng)了tableView內(nèi)部的滾動(dòng)距離呜魄，然后才是滑動(dòng)距離，因此需要將這部分值先記錄莱衩，然后去除掉爵嗅，才是tableView向下真正需要滑動(dòng)的距離。
CGFloat offsetY = _previousOffsetY - self.tableView.contentOffset.y;
NSInteger y_offset = point.y - _beganPoint.y - offsetY;
2.滑動(dòng)過程中笨蚁，頂部視圖的移動(dòng)和漸變處理,這里先依據(jù)滑動(dòng)的距離算出tableView滑動(dòng)距離與tableView最大滑動(dòng)距離的比值睹晒，然后再算出頂部視圖需要移動(dòng)的距離和背景的透明度。
- (void)updateViewControlsWhenSliding {
if (self.tableView.frame.origin.y > _scrollViewStartPositionY && self.tableView.frame.origin.y < _scrollViewLimitMaxY) {
CGFloat offsetLimitDistance = _scrollViewLimitMaxY - _scrollViewStartPositionY;
CGFloat offsetDistance = self.tableView.frame.origin.y - _scrollViewStartPositionY;
if (offsetDistance > 0 && offsetDistance < offsetLimitDistance) {
CGFloat topViewHeight = [FJFTopContainerView viewHeight];
CGFloat topViewHeightOffset = offsetDistance * (topViewHeight / offsetLimitDistance);
CGFloat viewAlpha = offsetDistance / offsetLimitDistance;
_topContainerView.y = topViewHeightOffset - topViewHeight;
_topContainerView.alpha = viewAlpha;
}
}
}
3.滑動(dòng)速度處理括细，依據(jù)velocityInView函數(shù)獲取速度值伪很，然后依據(jù)當(dāng)前速度值大小和正負(fù)和設(shè)定的速度值比較來判斷是否需要向上或向下移動(dòng)。
// 滑動(dòng)速度處理
CGPoint velocity = [sender velocityInView:self.view];
CGFloat speed = 350;
if (velocity.y < - speed) {
// 快速向上
[self tableViewMoveToTop];
return;
} else if (velocity.y > speed) {
// 快速向下
[self tableViewMoveToBottom];
return;
}
4.滑動(dòng)臨界值處理勒极，判斷最后滑動(dòng)位置與底部指定位置一半是掰，兩個(gè)值的大小來判斷滑動(dòng)的方向。
// 滑動(dòng)臨界值
CGFloat criticalValue = _scrollViewLimitMaxY/2.0;
if (sender.view.frame.origin.y <= criticalValue) {
[self tableViewMoveToTop];
} else {
[self tableViewMoveToBottom];
}
三.總結(jié)
這里最主要就是介紹了分析的思路辱匿，來找出可靠的實(shí)現(xiàn)方法键痛，具體邏輯，詳見demo
