php 仿高德,仿高德路线规划滑动效果
因為項目有個界面要模仿高德地圖路徑規劃滑動效果，因此寫了demo，并簡單說下分析過程。
高德地圖效果演示:
仿高德路線規劃滑動.gif
demo效果演示:
高德地圖規劃滑動.gif
一. 分析
首先，我們可以看出這個滾動的視圖應該是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
總結
以上是生活随笔為你收集整理的php 仿高德,仿高德路线规划滑动效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： android分辨率 x y,Andro
- 下一篇： 在PHP中如何要json中的数据,如何在