首页 > 代码库 > 进阶的PageView——封装ScrollView 实现自动调整位置,缩放,透明度实例
进阶的PageView——封装ScrollView 实现自动调整位置,缩放,透明度实例
上篇介绍了,简单封装PageView 的基本实现。XKPageView基本实现了,PageView 的功能,就可能用来实现上篇说的使用系统自带PageView实现不了的功能了(有点绕~)
同样地,我们先来看看使用效果图:
进阶使用XKPageView,主要用到了我们上篇说到的XKPageViewDelegate 的PageViewDidScroll函数,监听滚动事件。 滚动过程中计算金币缩放大小,还有 透明度设置。然后新增加了这个回调函数
std::function<void(XKPageView *)> adjustCallback
(学过ios的同学就不能理解了,其实就是 block啦,这东西很好用哈。) adjustCallback的作用就是当PageView自动调整的时候执行的代码块,由于我们使用的是系统的setContentOffsetInDuration,所以很难再在里面同步执行动作了。所以就使用这种方法,效果还不错。
这里就贴一下,实现滑动和自动调整位置时改变大小和透明度的代码吧。
自动调节时的代码
<span style="font-size:14px;"> 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()); } }; </span>
滑动时代码
<span style="font-size:14px;"> 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); } } }</span>
这次就不放到CSDN上了,直接放在github上,需要的同学可以去下载...(需要翻墙)
由于对底层技术了解较少,避免不了会有bug,如果有问题,请一定要告诉我~
我的个人博客:helkyle.tk
我的CSDN博客: http://blog.csdn.net/joueu
(以后写的东西都会优先推到个人博客哦~)
转载请注明出处为helkyle.tk,谢谢~
进阶的PageView——封装ScrollView 实现自动调整位置,缩放,透明度实例