因為項目有個界面要模仿高德地圖路徑規劃滑動
效果,因此寫了demo
,并簡單說下分析過程。
高德地圖效果演示:
demo效果演示:
Demo地址:https://github.com/fangjinfeng/MySampleCode/tree/master/FJFBlogProjectDemo
一. 分析
首先,我們可以看出這個滾動的視圖應該是
UIScrollView
或者UIScrollView的子類(比如:UITableView)
;其次,從高德地圖里的視圖一開始的滑動,可以看出這個滑動是平穩的滑動,沒有加速和減速,因此這里不可能是
UIScrollView
的滾動效果,因為UIScrollView
的滾動效果是由一個加減速的過程,因此一開始滑動,應該是通過滑動手勢UIPanGestureRecognizer
,來移動UIScrollView
的y值
來移動接著滑動到指定位置之后,
UIScrollView
的y
值固定不動,然后UIScrollView
的內容進行滾動。這里就涉及到滑動手勢UIPanGestureRecognizer
的滑動,還有UIScrollView
內部的滾動的處理。高德地圖的演示效果里面,一開始滑動視圖向上移動,移動到指定的點之后,立馬就變成視圖的滾動,這里可以分析,UIScrollView
既支持手勢的滑動
又支持視圖的滾動
,只是通過條件來判斷限制兩者的執行邏輯。同時我們可以看到,如果一開始
向上拉動
視圖力度大一點,視圖會直接滾動到指定位置,如果力度小,就恢復
到原來位置,因此這里需要依據手勢滑動的加速度
來進行判斷處理。而當你滑動到
中間位置
的時候,也需要依據最后滑動的位置
來判斷應該動畫滾動到上方還是下方。最后滑動的時候上方的視圖和滑動視圖本身有背景顏色的
漸變效果
,這里需要依據滑動距離
來判斷。
二.代碼分析:
- 首先由于滾動視圖(
demo
里面是UITableView
)需要支持手勢滑動和內部滾動,因此需要寫一個類FJBaseTableView
繼承自UITableView
,然后在FJBaseTableView
的實現里面重寫如下方法:
// 當有 多個手勢 都可以 響應
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer {
return YES;
}
來支持響應多個手勢。
- 然后給
滾動視圖tableView
添加滑動手勢,當tableView
從底部滑動到頂部指定位置時,應該限制tableView
內部的視圖滾動。
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
if (self.tableView.frame.origin.y > _scrollViewStartPositionY) {
[scrollView setContentOffset:CGPointMake(0, 0)];
}
}
這里的_scrollViewStartPositionY
是頂部指定位置。
- 接著看下
手勢滑動
的處理邏輯:
#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;
}
// 滑動速度處理
CGPoint velocity = [sender velocityInView:self.view];
CGFloat speed = 350;
if (velocity.y < - speed) {
// 快速向上
[self tableViewMoveToTop];
return;
} else if (velocity.y > speed) {
// 快速向下
[self tableViewMoveToBottom];
return;
}
// 滑動臨界值
CGFloat criticalValue = _scrollViewLimitMaxY/2.0;
if (sender.view.frame.origin.y <= criticalValue) {
[self tableViewMoveToTop];
} else {
[self tableViewMoveToBottom];
}
}
}
這里幾個點需要注意:
-
_beganPoint、_curPoint
兩個參數是用來計算手勢滑動
距離然后調整scrollView
的滑動距離
。而_previousOffsetY
是用來記錄滑動之前tableView
的內部視圖的偏移距離,因為當tableView
滑動到頂部指定位置后,tableView
開始滾動,這時候tableView
向下滑動是先移動了tableView
內部的滾動距離,然后才是滑動距離
,因此需要將這部分值先記錄,然后去除掉,才是tableView
向下真正需要滑動的距離。
CGFloat offsetY = _previousOffsetY - self.tableView.contentOffset.y;
NSInteger y_offset = point.y - _beganPoint.y - offsetY;
2.滑動過程中,頂部視圖的移動和漸變處理,這里先依據滑動的距離算出tableView滑動距離
與tableView最大滑動距離
的比值
,然后再算出頂部視圖
需要移動的距離
和背景的透明度
。
- (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.滑動速度處理,依據velocityInView
函數獲取速度值
,然后依據當前速度值大小
和正負
和設定的速度值
比較來判斷是否需要向上或向下移動
。
// 滑動速度處理
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.滑動臨界值處理,判斷最后滑動位置與底部指定位置一半,兩個值的大小來判斷滑動的方向。
// 滑動臨界值
CGFloat criticalValue = _scrollViewLimitMaxY/2.0;
if (sender.view.frame.origin.y <= criticalValue) {
[self tableViewMoveToTop];
} else {
[self tableViewMoveToBottom];
}
三.總結
這里最主要就是介紹了分析的思路,來找出可靠的實現方法,具體邏輯,詳見demo