仿高德路線規劃滑動效果

因為項目有個界面要模仿高德地圖路徑規劃滑動效果,因此寫了demo,并簡單說下分析過程。

高德地圖效果演示:

仿高德路線規劃滑動.gif

demo效果演示:

高德地圖規劃滑動.gif

Demo地址:https://github.com/fangjinfeng/MySampleCode/tree/master/FJFBlogProjectDemo

一. 分析

  • 首先,我們可以看出這個滾動的視圖應該是UIScrollView或者UIScrollView的子類(比如:UITableView);

  • 其次,從高德地圖里的視圖一開始的滑動,可以看出這個滑動是平穩的滑動,沒有加速和減速,因此這里不可能是UIScrollView的滾動效果,因為UIScrollView的滾動效果是由一個加減速的過程,因此一開始滑動,應該是通過滑動手勢UIPanGestureRecognizer,來移動UIScrollViewy值來移動

  • 接著滑動到指定位置之后,UIScrollViewy值固定不動,然后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];
        }
    }
}

這里幾個點需要注意:

  1. _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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,198評論 4 61
  • 廢話不多說,直接上干貨 ---------------------------------------------...
    小小趙紙農閱讀 3,416評論 0 15
  • 中秋佳節與宏良兄同游姑蘇平江路。 評彈繡女弄琵琶,擺櫓船娘唱盛華。 兩岸霓虹明似晝,游人接踵不思家。 下平:六麻 ...
    詩呆閱讀 1,570評論 20 51
  • 時間滴答的飛快的轉動 離墳墓越來更近 離自己卻越來越遠 越來越討厭速成和功利性的成功學 那是一碗經過精心包裝的有毒...
    小李非刀閱讀 319評論 0 0
  • 首先,介紹下大背景~ 我是2018屆考上體體育管理專碩的學生,本科呢是雙非二本并且至少前5年學院沒有考上過上體的師...
    關爾曰閱讀 4,720評論 0 6