Cocos2dx 小技巧(十四)ScrollView实现缩放效果
说到大姨夫我突然想到英雄联盟有个美女讲解叫伊芙蕾亚。她的堂弟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的偏移坐标之间不可告人的秘密。从而实现当前的目的。
以下看下执行效果。
尊重原创,转载请注明来源:http://blog.csdn.net/star530/article/details/25658725
posted on 2019-05-03 16:48 xfgnongmin 阅读(336) 评论(0) 编辑 收藏 举报