【转载】Cocos2dx 小技巧(十四)ScrollView实现缩放效果

时间:2023-02-07 21:09:03
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的偏移坐标之间不可告人的秘密,从而实现当前的目的。

下面看下运行效果。

【转载】Cocos2dx 小技巧(十四)ScrollView实现缩放效果

【转载】Cocos2dx 小技巧(十四)ScrollView实现缩放效果

【转载】Cocos2dx 小技巧(十四)ScrollView实现缩放效果



尊重原创,转载请注明来源:http://blog.csdn.net/star530/article/details/25658725