cocos2d 画中画效果

1.效果图

2.如何实现理论

 

我们以2张图作为实例。最外面的大图，还有就是红色框框中的图。 这两张图的尺寸是一样的。

准备工作我们就做2件事情：

1.把第二张图缩小，向右旋转添加到第一张图中，看起来还是第一张图

2.把第一张图的锚点设置为紫色的那个点（非常重要，这样缩放才有较好的效果）

用户手指滑动的时候，我们做的事情：

1.第一张图同时run 3个action，放大，向左旋转，位移

移动的位置比较讲究，结果是要把紫色的点移动到屏幕中间。（这个点就比较难计算）

3.实现的难点

1.已知一个精灵中的点，求它对应锚点？

比如一张图片它的宽度是500，高度400. 那么p(200，300）这个点对应的锚点是多少？

float anchorPointX = 200 / width;  

1.        float anchorPointY = 300 / height;  

就是当前位置的x,y分别除以这个图片的宽，高度。

2.一个精灵本来是在屏幕中心的，现在有一个点p(200,300), 如何移动这个精灵使得，结果是p(200,300)这个点居于屏幕中心？

1. Vec2 worldPosition = smallSprite->convertToNodeSpace(Vec2(WIN_WIDTH/2, WIN_HEIGHT /2));  
2.         Vec2 pos = worldPosition - Vec2(smallSprite->getContentSize().width * 0.5, smallSprite->getContentSize().height * 0.5);  

2张图慢慢搞，还是可以成功。那么5，6张图呢？

我尝试过按照2张图那样搞，一次全部添加，缩放会有问题，因为倍数太大了，导致了模糊。所以只能弄成一个组

0，1  

1，2  

2，3 

3，4

4，5

每次都是显示2组，刚开始显示 3，4 ，4，5  这两组，3，4隐藏，显示4，5，在4继续往左滑动就隐藏4，5，显示3，4。一旦用户在3这个状态继续往左滑动，就变成 2，3，3，4这2组。

逻