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

CCScrollView的滑动体验

2024-07-17 21:22:48   217人阅读

最近在研究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)


联系
我们