1. 简介

“甩出”效果是当我们快速拖动container并松开后,container继续朝原方向运动,但是渐渐减速直到停止的效果。

ScrollView的onTouchEnded方法会设置Timer,间隔0、延迟0、无限次数,回调函数是deaccelerateScrolling方法。说明触摸结束时,当该方法不被unschedule时将每帧执行一次。

2. setContentSize

先看一个和“甩出”有关的方法setContentSize:

ScrollView的setContentSize重写了Node的方法,设置的是container的尺寸。

注意,还调用了updateInset方法,执行:

  _maxInset = this->maxContainerOffset();
  _maxInset.set(_maxInset.x + _viewSize.width * INSET_RATIO, _maxInset.y + _viewSize.height * INSET_RATIO);
  _minInset = this->minContainerOffset();
  _minInset.set(_minInset.x - _viewSize.width * INSET_RATIO, _minInset.y - _viewSize.height * INSET_RATIO);

设置了_maxInset:maxContainerOffset的值加部分可视范围。_minInset:minContainerOffset减部分可视范围。

INSET_RATIO为0.2,可以自行修改。

_maxInset和_minInset相当于扩大了偏移范围,并且只在有回弹效果时才有用处。

3. deaccelerateScrolling

情况一:开启回弹,不执行setContentSize

deaccelerateScrolling方法中会判断ScrollView是否设置了回弹效果。

我们先看有回弹的情况,如果不对ScrollView执行setContentSize,这样的话maxInset和minInset均为0。

    if (_bounceable) //有回弹则true
{
maxInset = _maxInset;
minInset = _minInset;
}

接下来设置container位置,代码不再粘贴。

然后,该if语句第二第三个条件永远满足,那么将会执行unschedule,说明了deaccelerateScrolling将会只执行这一次。之后,当container此时超出范围时,再通过relocateContainer方法设置回弹效果,不再赘述。

if (
  (fabsf(_scrollDistance.x) <= SCROLL_DEACCEL_DIST && fabsf(_scrollDistance.y) <= SCROLL_DEACCEL_DIST) ||
  ((_direction == Direction::BOTH || _direction == Direction::VERTICAL) && (newY >= maxInset.y || newY <= minInset.y)) ||
  ((_direction == Direction::BOTH || _direction == Direction::HORIZONTAL) && (newX >= maxInset.x || newX <= minInset.x))
)
{
  this->unschedule(CC_SCHEDULE_SELECTOR(ScrollView::deaccelerateScrolling));
  this->relocateContainer(true);
}

因为deaccelerateScrolling仅执行一次,仅在设置一次container的位置,所以没有“甩出”效果。

情况二:没有回弹

当没有回弹时,maxInset和minInset被设置成container偏移范围的界限。

if (_bounceable) //false
{
//...
}
else
{
maxInset = this->maxContainerOffset();
minInset = this->minContainerOffset();
}

那么,如果拖动在范围之内,接下来if判断的3个条件中后两个将为false,我们看第一个条件:

  (fabsf(_scrollDistance.x) <= SCROLL_DEACCEL_DIST && fabsf(_scrollDistance.y) <= SCROLL_DEACCEL_DIST)

_scrollDistance在if之前执行了:

  _scrollDistance = _scrollDistance * SCROLL_DEACCEL_RATE;

SCROLL_DEACCEL_DIST是一个界限,当_scrollDistance绝对值小于它时,使得if第一个条件满足,执行unschedule,deaccelerateScrolling将不会在下一帧执行。

onTouchMoved结束时保存了_scrollDistance,该向量是两次Moved之差。在触摸结束后,每帧执行deaccelerateScrolling时,_scrollDistance都会乘以小于0的系数SCROLL_DEACCEL_RATE,使得_scrollDistance渐渐变小。

并且,每次deaccelerateScrolling方法开始会根据当前_scrollDistance设置container的新位置:

  _container->setPosition(_container->getPosition() + _scrollDistance);

到这里,显而易见,虽然触摸结束了,但是deaccelerateScrolling将会在触摸结束后每帧执行,设置container的新位置,而每帧位置的增长都渐渐变小,实现了“甩动甩出”的效果。

当_scrollDistance小于界限值时,将会unschedule销毁Timer,deaccelerateScrolling不会在下一阵执行,我们看到的“甩出”效果就结束了。

还有一个问题,在无回弹情况下,如果“甩出”时container到了边界是如何处理的?

看deaccelerateScrolling部分代码:

    _container->setPosition(_container->getPosition() + _scrollDistance); //假设此时设置位置后越界

    if (_bounceable) //false
{
//...
}
else
{
maxInset = this->maxContainerOffset();
minInset = this->minContainerOffset();
} newX = _container->getPosition().x;
newY = _container->getPosition().y; _scrollDistance = _scrollDistance * SCROLL_DEACCEL_RATE;
this->setContentOffset(Vec2(newX,newY)); //看

container在setPosition后又用setContentOffset方法设置了一次位置。

看setContentOffset部分代码:

        if (!_bounceable)
{
const Vec2 minOffset = this->minContainerOffset();
const Vec2 maxOffset = this->maxContainerOffset(); offset.x = MAX(minOffset.x, MIN(maxOffset.x, offset.x));
offset.y = MAX(minOffset.y, MIN(maxOffset.y, offset.y));
} _container->setPosition(offset); if (_delegate != nullptr)
{
_delegate->scrollViewDidScroll(this);
}

当没有越界时,确实是执行了两次参数一样的setPosition。

而越界时,位置会被修正为边界位置setPosition。

同时,因为修正前的坐标已经越界,deaccelerateScrolling方法最后会触发unschedule,“甩出”效果终止。

情况三:开启回弹,执行setContentSize

因为执行了setContentSize,maxInset和minInset不是0,而是比maxContainerOffset()和minContainerOffset()计算的值扩大了部分可视范围。

本情况中偏移范围扩大了,是为了当container“甩出”时,允许在一定程度内超出maxContainerOffset()和minContainerOffset()范围。当“甩出”过了一定程度,会触发if三条件中的越界条件,从而执行unschedule,再执行relocateContainer设置回弹效果。

4. 总结

onTouchEnded设置了一个在触摸结束后每帧执行的Timer。

当有“甩出”效果时,对“甩出”时每帧之间container的距离间隔设为比上一帧缩小,实现了每帧移动的距离慢慢减小,直到到达临界点停止。

当没有“甩出”效果时,deaccelerateScrolling仅执行一次,设置一次container的位置。

‎Cocos2d-x 学习笔记(21.1) ScrollView “甩出”效果与 deaccelerateScrolling 方法的更多相关文章

  1. Ext.Net学习笔记21:Ext.Net FormPanel 字段验证(validation)

    Ext.Net学习笔记21:Ext.Net FormPanel 字段验证(validation) 作为表单,字段验证当然是不能少的,今天我们来一起看看Ext.Net FormPanel的字段验证功能. ...

  2. SQL反模式学习笔记21 SQL注入

    目标:编写SQL动态查询,防止SQL注入 通常所说的“SQL动态查询”是指将程序中的变量和基本SQL语句拼接成一个完整的查询语句. 反模式:将未经验证的输入作为代码执行 当向SQL查询的字符串中插入别 ...

  3. GIS案例学习笔记-ArcGIS整图大图出图实例教程

    GIS案例学习笔记-ArcGIS整图大图出图实例教程 联系方式:谢老师,135-4855-4328,xiexiaokui#qq.com 1. 通过出图比例尺(1:2000),地图范围测算图纸大小. 图 ...

  4. C#数字图像处理算法学习笔记(一)--C#图像处理的3中方法

    C#数字图像处理算法学习笔记(一)--C#图像处理的3中方法 Bitmap类:此类封装了GDI+中的一个位图,次位图有图形图像及其属性的像素数据组成.因此此类是用于处理像素数据定义的图形的对象.该类的 ...

  5. ‎Cocos2d-x 学习笔记(21) ScrollView (CCScrollView)

    1. 简介 CCScrollView.cpp文件内的滚动视图ScrollView直接继承了Layer+ActionTweenDelegate. 滚动视图能在屏幕区域内,用户通过触摸拖动屏幕,实现大于屏 ...

  6. ArcGIS API for JavaScript 4.2学习笔记[21] 对3D场景上的3D要素进行点击查询【Query类学习】

    有人问我怎么这个系列没有写自己做的东西呢? 大哥大姐,这是"学习笔记"啊!当然主要以解读和笔记为主咯. 也有人找我要实例代码(不是示例),我表示AJS尚未成熟,现在数据编辑功能才简 ...

  7. [原创]java WEB学习笔记21:MVC案例完整实践(part 2)---DAO层设计

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  8. JNI学习笔记_Java调用C —— 非Android中使用的方法

    一.学习笔记 1.java源码中的JNI函数本机方法声明必须使用native修饰. 2.相对反编译 Java 的 class 字节码文件来说,反汇编.so动态库来分析程序的逻辑要复杂得多,为了应用的安 ...

  9. Dynamic CRM 2013学习笔记(十七)JS读写各种类型字段方法及技巧

    我们经常要对表单里各种类型的字段进行读取或赋值,下面列出各种类型的读写方法及注意事项: 1. lookup 类型 清空值 var state = Xrm.Page.getAttribute(" ...

随机推荐

  1. 基于redis(订阅发布)实现python和java进程间通信

    主要结构为: python进程发布消息,java进程订阅消息. 依赖环境: python:   pip install redis java:  jedis 1. python端: PubSub.py ...

  2. Hadoop学习笔记之HBase Shell语法练习

    Hadoop学习笔记之HBase Shell语法练习 作者:hugengyong 下面我们看看HBase Shell的一些基本操作命令,我列出了几个常用的HBase Shell命令,如下: 名称 命令 ...

  3. java动态代理之CGLIB实现

    动态代理(CGlib 与连接池的案例) Cglib代理: 针对类来实现代理,对指定目标 产生一个子类 通过方法拦截技术拦截所有父类方法的调用. 我们要使用cglib代理必须引入 cglib的jar包 ...

  4. Flink cep的初步使用

    一.CEP是什么 在应用系统中,总会发生这样或那样的事件,有些事件是用户触发的,有些事件是系统触发的,有些可能是第三方触发的,但它们都可以被看做系统中可观察的状态改变,例如用户登陆应用失败.用户下了一 ...

  5. ASP.NET Core 3.0 使用gRPC

    一.简介 gRPC 是一个由Google开源的,跨语言的,高性能的远程过程调用(RPC)框架. gRPC使客户端和服务端应用程序可以透明地进行通信,并简化了连接系统的构建.它使用HTTP/2作为通信协 ...

  6. Docker学习之docker常用命令

    docker ps -a 表示所有容器 docker pull 获取image docker build 创建image docker run 运行container docker images 列出 ...

  7. [C++] C++中的常用库

    转载自:C++常用库 C++ 资源大全 关于 C++ 框架.库和资源的一些汇总列表,内容包括:标准库.Web应用框架.人工智能.数据库.图片处理.机器学习.日志.代码分析等. 标准库 C++标准库,包 ...

  8. JAVA设计模式-单例模式(Singleton)线程安全与效率

    一,前言 单例模式详细大家都已经非常熟悉了,在文章单例模式的八种写法比较中,对单例模式的概念以及使用场景都做了很不错的说明.请在阅读本文之前,阅读一下这篇文章,因为本文就是按照这篇文章中的八种单例模式 ...

  9. linux虚拟化简介

    为跨平台而生 在计算机发展的早期,各类计算平台.计算设备所提供的接口.调用方式纷繁复杂,没有像今天这样相对统一的标准.由于需要适配不同的平台,需要写很多繁琐的兼容代码,这无形中给开发者带来了很大的不便 ...

  10. 开源流媒体Red5-编译和部署

    源码下载地址:https://github.com/Red5/red5-server 使用工具:IntelliJ IDEA 下载源码后直接用IDEA打开,等待全部加载完成后 编译看是否报错,应该没什么 ...