首页 > 代码库 > CCScrollView的滑动体验

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(TouchtouchEventevent) 函数里面有如下内容:
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)