Cocos2dx 小技巧(十四)ScrollView实现缩放效果

前端之家收集整理的这篇文章主要介绍了Cocos2dx 小技巧(十四)ScrollView实现缩放效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

尊重原创,转载请注明来源:http://www.jb51.cc/article/p-tvhlvkby-bcy.html


这阶段心绪比较乱,所以这篇开头就不扯淡了。(谁说大姨夫来了我跟谁急!~~

说到大姨夫我突然想到英雄联盟有个美女解说叫伊芙蕾亚,她的堂弟ID竟然叫:姨夫累呀,好笑吧(呵呵,有点冷~~额,我都说不扯淡了)。

------------
前天有个网友问我一些关于scrollView的用法,由于在QQ上实在讲不清,所以就利用晚上的时间写这篇博客出来了。
本篇要实现的功能是用scrollView 拖动对象时,对象移动到某个固定范围会有放大、缩小的效果下面开始。
在进入正题前我先简短的介绍下scrollView应该怎么用吧(想必大家也都会用~~):
1、记得在头文件里包含 “../extensions/cocos-ext.h" ,顺便声明下作用域: USING_NS_CC_EXT;

2、在类的继承里 加上ScrollViewDelegate,如下:

class HelloWorld : public cocos2d::Layer,public ScrollViewDelegate  

3、在类的声明中, 加上三个scrollView的委托函数 ,如下:

void scrollViewDidScroll(ScrollView* view);  
void scrollViewDidZoom(ScrollView* view);  
void scrollViewMoveOver(ScrollView* view); 

4、实在不想继续说废话了,直接看实例吧。
先看头文件


#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__  

下面看定义


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 就好了。实现效果是对象在某个坐标范围内移动时会有缩放效果

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的偏移坐标之间不可告人的秘密,从而实现当前的目的。

下面看下运行效果


原文链接:https://www.f2er.com/cocos2dx/344907.html

猜你在找的Cocos2d-x相关文章