Cocos2d-x封装进阶版Pageview（2）

在上一篇文章中，我们介绍了简单封装 PageView 的基本实现。XKPageView 已基本实现了 PageView 的功能，这使得我们能够实现上篇文章中提到的，使用系统自带 PageView 无法实现的功能。

同样地，我们先来看看使用效果图（此处原文未给出效果图，可后续补充）。

进阶使用 XKPageView

进阶使用 XKPageView 主要会用到我们上篇文章中提到的 XKPageViewDelegate 的 PageViewDidScroll 函数，通过该函数监听滚动事件。在滚动过程中，我们可以计算金币的缩放大小并设置透明度。此外，我们还新增了一个回调函数：

std::function<void(XKPageView*)> adjustCallback;

对于学过 iOS 的同学来说，这个 adjustCallback 其实就类似于 block，它非常实用。adjustCallback 的作用是在 PageView 自动调整时执行相应的代码块。由于我们使用的是系统的 setContentOffsetInDuration 方法，很难在其中同步执行动作，因此采用这种回调函数的方式，实际效果还不错。

实现代码

自动调节时的代码

以下是在 PageView 自动调整位置时，改变页面元素大小和透明度的代码：

pageView->adjustCallback = [](XKPageView *pageView) {
// 创建淡入动作，持续时间 0.15 秒，透明度达到 255
FiniteTimeAction *fadeIn = FadeTo::create(0.15, 255);
// 创建淡出动作，持续时间 0.15 秒，透明度达到 255 * 0.3
FiniteTimeAction *fadeOut = FadeTo::create(0.15, 255 * 0.3);
// 创建放大动作，持续时间 0.15 秒，缩放比例为 1.5
FiniteTimeAction *scaleToBig = ScaleTo::create(0.15, 1.5f);
// 创建缩小动作，持续时间 0.15 秒，缩放比例为 1.0
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 != nullptr) {
// 执行淡出和缩小动作
sprite->runAction(spawnOut);
}
// 获取后一个页面的精灵
sprite = (Sprite *)pageView->getPageAtIndex(current + 1);
if (sprite != nullptr) {
// 克隆并执行淡出和缩小动作
sprite->runAction(spawnOut->clone());
}
};

滑动时的代码

以下是在 PageView 滑动时，改变页面元素大小和透明度的代码：

void HelloWorld::pageViewDidScroll(XKPageView *pageView) {
// 监听滚动事件，可以在这里添加滚动时要执行的代码，比如缩放
// 获取可见区域的大小
Size visibleSize = Director::getInstance()->getVisibleSize();
// 计算屏幕中心的 X 坐标
float midX = visibleSize.width / 2;
// 获取 PageView 的偏移量
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);
// 获取精灵的 X 坐标
float positionX = sprite->getPositionX();
// 转换成相对屏幕坐标
float endX = positionX + offsetX + midX - tmp;
if (0 < endX && endX <= 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) {
// 位于屏幕中心右边
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);
}
}
}

通过以上代码，我们可以在 PageView 自动调整和滑动时，动态改变页面元素的大小和透明度，实现更加丰富的交互效果。