cocos2dx 缩小动画范围

对于很多新手朋友而言，可能不清楚如何实现 cocos2dx 缩小动画范围。下面将为大家详细讲解，希望能对你有所帮助。

功能概述

本篇要实现的功能是，在使用 scrollView 拖动对象时，当对象移动到某个固定范围，会产生放大、缩小的效果。

使用 scrollView 前的准备

在进入正题之前，先简要介绍一下 scrollView 的使用方法：

1. 包含头文件并声明作用域：在头文件里包含 "../extensions/cocos-ext.h"，同时声明作用域 USING_NS_CC_EXT;。
2. 类继承 ScrollViewDelegate：在类的继承中添加 ScrollViewDelegate，示例代码如下：

   class HelloWorld : public cocos2d::Layer, public ScrollViewDelegate
   

3. 添加 scrollView 的委托函数：在类的声明中，添加三个 scrollView 的委托函数，代码如下：

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

代码实现

头文件代码

#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 委托函数代码

接下来看 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
}

通过以上代码，我们实现了在 cocos2dx 中使用 scrollView 拖动对象时，对象在特定范围内产生放大、缩小效果的功能。