前端动画渲染引擎pixi.js系列（8）动画精灵AnimatedSprite实现逐帧动画效果

傷城~ 2021-09-12 07:08 1084阅读 0赞

逐帧动画是一种常见的动画形式（Frame By Frame），其原理是在“连续的关键帧”中分解动画动作，也就是在时间轴的每帧上逐帧绘制不同的内容，使其连续播放而成动画。 因为逐帧动画的帧序列内容不一样，不但给制作增加了负担而且最终输出的文件量也很大，但它的优势也很明显：逐帧动画具有非常大的灵活性，几乎可以表现任何想表现的内容，而它类似与电影的播放模式，很适合于表演细腻的动画。例如：人物或动物急剧转身、 头发及衣服的飘动、走路、说话以及精致的3D效果等等。

现在很Flash动画，很大程度上都是逐帧动画。PIXI.extras.AnimatedSprite精灵实现逐帧动画的原理跟Flash的大致一样。现在有以下这张图片：它的分辨率是 1040 \* 296 ，共有8帧，那么每帧的分辨率就是 130 \* 296 。

![Center][]

按照逐帧动画的实现原理，我们只要把这张图片拆分成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);
    }

显示效果：  
![Center 1][]

[Center]: /images/20210813/df2096f5b4dd4217bfc24fbdb6a1d7dc.png
[Center 1]: /images/20210813/31f432fa64224289a8754d766f8341e5.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1084人围观）

还没有评论，来说两句吧...

相关阅读

相关 css3系列之animation实现逐帧动画

![1609428-20190728151248913-1545605264.gif][]![1609428-20190728151516302-956452338.gif][

￡神魔★判官ぃ/ 2023年08月17日 15:23/ 0 赞/ 93 阅读

相关 css使用animation逐帧实现动画效果

css使用animation逐帧实现动画效果，如图所示：![在这里插入图片描述][20201230190705629.gif_pic_center] 由上图所示,它是一帧一

た入场券/ 2023年01月01日 02:52/ 0 赞/ 198 阅读

相关 css制作逐帧动画-案例

> 网页动画图像、Flash 动画和 JavaScript 实现的效果图片，我们用最基础的CSS也能实现。制作一个简单的gif动画图，上图就是效果图。 > > 用CSS3制作

柔情只为你懂/ 2022年09月05日 01:58/ 0 赞/ 289 阅读

相关使用逐帧动画实现一个忐忑的精灵动画

1、在res目录下，创建一个名称为anim的目录，在该目录下添加一个名称为fairy.xml的资源文件 <?xml version="1.0" encoding="u

朴灿烈づ我的快乐病毒、/ 2022年08月19日 12:17/ 0 赞/ 185 阅读

相关 Android 逐帧动画&补间动画

在Android开发中，有的时候为了展示更好的UI效果，通常会通过给一些UI添加动画来达到这一目的，所以Android Api定义了两种动画的Api供开发者使用：逐帧动画和补间

怼烎@/ 2022年08月18日 10:56/ 0 赞/ 261 阅读

相关 Android 动画解析(一) 逐帧动画(Frame Animation)

简介开发Android的同学都知道，Android中的动画有逐帧动画(Frame Animation)、补间动画(Tween Animation)以及属

你的名字/ 2022年07月17日 00:08/ 0 赞/ 289 阅读

相关 Android动画——逐帧动画

1、概述 Android 平台有一套完整的动画框架，在Android3.0之前有两种动画，一种方式是补间动画 Tween Animation、另一种叫逐帧动画 Frame A

蔚落/ 2021年09月22日 05:06/ 0 赞/ 639 阅读

相关前端动画渲染引擎pixi.js系列（10）骨骼动画实现之DragonBones

在介绍骨骼动画之前，我先介绍一下DragonBones，它的中文名是龙骨，是一套由Egret团队制作的独立的骨骼动画编辑器，我们PIXI播放骨骼动画所需的图片和JSON数据都是

r囧r小猫/ 2021年09月12日 07:14/ 0 赞/ 1256 阅读

相关前端动画渲染引擎pixi.js系列（8）动画精灵AnimatedSprite实现逐帧动画效果

逐帧动画是一种常见的动画形式（Frame By Frame），其原理是在“连续的关键帧”中分解动画动作，也就是在时间轴的每帧上逐帧绘制不同的内容，使其连续播放而成动画。因为逐

傷城~/ 2021年09月12日 07:08/ 0 赞/ 1085 阅读

相关前端动画渲染引擎pixi.js系列（6）副本实现和平铺精灵TilingSprite

一.副本绘制显示对象的副本绘制是指对一个显示精灵或容器进行副本绘制，所绘制出来的副本对象跟原显示对象将一模一样。该方法主要应用于需要复制另一个复杂场景显示对象时，无需再

素颜马尾好姑娘i/ 2021年09月12日 05:34/ 0 赞/ 1092 阅读