逐帧动画是一种常见的动画形式(Frame By Frame),其原理是在“连续的关键帧”中分解动画动作,也就是在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成动画。 因为逐帧动画的帧序列内容不一样,不但给制作增加了负担而且最终输出的文件量也很大,但它的优势也很明显:逐帧动画具有非常大的灵活性,几乎可以表现任何想表现的内容,而它类似与电影的播放模式,很适合于表演细腻的动画。例如:人物或动物急剧转身、 头发及衣服的飘动、走路、说话以及精致的3D效果等等。
现在很Flash动画,很大程度上都是逐帧动画。PIXI.extras.AnimatedSprite精灵实现逐帧动画的原理跟Flash的大致一样。现在有以下这张图片:它的分辨率是 1040 * 296 ,共有8帧,那么每帧的分辨率就是 130 * 296 。
按照逐帧动画的实现原理,我们只要把这张图片拆分成8帧后,按照一定帧频循环切换,那么就可以形成一个人物在走路的动画。
实现的源码如下:
var app = new PIXI.Application(800, 600, {
backgroundColor: 0x1099bb
});
document.body.appendChild(app.view);
var movieClip = null;
// 加载图片
var loader = new PIXI.loaders.Loader();
loader.add('../img/walk.png', "../img/walk.png");
loader.on("progress", function(target, resource) {
console.log("progress:", target.progress); //加载进度
});
loader.once('complete', function(target, resource) {
onComplete();
});
loader.load();
//加载完成
function onComplete() {
var texture = PIXI.Texture.fromImage("../img/walk.png");
var cutnum = 8;
//将图片拆分为8帧
var width = parseInt(texture.width / cutnum);
var height = parseInt(texture.height);
var frameArray = [];
for(var i = 0; i < cutnum; i++) {
var rectangle = new PIXI.Rectangle(i * width, 0, width, height);
var frame = new PIXI.Texture(texture, rectangle);
frameArray.push(frame);
}
//播放动画
movieClip = new PIXI.extras.AnimatedSprite(frameArray);
movieClip.position.x = 100;
movieClip.position.y = 100;
movieClip.animationSpeed = parseFloat((20 / 120).toFixed(2));
movieClip.play();
app.stage.addChild(movieClip);
}
显示效果: