php 仿高德,仿高德路线规划滑动效果
因?yàn)轫?xiàng)目有個(gè)界面要模仿高德地圖路徑規(guī)劃滑動(dòng)效果，因此寫了demo，并簡(jiǎn)單說下分析過程。
高德地圖效果演示:
仿高德路線規(guī)劃滑動(dòng).gif
demo效果演示:
高德地圖規(guī)劃滑動(dòng).gif
一. 分析
首先，我們可以看出這個(gè)滾動(dòng)的視圖應(yīng)該是UIScrollView或者UIScrollView的子類(比如:UITableView);
其次，從高德地圖里的視圖一開始的滑動(dòng)，可以看出這個(gè)滑動(dòng)是平穩(wěn)的滑動(dòng)，沒有加速和減速，因此這里不可能是UIScrollView的滾動(dòng)效果，因?yàn)閁IScrollView的滾動(dòng)效果是由一個(gè)加減速的過程，因此一開始滑動(dòng)，應(yīng)該是通過滑動(dòng)手勢(shì)UIPanGestureRecognizer，來移動(dòng)UIScrollView的y值來移動(dòng)
接著滑動(dòng)到指定位置之后，UIScrollView的y值固定不動(dòng)，然后UIScrollView的內(nèi)容進(jìn)行滾動(dòng)。這里就涉及到滑動(dòng)手勢(shì)UIPanGestureRecognizer的滑動(dòng)，還有UIScrollView內(nèi)部的滾動(dòng)的處理。高德地圖的演示效果里面，一開始滑動(dòng)視圖向上移動(dòng)，移動(dòng)到指定的點(diǎn)之后，立馬就變成視圖的滾動(dòng)，這里可以分析，UIScrollView既支持手勢(shì)的滑動(dòng)又支持視圖的滾動(dòng)，只是通過條件來判斷限制兩者的執(zhí)行邏輯。
同時(shí)我們可以看到，如果一開始向上拉動(dòng)視圖力度大一點(diǎn)，視圖會(huì)直接滾動(dòng)到指定位置，如果力度小，就恢復(fù)到原來位置，因此這里需要依據(jù)手勢(shì)滑動(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)需要支持手勢(shì)滑動(dòng)和內(nèi)部滾動(dòng)，因此需要寫一個(gè)類FJBaseTableView繼承自UITableView，然后在FJBaseTableView的實(shí)現(xiàn)里面重寫如下方法：
// 當(dāng)有 多個(gè)手勢(shì) 都可以 響應(yīng)
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer {
return YES;
}
來支持響應(yīng)多個(gè)手勢(shì)。
然后給滾動(dòng)視圖tableView添加滑動(dòng)手勢(shì)，當(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是頂部指定位置。
接著看下手勢(shì)滑動(dòng)的處理邏輯:
#pragma mark - 手勢(shì)處理
- (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ì)算手勢(shì)滑動(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
總結(jié)
以上是生活随笔為你收集整理的php 仿高德,仿高德路线规划滑动效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： android分辨率 x y,Andro
- 下一篇： 三国志战略版鸿蒙梦魇,三国志战略版：双控