php 仿高德,仿高德路线规划滑动效果

因为项目有个界面要模仿高德地图路径规划滑动效果,因此写了demo,并简单说下分析过程。

高德地图效果演示:

14dd820393fa?utm_source=desktop&utm_medium=timeline

仿高德路线规划滑动.gif

demo效果演示:

14dd820393fa?utm_source=desktop&utm_medium=timeline

高德地图规划滑动.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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/556828.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

php验证码完整功能,PHP验证码功能的实现

/***产生验证码图片*/public function actionVerfiycode() {Header ( "Content-type: image/gif" );$border 0; //是否要边框 1要:0不要$how 4; //验证码位数$w $how * 15; //图片宽度$h 20; //图片高度$fontsize 5; //字体大小$alpha "abcdefghijkmnopqr…

学习Spring Boot:(十五)使用Lombok来优雅的编码

前言 Lombok 是一种 Java? 实用工具&#xff0c;可用来帮助开发人员消除 Java 的冗长&#xff0c;尤其是对于简单的 Java 对象&#xff08;POJO&#xff09;。它通过注解实现这一目的。 正文 添加依赖 在 pom.xml 文件中添加相关依赖&#xff1a; <lombok.version>1.…

java 品尝饮料,java细节经典题型

28. 选项中哪一行代码可以替换题目中//add code here 而不产生编译错误?() [java] view plaincopy 1. public abstract class MyClass { 2. 3. 4. 5.......Java 基础试题 一:选择题(1*3030) (题目写在答题纸上面) 1:Java 提供哪几种运算符多选 ( abcd )。 A)算术运算符 B)位运…

学习Spring Boot:(十六)使用Shiro与JWT 实现认证服务

前言 代码可以参考 需要把Web应用做成无状态的&#xff0c;即服务器端无状态&#xff0c;就是说服务器端不会存储像会话这种东西&#xff0c;而是每次请求时access_token进行资源访问。这里我们将使用 JWT 1&#xff0c;基于散列的消息认证码&#xff0c;使用一个密钥和一个消…

java泛型和注解,泛型 · 注解和泛型 · 看云

[TOC]# 泛型## 为什么要使用泛型在之前学过的集合框架中&#xff0c;List和Map都使用了泛型技术来确认其内容的数据类型。如果不使用泛型&#xff0c;在程序运行阶段&#xff0c;会带来数据类型转型的错误风险。~~~List list new ArrayList();list.add("tom");for (…

java程序单引号报错,javapoigetInpuStream报错br/是这样的, 爱问知识人

是这样的&#xff0c;我写了重载了两个getInputStream方法&#xff0c;当调用不带参数的方法时&#xff0c;运行正常&#xff0c;当调用带参的方法则报 Can not find a java.io.InputStream with the name [inputStream] in是这样的&#xff0c;我写了重载了两个getInputStream…

学习Spring Boot:(十七)Spring Boot 中使用 Redis

前言 Redis是一个由Salvatore Sanfilippo写的key-value存储系统。 edis是一个开源的使用ANSI C语言编写、遵守BSD协议、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库&#xff0c;并提供多种语言的API。 通常被称为数据结构服务器&#xff0c;因为值&#xff08;va…

jqueryd登录异步请求 java,ajaxd的js和jquery实现

先来看一下javascript的。var httpxml;httpxml new XMLHttpRequest();httpxml.onreadystatechangefunction(){ //当服务器响应就绪时执行函数(就是说服务器准备好了你可以发请求了)if(httpxml.status 200 && httpxml.readyState 4){//这里200和4代表响应的状态&…

学习Spring Boot:(十八)Spring Boot 中session共享

前言 前面我们将 Redis 集成到工程中来了&#xff0c;现在需要用它来做点实事了。这次为了解决分布式系统中的 session 共享的问题&#xff0c;将 session 托管到 Redis。 正文 引入依赖 除了上篇文章中引入 spring-boot-starter-data-redis&#xff0c;还需要 spring-sess…

matlab 码元扩展,扩频通信及matlab仿真

扩展频谱通信以及直接扩频的matlab仿真号无关)扩展频谱后成为宽频带信号&#xff0c;然后再进行传输的一种系统。待传输的基带信号就是信源发出的数字信号。特定的扩频函数通常选用各种伪随机序列(扩频码)&#xff0c;其码元传输速率远大于基带信号速率&#xff0c;因而和基带信…

学习Spring Boot:(十九)Shiro 中使用缓存

前言 在 shiro 中每次去拦截请求进行权限认证的时候&#xff0c;都会去数据库查询该用户的所有权限信息&#xff0c; 这个时候就是有一个问题了&#xff0c;因为用户的权限信息在短时间内是不可变的&#xff0c;每次查询出来的数据其实都是重复数据&#xff0c;没必要每次都去…

matlab安装无效距离过远,求助matlab的远程序

求助matlab的远程序function varargout a1(varargin)% A1 M-file for a1.fig% A1, by itself, creates a new A1 or raises the existing% singleton*.%% H A1 returns the handle to a new A1 or the handle to% the existing singleton*.%% A1(CALLBACK,hObject,eventData,…

学习Spring Boot:(二十)使用 MongoDB

前言 MongoDB&#xff08;来自于英文单词“Humongous”&#xff0c;中文含义为“庞大” &#xff09;是可以应用于各种规模的企业、各个行业以及各类应用程序的开源数据库。基于分布式文件存储的数据库。由C语言编写。旨在为WEB应用提供可扩展的高性能数据存储解决方案。MongoD…

php 事件调度,PHP单元测试调度事件

如何在函数调用期间测试事件是否被调度&#xff1f;public function updateUser() {//Do some update stuff$event new UserUpdated($user);$event->attach([new SendEmailAddressChangeEmail($emailAddress),new SendEmailAddressChangeEmail($oldEmailAddress),]);$event…

学习Spring Boot:(二十一)使用 EhCache 实现数据缓存

前言 当多次查询数据库影响到系统性能的时候&#xff0c;可以考虑使用缓存&#xff0c;来解决数据访问新能的问题。 SpringBoot 已经为我们提供了自动配置多个 CacheManager 的实现&#xff0c;只要去实现使用它就可以了。 一般的系统都是优先使用 EhCache&#xff0c;它工作…

php如何解决报错,php 启动报错如何解决_PHP教程

复制代码 代码如下:[rootabc lnmp]# service php-fpm startStarting php-fpm eAccelerator: Could not allocate 67108864 bytes, the maximum size the kernel allows is 33554432 bytes. Lower the amount of memory request or increase the limit in /proc/sys/kernel/shmm…

学习Spring Boot:(二十二)使用 AOP

前言 AOP&#xff0c;意为&#xff1a;面向切面编程&#xff0c;通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术。基于AOP实现的功能不会破坏原来程序逻辑&#xff0c;因此它可以很好的对业务逻辑的各个部分进行隔离&#xff0c;从而使得业务逻辑各部分之间的…

matlab怎么求hadamard,hadamard matlab

3、图像Hadamard变换 数字图像处理 ? Matlab没有提供图像Hadamard变换功能,不过 提供了求Hadamard变换矩阵的功能。例如使用 命令hadamard(8)能够得到下面[8 8]的......(A) 1.0000 命令 hadamard 矩阵 函数 hadamard 格式 H hadamard(n) 例 1-15 >> hhadamard(4) h 1 1…

学习Spring Boot:(二十三)Spring Boot 中使用 Docker

前言 简单的学习下怎么在 Spring Boot 中使用 Docker 进行构建&#xff0c;发布一个镜像&#xff0c;现在我们通过远程的 docker api 构建镜像&#xff0c;运行容器&#xff0c;发布镜像等操作。 这里只介绍两种方式&#xff1a; 远程命令 api &#xff08;需要知道 Docker …

nginx php大文件上传,Nginx+PHP上传大文件设置

nginx的修改send_timeout 60;fastcgi_connect_timeout 300;fastcgi_send_timeout 300;fastcgi_read_timeout 300;client_max_body_size 30m; 可以全局设置也可以每个网站单独设置php的修改upload_max_filesize 10Mpost_max_size 15M 该项应该要大于 upload_max_filesizemax_inp…