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

Cocos2dx 小技巧(十四)ScrollView实现缩放效果,布布扣,bubuko.com

时间: 2024-10-05 04:45:46

Cocos2dx 小技巧(十四)ScrollView实现缩放效果的相关文章

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

Cocos2dx 小技巧(十四)ScrollView实现缩放效果 这阶段心绪比较乱,所以这篇开头就不扯淡了.(谁说大姨夫来了我跟谁急!~~)说到大姨夫我突然想到英雄联盟有个美女解说叫伊芙蕾亚,她的堂弟ID竟然叫:姨夫累呀,好笑吧(呵呵,有点冷~~额,我都说不扯淡了). ------------前天有个网友问我一些关于scrollView的用法,由于在QQ上实在讲不清,所以就利用晚上的时间写这篇博客出来了.本篇要实现的功能是用scrollView 拖动对象时,对象移动到某个固定范围会有放大.缩小的

Cocos2dx 小技巧(十二) 一种可行的系列动画播放方式

定义: 将一个类(Adaptee)的接口转换成客户(Client)希望的另外一个接口(Target). 目标接口(Target):客户所期待的接口.目标可以是具体的或抽象的类,也可以是接口. 需要适配的类(Adaptee):需要适配的类或适配者类. 适配器(Adapter):使得一个东西适合另一个东西的东西.百度中定义为:接口转换器.通过包装一个需要适配的对象,把源接口转换成目标接口. 为什么要适配:需要的东西已做好,但是不能用,短时间又不能改造,想办法适配它. 作用: 使得原本由于接口不兼容而

Cocos2dx 小技巧(十三)聊聊坐标系

一好友考上了空姐,她说:以后基本上不会回来了,等下次见面时请叫我白富美!虽然有点羡慕,但我依旧不甘示弱回复:下次见面时请叫我高富帅!未来,谁说得准呢? ------------------有段时间没用到onTouchBegan,近来写代码时发现对convertToGL(),getLocation()这些接口都有点陌生了,所以趁这次机会就写个总结到博客里,下次忘了就来博客里看看,当笔记用咯. 首先脑补下基础知识吧:1.OpenGL坐标系:该坐标系原点在屏幕左下角,x轴向右,y轴向上.这也就是coc

【转】cocos2d-x游戏开发(十四)用shader使图片背景透明

转自:http://blog.csdn.net/dawn_moon/article/details/8631783 好吧,终于抽时间写这篇文章了. 手头上有很多人物行走图,技能特效图等,但这些图都有个纯黑色背景,怎么样将内容显示出来,让背景透明呢?前段时间搞了一下,感谢群里的童鞋们,提供了思路和方法. 这里用shader处理了像素,使黑色背景透明,直接上代码 ShaderSprite.h 1 #ifndef __TestShader__ShaderSprite__ 2 #define __Tes

《企业云桌面实施》-小技巧-08-建筑设计行业-真实效果-漫游动画-三维视图渲染

<企业云桌面实施>-系列博文-陆续更新中 **************************************************************************************************** <企业云桌面实施>-小技巧-01-规划注意事项 http://dynamic.blog.51cto.com/711418/1884922 <企业云桌面实施>-小技巧-02-使用ISO光驱安装esxi6.5http://dynami

从零开始のcocos2dx生活(十)ScrollView

目录 简介 基础变量 ScrollViewDelegate Direction _dragging _container _touchMoved _bounceable _touchLength 方法 create setContentSize deaccelerateScrolling maxContainerOffset 和 minContainerOffset 触摸的各阶段 onTouchBegan onTouchMoved onTouchEnded 简介 scrollView是在一定可视

Cocos2dx 小技巧(一)预定义文件路径

我们的主题是:有些技巧你不知道不要紧,但知道后会很牛逼. 假设在项目工程的Resource有好多个目录,如image,fonts,Menu,InterfaceUI,等等,而我要创建的几个精灵对应的图片分别在这几个目录里,如: auto sprite = Sprite::create("image/sp.png"); 但要命的是我记忆力不好(假的),忘了图片都分别在哪个目录里,这时候就要跑到目录里去搜索下,这样是不是很麻烦?(说不麻烦的现在就给我出去!out!). 现在有一种办法可以从根

Cocos2dx 小技巧(九)现成的粒子特效

和高中的她 差点儿相同有两三年没见面了吧.下午她正好来泉州.我俩出来一起吃了个饭. 怎么说呢,自从高中毕业后我俩的联系就少了非常多.大学期间也就见过两三面吧. 现在毕业也快一年了,她已是人妇,而我自己的感情也是经历的长期的稳定与最近的跌宕.事实上那份感觉一直都不曾改变,变了的是周边不断影响自己的人和事. 你要好好的幸福下去.而我也在争取幸福的路上. ----- 这篇讲的是粒子,事实上我对粒子这一块没什么研究,由于当初刚開始接粗cocos2dx时.总经理和我说粒子这块能够临时不去了解.由于还用不到

Cocos2dx 小技巧(三)Label的换行

好了,这次又把Label这货拉出来鞭一鞭.我先创建一个label std::string star_str = "star is not star in the sky,it is on heart";//先定义一个string auto m_label = LabelTTF::create(star_str,"Arial",25);//创建一个labelm_label->setPosition(Point(300,300));this->addChil