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,一经查实,立即删除!

相关文章

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

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

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

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

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

前言 由于 Ehcache 存在于单个 java 程序的进程中&#xff0c;无法满足多个程序分布式的情况&#xff0c;需要将多个服务器的缓存集中起来进行管理&#xff0c;需要一个缓存的寄存器&#xff0c;这里使用的是 Redis。 正文 当应用程序要去缓存中读取数据&#xff0c;但是缓存…

学习Spring Boot:(二十七)Spring Boot 2.0 中使用 Actuator

前言 主要是完成微服务的监控&#xff0c;完成监控治理。可以查看微服务间的数据处理和调用&#xff0c;当它们之间出现了异常&#xff0c;就可以快速定位到出现问题的地方。 springboot - version: 2.0 正文 依赖 maven 项目 在 pom.xml 文件中加入 actuator 的依赖&…

php实现注销功能,laravel 实现用户登录注销并限制功能

在项目根目录输入&#xff1a; php artisan make:controller Admin/LoginControllerphp artisan make:model Model/Admin -m运行之后 项目中会新增两个PHP文件新创建了admins用户表&#xff0c;此用户表默认新建中只有主键&#xff0c;创建时间&#xff0c;编辑时间。我们接下来…

将ipynb文件转为py的简单方法(图文并茂)

打开可以使用jupyter命令的命令窗口&#xff08;如果没有jupyter则需要先安装jupyter&#xff09;&#xff0c;cd 命令进入到 ipynb 文件所在的文件夹&#xff0c;执行 jupyter nbconvert --to script xxx.ipynb 即可完成 ipynb 文件到 py 文件的转化&#xff0c;执行 jupyter …

学习Spring Boot:(二十八)Spring Security 权限认证

前言 主要实现 Spring Security 的安全认证&#xff0c;结合 RESTful API 的风格&#xff0c;使用无状态的环境。 主要实现是通过请求的 URL &#xff0c;通过过滤器来做不同的授权策略操作&#xff0c;为该请求提供某个认证的方法&#xff0c;然后进行认证&#xff0c;授权成…

Linux 目录所属组设置,Linux系统用户与组管理命令及配置文件总结

一、Linux系统用户及组分类1、用户类别Linux系统中的用户大致可分为三类&#xff1a;root用户、系统用户、普通用户。每一个用户都拥有一个唯一的身份标识UID。2、组分类与用户信息对应的&#xff0c;Linux系统中的组也可分为三类&#xff1a;root组、系统组、普通组。每一个组…

实验楼 linux内核原理与分析,《Linux内核原理与分析》第一周作业 20189210

实验一 Linux系统简介这一节主要学习了Linux的历史&#xff0c;Linux有关的重要人物以及学习Linux的方法&#xff0c;Linux和Windows的区别。其中学到了LInux中的应用程序大都为开源自由的软件&#xff0c;用户可以修改定制再发布&#xff1b;内核是实现多任务运行和硬件管理的…

MySQL的INSERT INTO··· ON DUPLICATE KEY UPDATE使用的几种情况

保存或更新 在MySQL数据库中&#xff0c;如果在insert语句后面带上ON DUPLICATE KEY UPDATE 子句&#xff0c;而要插入的行与表中现有记录的惟一索引或主键中产生重复值&#xff0c;那么就会发生旧行的更新&#xff1b;如果插入的行数据与现有表中记录的唯一索引或者主键不重复…

java8 Stream API详解

文章目录一、Stream流概述二、创建Stream的方式相关API三、Stream的中间操作筛选与切片映射排序四、终止操作第一大类API&#xff08;太过简单&#xff09;第二大类AP归约收集一、Stream流概述 1、java8中有两大最为重要的改变&#xff0c;第一就是Lambda表达式&#xff0c;另…

linux实验3编写内核模块,实验2.3_内核模块_实验报告

实验报告题目: 内核模块实验1、实验目的模块是Linux系统的一种特有机制&#xff0c;可用以动态扩展操作系统内核功能。编写实现某些特定功能的模块&#xff0c;将其作为内核的一部分在管态下运行。本实验通过内核模块编程在/porc文件系统中实现系统时钟的读操作接口。2、实验内…

Java 8 Stream Api 中的 peek、map、foreach区别

#1. 前言 我在Java8 Stream中讲述了 Java 8 Stream API 的一些内容。今天再看一下peek、map、foreach区别。 2. peek peek 操作接收的是一个 Consumer 函数。顾名思义 peek 操作会按照 Consumer 函数提供的逻辑去消费流中的每一个元素&#xff0c;同时有可能改变元素内部的一…

wapper打成linux服务,Wrapper配置详解及高级应用(转)

转自&#xff1a;http://286.iteye.com/blog/1921414将一个简单的程度如HelloWorld 的应用包装秤Wrapper 服务并不复杂&#xff0c;甚至可以认为非常简单。但是实际项目应用过程中我们的程序一般较庞大&#xff0c;运行环境也较复杂。通过Wrapper 配置文件的分析与配置进一步了…

Java8 Stream 流机制和 Lambda 表达式

一、Stream 流介绍与使用场景 Stream 流介绍 java8 中的stream 与InputStream和OutputStream是完全不同的概念, stream 是用于对集合迭代器的增强&#xff0c;使之完成能够完成更高效的聚合操作&#xff08;过滤、排序、统计分组&#xff09;或者大批量数据操作。stream 与 L…

linux guide编译器,GUIDE编译器-GUIDE编程工具-GUIDE编译器下载 v1.0.2官方版-完美下载...

GUIDE编译器是款跨平台的开发环境编程工具&#xff0c;支持C/C 和 Pascal三种语言&#xff0c;具有跨平台、操作简单、跨编程语言和单文件编译调试等特点&#xff0c;为用户提供单文件编译、调试和运行的环境。GUIDE编译器特色1、跨平台&#xff1a; GUIDE 可在 linux 平台和 w…

MySQL事务隔离级别和实现原理

经常提到数据库的事务&#xff0c;那你知道数据库还有事务隔离的说法吗&#xff0c;事务隔离还有隔离级别&#xff0c;那什么是事务隔离&#xff0c;隔离级别又是什么呢&#xff1f;本文就帮大家梳理一下。 MySQL 事务 本文所说的 MySQL 事务都是指在 InnoDB 引擎下&#xff0…

超级全面的MySQL优化面试解析

推荐阅读(点击即可跳转阅读) 1. SpringBoot内容聚合 2. 面试题内容聚合 3. 设计模式内容聚合 4. Mybatis内容聚合 5. 多线程内容聚合 超级全面的MySQL优化面试解析 本文概要 概述 为什么要优化 系统的吞吐量瓶颈往往出现在数据库的访问速度上随着应用程序的运行&#…

mysql linux导入csv主键,MySQL导入csv文件内容到Table及数据库的自增主键设置

写在前面目的是测试将csv文件内容导入到表中, 同时记录一下自增主键的设置.测试采用MySQL8.0.新建表customer_info如下, 未设置主键.修改上表, 添加主键id, 并设置为自增.ALTER TABLE customer_info ADD COLUMN id INT AUTO_INCREMENT NOT NULL PRIMARY KEY;导入步骤1.为了模拟…

mysql 优化方法有哪些?

MySQL索引 MySQL支持诸多存储引擎&#xff0c;而各种存储引擎对索引的支持也各不相同&#xff0c;因此MySQL数据库支持多种索引类型&#xff0c;如BTree索引&#xff0c;哈希索引&#xff0c;全文索引等等。为了避免混乱&#xff0c;本文将只关注于BTree索引&#xff0c;因为这…