cocos Creator翻书效果(过渡篇)

时光匆匆，转眼已经到了元旦假期结束，回过头一看自己的博客最近荒芜了一些，已经有快一个月没有更新了，今天要跟大家唠叨唠叨cocosCreator制作的翻书效果，(源代码在下面，谢谢)。

话不多说，老司机请上车

滴滴

简单说一下思路，由于cocos creator跟cocos2dx不同，它本身没有3d这个概念，明显的地方体现着creator的笛卡尔坐标系的处理，这个东西（ps请对比两张图片即可）

所以这里用了一个伪3d的写法(简称wei san di)，毫无疑问的是，正如大家说知道的那样，在cocos creator里面一个精灵（物体）的默认锚点是在0.5 0.5也就是物体的中心位置，再上面的视频里面，我们可以看到物体在进行翻转的水平运动，这个步骤我们可以先进行拆分开，

1.首先调整物体所要翻转的锚点，即调整Scale与Anchor的值(这里所要翻转的角度需要自己进行尝试)

2. 制作好角度开始制作缓动动画，我这里使用的是runAction，只需要我们把位置坐标填好，他自己就会帮我们对每一帧进行绘制。

3.翻书时候图片的层级关系处理，在这里我们要保证我点击的那个图片(书页)始终是位于最上方的。

关于第三点这个时候你会想，这还不简单，我让他每次当点击时候那个图片始终位于最上方，不就行了，恰恰因为还是不行的，creator这里面默认的层级关系使用冒泡的方式，换句话说就是君君，臣臣，父父，子子，

因为书是两页的并不是单页，拿这本书举例子，现在第一页姑且称为1-1，第二页叫1-2，层级关系默认1-1大于1-2（这样1-1才会覆盖1-2），当我点击1-1时候（默认1-1在右侧，点击后往左侧运动），这时候1-1的index值开始改变，翻转到左侧时候他的index值开始小于1-2(保证当我点击1-2运动到左侧后，左侧的1-2才能成功覆盖着1-1)，以此类推，当我再次点击1-2时候，1-2翻转到右侧，这个时候他的index值要小于在左侧的1-1 index的值……以此类推，我们可以得出, 向左：ringht.index > left.index,向右：left.index > right.index;

下篇文章再接着说。

Demo github地址：https://github.com/894658027/HTML5-Games/tree/master/cocosCreator/book-demo