CCScrollView的滑动体验

最近在研究cocos2dx,由于项目中要用到内容滚动效果(内容超出容器,可以通过滑动屏幕滚动来查看),所以就毫不犹豫的选择了CCScrollView组件。

使用中发现CCScrollView的体验不佳:理论上应该是当鼠标滑动离开时,由于惯性效果,内容应该继续向前滑动一段距离。但是CCScrollView却是鼠标离开后,内容就立即停止了,并没有继续向前滑动。

通过网络搜索发现,有人说可以用CCTableView替换CCScrollView,因为CCTableView具有惯性滑动的效果。实验中发现确实是这样。

但是仅仅是为了实现滑动而采用CCTableView,感觉是浪费了。

于是我仔细对比了下CCTableView和CCScrollView的代码,发现这种惯性滑动效果其实是在CCScrollView中实现的,也就是说CCScrollView具备惯性滑动的功能。

具体实现方法是:当你使用CCScrollView的时候调用一下CCScrollView的updateInset();这个方法即可。

可以在HelloWorldScene.cpp的init函数里面添加下面的代码,测试惯性滑动效果。

CCScrollView* scrollView = CCScrollView::create();
this->addChild(scrollView);
scrollView->setPosition(ccp(50, 50));
scrollView->setDirection(kCCScrollViewDirectionVertical);
CCSprite * sp = CCSprite::create("HelloWorld.png");
sp->setAnchorPoint(ccp(0, 0));
scrollView->setContainer(sp);
scrollView->updateInset();

当然个人感觉滑动效果还是不太完美:比如当滑动到底部时应该有阻尼效果,像IOS那样的。

我看了下cocos2d-x-3.2里面的ScrollView是具备阻尼效果的。于是对比了两个文件的代码,找到了一下地方。

在 void ScrollView::onTouchMoved(Touch* touch, Event* event) 函数里面有如下内容:

float dis = 0.0f;
if (_direction == Direction::VERTICAL)
{
    dis = moveDistance.y;
    float pos = _container->getPosition().y;
    if (!(minContainerOffset().y <= pos && pos <= maxContainerOffset().y)) {
        moveDistance.y *= BOUNCE_BACK_FACTOR;
    }

}
else if (_direction == Direction::HORIZONTAL)
{
    dis = moveDistance.x;
    float pos = _container->getPosition().x;
    if (!(minContainerOffset().x <= pos && pos <= maxContainerOffset().x)) {
        moveDistance.x *= BOUNCE_BACK_FACTOR;
    }

}
else
{
    dis = sqrtf(moveDistance.x*moveDistance.x + moveDistance.y*moveDistance.y);
   
    float pos = _container->getPosition().y;
    if (!(minContainerOffset().y <= pos && pos <= maxContainerOffset().y)) {
        moveDistance.y *= BOUNCE_BACK_FACTOR;
    }
   
    pos = _container->getPosition().x;
    if (!(minContainerOffset().x <= pos && pos <= maxContainerOffset().x)) {
        moveDistance.x *= BOUNCE_BACK_FACTOR;
    }

}

上面的粗体加斜体部分是实现阻尼效果的。BOUNCE_BACK_FACTOR是个宏在文件里有定义:#define BOUNCE_BACK_FACTOR   0.35f

改下CCScrollView对应的函数,就可以实现阻尼效果了。(用cocos2dx 3版本开发的人就不需要改了)

来自为知笔记(Wiz)

CCScrollView的滑动体验

时间: 2024-10-11 16:52:49

CCScrollView的滑动体验的相关文章

提升html5的性能体验系列之二列表流畅滑动

App的顶部一般有titlebar,下面是list.常见的一个需求是要在list滚动时,titlebar不动.这个简单的需求,实现起来其实并不简单. 在普通web上的做法是使用div的滚动条,把list放到div里.但是很不幸的是,div滚动条在Android4.4以下的手机上非常非常卡,滚动完全无法商用. 还有一种做法是把titlebar使用fix来固顶.但此时手机浏览器的滚动条会通到顶部,当titlebar的右侧出现滚动条时,看起来非常怪异.还有一个副作用是滚动太快时,titlebar的di

MUI体验框架

1.      mui简介 1.1  缘起 mui框架在2014.05立项,2014.08在iweb峰会上发布,我们不是闲着没事,重复制造轮子,只是实在没有适合mobile开发的前端框架: 1.基于jq的jqmobile,性能低的无法忍受,且UI难看 2.bootstrap这种响应式设计,性能在低端机不足,而且UI风格一看就是网页,不是App的感觉. 3.framework7当时只能在iPhone上运行也无法被接受. 4.基于angular的ionic,把pc端很重的东西引入到移动App中,且a

【热门APP用户体验分析】购物类APP之王——淘宝安卓版(二)

在上一篇的文章中,简单的介绍了一下淘宝客户端的首页的导航栏,还有一些小的细节问题,这一篇,我们还是继续剖析淘宝客户端安卓版. 我们首先还是先放出淘宝的主界面 在这个界面中,最上方是一个广告栏,可以点击进入对应的活动界面.广告栏可以手动的滑动,而且滑动体验非常好,在使用其他软件的时候,会发生左右广告栏的滑动和上下的刷新滑动出现冲突的情况,表现出来就是界面一直在颤动,但是淘宝的广告栏做的非常好,只要在广告栏的区域滑动,触摸焦点就会被锁定,不会发生手势冲突的情况,淘宝的开发者应该是重写了控件的触摸事件

开源项目:滑动广告栏

最近在开发一款android APP,项目中采用了推送广告的方案,即在手机屏幕上方空出一块区域,加载来自服务器的广告图片,形成banner广告的效果. 开发过程中,百度出了好多种解决方案,其中以ViewPager的方案和重写Gallery的方案居多,学生党的我比较倾向于后者.在编写定制Gallery的过程中参考了ZAKER 5.0.4源代码中的ScrollGallery类(反编译得到的),优化了Gallery向两边滑动到头自动跳转的问题,详细的代码如下: 1 package org.warnie

自定义控件(视图)2期笔记12:View的滑动冲突之 外部拦截法

1. 外部拦截法: 点击事件通过父容器拦截处理,如果父容器需要就拦截,不需要就不拦截. 2. 下面通过一个Demo示例说明: (1)首先我们创建一个Android工程,如下: (2)我们来到activity_main.xml,如下: 1 <com.himi.viewconflict.ui.RevealLayout 2 xmlns:android="http://schemas.android.com/apk/res/android" 3 xmlns:tools="htt

JRoll 2 使用文档(史上最强大的下拉刷新,滚动,无限加载插件)

概述 说明 JRoll,一款能滚起上万条数据,具有滑动加速.回弹.缩放.滚动条.滑动事件等功能,兼容CommonJS/AMD/CMD模块规范,开源,免费的轻量级html5滚动插件. JRoll第二版是在JRoll第一版基础上重写JRoll滑动算法,基于时间运动,解决帧频降低时滑动缓慢的问题,更改垂直水平方向判断方法,使捕获垂直水平方向更准确灵敏. JRoll第二版增减了一些api不完全兼容JRoll第一版. 先睹为快 http://www.chjtx.com/JRoll/demos/ 运行示例

Android艺术开发探索第三章————View的事件体系(下)

Android艺术开发探索第三章----View的事件体系(下) 在这里就能学习到很多,主要还是对View的事件分发做一个体系的了解 一.View的事件分发 上篇大致的说了一下View的基础知识和滑动,现在我们再来聊聊一个比较核心的知识点,那就是事件分发了,而且他还是一个难点,我们更加应该掌握,View的滑动冲突一直都是很苦恼的,这里,我们就来一起探索一下 1.点击事件的传递规则 我们分析的点击事件可不是View.OnClickListener,而是我们MotionEvent,即点击事件,关于M

优化UITableViewCell高度计算的那些事

本文转载至 http://blog.sunnyxx.com/2015/05/17/cell-height-calculation/ 我是前言 这篇文章是我和我们团队最近对 UITableViewCell 利用 AutoLayout 自动高度计算和 UITableView 滑动优化的一个总结.我们也在维护一个开源的扩展,UITableView+FDTemplateLayoutCell,让高度计算这个事情变的前所未有的简单,也受到了很多星星的支持,github链接请戳我 这篇总结你可以读到: UIT

AngularJS--不能回避的4个问题

AngularJS是一个很容易让人上瘾且深陷其中的JS框架,它的MVC特性大大减少的Web开发难度,提高代码后期的维护性.学会了这个框架,有时候甚至开发个最简单的静态页,你也会情不自禁问问自己,可以用Angular吗? 但事物都是有双面性的,简单说说那些AngularJS开发的. 一.体积庞大 AngularJS,核心模块加上route.cookies两个核心模块,压缩后min版本的体积大约120k,如果算上HTTP GZIP传输压缩的话,体积能缩减到60~70k左右那AngularJS的JS库