与动作密不可分的还有动画，动画又可以分为场景过渡动画和帧动画。场景过渡动画我们在以往介绍过，这一个我们只介绍帧动画。
帧动画
帧动画就是按一定时间间隔、一定的顺序、一帧一帧地显示帧图片。我们的美工要为精灵的运动绘制每一帧图片，因此帧动画会由很多帧组成，按照一定的顺序切换这些图片就可以了。
在cocos2d-js中播放帧动画涉及到两个类：cc.animation和cc.animate，类图如下图所示，cc.animation是动画类，它保存有很多动画帧，cc.animate类是动作类它继承于cc.actioninterval类，属于间隔动作类，它的作用是将cc.animation定义的动画转换成为动作进行执行，这样我们就看到动画播放的效果了。
帧动画相关类图
实例：帧动画使用
下面我们通过一个实例介绍一下帧动画的使用，这个实例如下图所示，点击go按钮开始播放动画，这时候播放按钮标题变为stop，点击stop按钮可以停止播放动画。
帧动画实例下面我们再看看具体的程序代码，app.js中的helloworldlayer的构造代码代码如下：
app.js中的helloworldlayer中的onaction函数代码如下：
上述第①行代码是创建一个animation对象，它是动画对象，然后我们要通过循环将各个帧图片放到animation对象中。第②行是获得帧图片的文件名。第③行代码是通过帧名创建精灵帧对象，第④行代码把精灵帧对象添加到animation对象中。
第⑤行代码animation.setdelayperunit(0.15)是设置两个帧播放时间，我们这个动画播放是4帧。第⑥行代码animation.setrestoreoriginalframe(true)是动画执行完成是否还原到初始状态。第⑦行代码是通过一个animation对象创建animate对象，第⑧行代码this.sprite.runaction(cc.repeatforever(action))是执行动画动作，无限循环方式。
第⑨行代码this.sprite.stopallactions()停止所有的动作。
更多内容请关注最新cocos图书《cocos2d-x实战：js卷——cocos2d-js开发》
欢迎加入cocos2d-x技术讨论群：257760386
《cocos2d-x实战 js卷》现已上线，各大商店均已开售：
欢迎关注智捷ios课堂微信公共平台，了解最新技术文章、图书、教程信息