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

这阶段心绪比较乱,所以这篇开头就不扯淡了。(谁说大姨夫来了我跟谁急!
说到大姨夫我突然想到英雄联盟有个美女解说叫伊芙蕾亚,她的堂弟ID竟然叫:姨夫累呀,好笑吧(呵呵,有点冷~~额,我都说不扯淡了)。


Paste_Image.png

本篇要实现的功能是用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__</sprite*>

下面看定义

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

Paste_Image.png

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,524评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,869评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,813评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,210评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,085评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,117评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,533评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,219评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,487评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,582评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,362评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,218评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,589评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,899评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,176评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,503评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,707评论 2 335

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,945评论 4 60
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,058评论 25 707
  • 小小小小小小洁阅读 229评论 0 0
  • 今天晚上我写完作业,妈妈说:我给你们买香辣螃蟹吃。我们高兴极了!!! 一分钟后,妈妈回...
    yubo宝贝阅读 137评论 0 0