进阶的PageView——封装ScrollView 实现自动调整位置，缩放，透明度实例

标签：cocos2d-x   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 实现自动调整位置，缩放，透明度实例

标签：cocos2d-x   pageview   scrollview   缩放   封装   

原文地址：http://blog.csdn.net/joueu/article/details/41563461