圆形与矩形切换特效

圆形与矩形切换特效

DionysosLai2014-5-28

         首先，讲下我做个特效的思路来源：http://www.itjhwd.com/cxy-qizi/，在篇文章的结尾会有读者点评，当我们鼠标移到点评内容上时，就会出现一个特效动画，当时就是这个特效深深的打动了我。（大家不要过于关注文章内容哦，不过文章写得挺好的，赞个）。

         分析我的制作思路来源。

         首先，我想到的是，利用CCClipNode遮罩效果功能来实现。通过“底板+模板”的方式组合来达到裁剪目的。不够在制作过程中，会有一个问题出现，就是我们显示裁剪内容，也即模板里面的东西，那么必然是将“底板-模板”的内容给去除掉，也就是显示灰色内容了。

Oh,shit!看来这个方法行不通。

         另个一个想法，就来的非常简单了，就是直接取两张图片了。一张是矩形图片，另一张是通过矩形图片裁剪下来的圆形图片（这个可以通过很多工具实现）。然后在对象完成一些动画后，自动的更改纹理对象。

         在更改纹理对象时，一般我们是直接获取精灵对象，然后更改其纹理，具体代码如下：

CCSprite* sprite = (CCSprite*)getChildByTag(TAGSPRITE);

sprite->setTexture(m_textureCircle);

不过，这个做的话，会有一个很直接的问题，就是精灵会保留初始设置的宽和高，那么我们直接更改纹理对象的话，如果此时的纹理对象宽和高没有发生变化，则显示正常。但是一旦你的长和宽发生了变化。Oh，my god！精灵就会自动伸缩到原来的长和宽，也就是发生了形变。

解决的方法，有点儿粗暴了。就是我们自己将对象给移除掉，然后在添加对象。当然，在这之前，你要保留之前对象的相关信息，比如位置信息。

代码下载链接如下：https://github.com/DionysosLai/TestSquareToCirle

欢迎大家下载。这个特效，改进的地方可以是对象在旋转时，加入淡出淡入效果(这是我们公司美丽的美术同事提的意见)，目前还没做。有时间就加上这个效果。