上一篇文章中介绍了简单封装PageView 的基本实现。XKPageView基本实现了,PageView的功能,就可能用来实现上篇说的使用系统自带PageView实现不了的功能了。

同样地,我们先来看看使用效果图:

进阶使用XKPageView,主要用到了我们上篇说到的XKPageViewDelegate 的PageViewDidScroll函数,监听滚动事件。 滚动过程中计算金币缩放大小,还有透明度设置。然后新增加了这个回调函数

std::function adjustCallback

(学过iOS的同学就不能理解了,其实就是 block啦,这东西很好用哈。) adjustCallback的作用就是当PageView自动调整的时候执行的代码块,由于我们使用的是系统的setContentOffsetInDuration,所以很难再在里面同步执行动作了。所以就使用这种方法,效果还不错。

这里就贴一下,实现滑动和自动调整位置时改变大小和透明度的代码吧。

自动调节时的代码:

pageView -> adjustCallback = [](XKPageView *pageView){

FiniteTimeAction *fadeIn = FadeTo::create(0.15, 255);

FiniteTimeAction *fadeOut = FadeTo::create(0.15, 255 * 0.3);

FiniteTimeAction *scaleToBig = ScaleTo::create(0.15, 1.5f);

FiniteTimeAction *scaleToSmall = ScaleTo::create(0.15, 1.0f);

Spawn *spawnIn = Spawn::createWithTwoActions(fadeIn, scaleToBig);

Spawn *spawnOut = Spawn::createWithTwoActions(fadeOut, scaleToSmall);

int current = pageView -> getCurrentIndex();

auto sprite = (Sprite*) pageView -> getPageAtIndex(current);

sprite -> runAction(spawnIn);

sprite = (Sprite *)pageView -> getPageAtIndex(current – 1);

if (sprite !=NULL){

sprite -> runAction(spawnOut);

}

sprite = (Sprite *)pageView -> getPageAtIndex(current + 1);

if (sprite !=NULL){

sprite -> runAction(spawnOut -> clone());

}

};

滑动时代码:

void HelloWorld::pageViewDidScroll(XKPageView *pageView)

{

//监听滚动时间,可以再这里写滚动时候要添加的代码,比如缩放~

Size visibleSize = Director::getInstance() -> getVisibleSize();

float midX = visibleSize.width / 2;

float offsetX = pageView -> getContentOffset().x;

float tmp = COIN_WIDTH / 2.0f;

float scale = 1.5;

scale = scale – 1;

for (int i = 0; i < COIN_COUNT; i++) {

auto sprite = (Sprite *) pageView -> getPageAtIndex(i);

float positionX = sprite -> getPositionX();

//转换成相对屏幕坐标

float endX = positionX + offsetX + midX – tmp;

if (0 < endX && endX <= midX) {

//midX左边

float x = endX / midX * scale + 1;

sprite -> setScale(x);

x = (endX / midX * 0.7 + 0.3) * 255;

sprite -> setOpacity(x);

}else if(endX > midX && endX < visibleSize.width){

//midX右边

float tmp2 = endX - midX;

tmp2 = midX - tmp2;

float x = tmp2 / midX * scale + 1;

sprite -> setScale(x);

x = (tmp2 / midX * 0.7 + 0.3) * 255;

sprite -> setOpacity(x);

}else {

sprite -> setScale(1.0f);

sprite -> setOpacity(255 * 0.3);

}

}

}