zoukankan      html  css  js  c++  java

  • 【转载】Cocos2dx 小技巧（十四）ScrollView实现缩放效果

    Cocos2dx 小技巧（十四）ScrollView实现缩放效果
    这阶段心绪比较乱，所以这篇开头就不扯淡了。（谁说大姨夫来了我跟谁急！~~）
    说到大姨夫我突然想到英雄联盟有个美女解说叫伊芙蕾亚，她的堂弟ID竟然叫：姨夫累呀，好笑吧（呵呵，有点冷~~额，我都说不扯淡了）。

    ------------
    前天有个网友问我一些关于scrollView的用法，由于在QQ上实在讲不清，所以就利用晚上的时间写这篇博客出来了。
    本篇要实现的功能是用scrollView 拖动对象时，对象移动到某个固定范围会有放大、缩小的效果。下面开始。


    在进入正题前我先简短的介绍下scrollView应该怎么用吧（想必大家也都会用~~）：
    1、记得在头文件里包含 “../extensions/cocos-ext.h"，顺便声明下作用域：USING_NS_CC_EXT;
    2、在类的继承里 加上ScrollViewDelegate，如下：
    ?
    1
    class HelloWorld : public cocos2d::Layer,public ScrollViewDelegate
    3、在类的声明中，加上三个scrollView的委托函数，如下：
    ?
    1
    2
    3
    void scrollViewDidScroll(ScrollView* view);
    void scrollViewDidZoom(ScrollView* view);
    void scrollViewMoveOver(ScrollView* view);
    4、实在不想继续说废话了，直接看实例吧。

    先看头文件：
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    #ifndef __HELLOWORLD_SCENE_H__
    #define __HELLOWORLD_SCENE_H__
     
    #include "cocos2d.h"
    #include "../extensions/cocos-ext.h"
     
    USING_NS_CC;
    USING_NS_CC_EXT;
     
    class HelloWorld : public cocos2d::Layer,public ScrollViewDelegate
    {
    public:
        static cocos2d::Scene* createScene();//获取欢迎画面的Scene
        virtual bool init(); 
     
        void menuCloseCallback(Ref* pSender);
         
        CREATE_FUNC(HelloWorld);
     
        //scroll 委托
        void scrollViewDidScroll(ScrollView* view);
        void scrollViewDidZoom(ScrollView* view);
        void scrollViewMoveOver(ScrollView* view);
     
    private:
        Vector<sprite*> sp_vec;//声明一个容器
    };
    #endif // __HELLOWORLD_SCENE_H__</sprite*>

    下面看定义
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    bool HelloWorld::init()
    {  
        //首先创建scrollView
        auto scroll_layer = Layer::create();//创建scrollView中的容器层
        scroll_layer->setPosition(Point::ZERO);
        scroll_layer->setAnchorPoint(Point::ZERO);
        scroll_layer->setContentSize(Size(600,300));//设置容器层大小为（600，300）
     
        auto scrollView = ScrollView::create(Size(400,300),scroll_layer);//创建scrollView，显示窗口大小为(400,300)
        scrollView->setDelegate(this);//设置委托
        scrollView->setDirection(ScrollView::Direction::HORIZONTAL);//设置滚动方向为水平
        scrollView->setPosition(Point(300,200));
        this->addChild(scrollView,2);
     
        //创建三个对象
        auto boy = Sprite::create("boy.png");//没错，主角又是我们熟悉的那仨。多么温馨。
        boy->setPosition(Point(150,100));
        scroll_layer->addChild(boy,2);
     
        auto girl = Sprite::create("girl_1.png");
        girl->setPosition(Point(300,100));
        scroll_layer->addChild(girl,2);
     
        auto girl3 = Sprite::create("girl_3.png");
        girl3->setPosition(Point(450,100));
        scroll_layer->addChild(girl3,2);
      
        sp_vec.pushBack(boy);//将三个对象放入容器中
        sp_vec.pushBack(girl);
        sp_vec.pushBack(girl3);
     
           return true;
    }

    接下来看下scrollView的委托函数，这里只要看scrollViewDidScroll 就好了。实现效果是对象在某个坐标范围内移动时会有缩放效果。
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    void HelloWorld::scrollViewDidScroll(ScrollView* view)
    {
        //在scrollView拖动时响应该函数
     
        auto offsetPosX = (view->getContentOffset()).x;//获得偏移X坐标(向右移动，偏移量为正数，向左则为负数）
    //  CCLOG("offset pos is %f , %f",offsetPos.x,offsetPos.y);
     
        //for 循环遍历容器中的每个精灵
        for( auto e : sp_vec )
        {
            auto pointX = e->getPositionX();//获得当前对象的X坐标（不管怎么滚动，这个坐标都是不变的）
            float endPosX = pointX + offsetPosX;//将精灵的 X坐标 + 偏移X坐标
     
            //当endPosX在 150~250 范围，则对象的大小从左向右递增
            if( endPosX > 150 && endPosX < 250 )
            {
                float x = endPosX / 150;//放大倍数为 endPosX / 150;
                e->setScale(x);
                CCLOG("x = %f",x);
            }
            //当endPosX在 250~350 范围，则对象的大小从左向右递减
            else if( endPosX > 250 && endPosX < 350 )
            {
                //下面这个公式不好解释，我就这么说吧：
                //假设 endPosX = 200，那么放大倍数应该是 200 / 150 = 1.33左右，那么当endPosX = 300时，出于对称的原理，我们以250为对称中心，那么
                //300 的放大倍数也应该是 1.33。这就是下面的公式由来
                float a = endPosX - 250;
                float b = 250 - a;
     
                float x = b / 150;
                e->setScale(x);
            }
            else
            {
                //不是在上面的范围，则设置为正常大小
                e->setScale(1.0f);
            }
        }  
    }
    void HelloWorld::scrollViewDidZoom(ScrollView* view)
    {
        //do something
    }
    void HelloWorld::scrollViewMoveOver(ScrollView* view)
    {
        //do something
    }

    恩，注释写的很清楚啦，但我还是要稍微补充一些东东：我们应该知道，对象放到滚动层上（如scroll_layer->addChild(boy)），那么不管对象在scrollView上如何移动，它获得的坐标都是不会变的（如boy->getPosition()是不变的数值），这种情况下，如果我们想实现对象在某个坐标范围内会有缩放效果，那么只是去获取对象的坐标肯定是行不通的，所以肯定要找一个时刻在变化的”参照物”来利用下，该找什么呢？没错，就是scrollView的偏移坐标（scrollView->getContentOffset()）！只要scrollView移动一下，那么它的 偏移量也随之改变。我这里就是利用对象的坐标与scrollView的偏移坐标之间不可告人的秘密，从而实现当前的目的。

    下面看下运行效果。



    尊重原创，转载请注明来源：http://blog.csdn.net/star530/article/details/25658725
  • 相关阅读:
    扩展springMVC
    SpringBoot推荐的Thymeleaf
    springboot使用注解添加组件
    @PropertySource 加载指定的配置文件
    读取yml配置文件中的值
    媒体查询
    若是前台接收的数据为null的不进行传递
    DATA时间：若是数据库存储的为毫秒，而前台需要的是秒，下面介绍一个工具类：
    表单验证
    Redis集群总结
  • 原文地址：https://www.cnblogs.com/dudu580231/p/5643789.html
Copyright © 2011-2022 走看看