[学习笔记] Cocos Animation

最新推荐文章于 2020-09-05 19:27:23 发布

原创最新推荐文章于 2020-09-05 19:27:23 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #cocos2d #html #animation

Cocos2d-js 专栏收录该内容

1 篇文章

订阅专栏

本文将详细介绍如何通过cocos2d-js实现帧动画，包括定义动画的基本信息、创建并播放Action(cc.Animate)，以及使用cc.textureCache定义帧动画的方法。通过四个步骤帮助开发者轻松掌握帧动画的实现。

要通过cocos2d-js实现帧动画，需要完成以下基本操作：

通过cc.Animation定义动画中基本信息：帧以及帧切换速度等
创建Action(cc.Animate)并在cc.Node上播放它

定义帧动画——cc.Animation

//定义cc.Animation
var animation = new cc.Animation();

//在这个例子里添加四帧动画，每一帧动画都是从res/my_pic.png这张图片的不同位置上截取的
animation.addSpriteFrame(new cc.SpriteFrame("res/my_pic.png", cc.rect(0, 0, 255, 476)));
animation.addSpriteFrame(new cc.SpriteFrame("res/my_pic.png", cc.rect(0, 480, 255, 476)));
animation.addSpriteFrame(new cc.SpriteFrame("res/my_pic.png", cc.rect(0, 960, 255, 466)));
animation.addSpriteFrame(new cc.SpriteFrame("res/my_pic.png", cc.rect(0, 1426, 255, 466)));

//定义每帧动画之间的时间间隔
animation.setDelayPerUnit(0.1);

播放动画

//使用前面创建的cc.Animation创建帧动画
var action = cc.RepeatForever.create(new cc.Animate(animation));

//在cc.Node节点上播放帧动画
someNode.runAction(action);

附

还可以使用cc.textureCache定义帧动画（适用于那种把所有帧定义在一张大图中的情况）

//使用textureCache管理大图
var texture = cc.textureCache.addImage("res/first_aganruan.png");

//创建cc.Animation，并通过texture加载帧图片内容
var animation = new cc.Animation();
animation.addSpriteFrameWithTexture(texture, cc.rect(0, 0, 255, 476));
animation.addSpriteFrameWithTexture(texture, cc.rect(0, 480, 255, 476));
animation.addSpriteFrameWithTexture(texture, cc.rect(0, 960, 255, 466));
animation.addSpriteFrameWithTexture(texture, cc.rect(0, 1426, 255, 466));