实例：Cocos2d-x实现画中画效果（转）

1.效果

动画

2.如何实现理论

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

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

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

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

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

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

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

3.实现的难点

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

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

float anchorPointX = 200 / width;
float anchorPointY = 300 / height;

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

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

Vec2 worldPosition = smallSprite->convertToNodeSpace(Vec2(WIN_WIDTH/2, WIN_HEIGHT /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

逻辑是这样，实现起来还是需要费点时间。就这样吧。真正实现出来有成就感。