Cocos2dx学习笔记10：cocos2dx序列帧动画(1)

概述     在cocos2dx里是不支持gif动画的，所以我们无法给精灵设置gif格式的图片。但是如果我们想实现动画效果呢？那么我们就要自己通过大量的静态图来组成播放成动画。 在cocos2dx里提供了序列帧动画的概念来实现这个功能，动画由帧组成，每一帧都是一个纹理，我们可以使用一个纹理序列来创建动画。 首先找一张动图的gif图，这里QQ群里最近动图的逗逼图太多，我就随便找了一张，把图片另存到桌面，

在cocos2dx里是不支持gif动画的，所以我们无法给精灵设置gif格式的图片。但是如果我们想实现动画效果呢？那么我们就要自己通过大量的静态图来组成播放成动画。

在cocos2dx里提供了序列帧动画的概念来实现这个功能，动画由帧组成，每一帧都是一个纹理，我们可以使用一个纹理序列来创建动画。

首先找一张动图的gif图，这里QQ群里最近动图的逗逼图太多，我就随便找了一张，把图片另存到桌面，打开ps软件，把图片拖进去，这样gif图会被拆分许多的图层。我们把图层一个一个图层的保存成png的静态图，命名为mAnimation1-10，因为这个图片就10个图层，所以就到10。

650) this.width=650;" title="点击查看原图" border="0" alt="学习笔记10：图1.png" src="http://img.jb51.cc/vcimg/static/loading.png" width="554" height="243" src="http://www.byjth.com/content/uploadfile/201509/a4a11441628523.png">

保存这样的命名格式的好处是 后面的数字是递增的，而且是可变的，我们可以在编程 *** 作的时候可以用for循环实现数字的增加，而不需要手动增加10个。

1、使用普通方式实现动画
我们使用Animation类描述一个动画，而精灵显示动画的动作则是一个Animate对象。动画动作Animate是精灵显示动画的动作，它由一个动画对象创建，并由精灵执行。

650) this.width=650;" title="点击查看原图" border="0" alt="学习笔记10：图2.png" src="http://img.jb51.cc/vcimg/static/loading.png" width="680" height="296" src="http://www.byjth.com/content/uploadfile/201509/thum-41021441628800.png">

2、使用精灵帧实现动画

上一次精灵创建的时候我们提到过精灵帧

（Cocos2dx学习笔记7：精灵(Sprite)http://www.byjth.com/biji/26.html）主要用来做动画用，这次我们同样使用TexturePacker工具将我们用的素材进行打包。
打包教程：教你使用TexturePacker工具对素材打包 http://www.byjth.com/tools/29.html
打包好后，我们把生成的pList文件和png图片放到项目里面的资源目录下，这里我是D:\cocos2d-x-3.4\tests\cocosxuexi\Resources文件夹。

650) this.width=650;" title="点击查看原图" border="0" alt="学习笔记10：图4.png" src="http://img.jb51.cc/vcimg/static/loading.png" width="519" height="370" src="http://www.byjth.com/content/uploadfile/201509/95241441628867.png">

650) this.width=650;" title="点击查看原图" border="0" alt="学习笔记10：图5.png" src="http://img.jb51.cc/vcimg/static/loading.png" width="680" height="395" src="http://www.byjth.com/content/uploadfile/201509/thum-a9991441628971.png">

效果图，看看是不是和gif图一样。

650) this.width=650;" title="点击查看原图" border="0" alt="学习笔记10：图3.gif" src="http://img.jb51.cc/vcimg/static/loading.png" width="338" height="517" src="http://www.byjth.com/content/uploadfile/201509/e43f1441629473.gif">

Cocos2dx学习笔记10：cocos2dx序列帧动画(1)

http://www.byjth.com/biji/30.html

教你使用TexturePacker工具对素材打包

http://www.byjth.com/tools/29.html

总结

以上是内存溢出为你收集整理的Cocos2dx学习笔记10：cocos2dx序列帧动画(1)全部内容，希望文章能够帮你解决Cocos2dx学习笔记10：cocos2dx序列帧动画(1)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。