@黄小泽的个人博客

做前端开发已经有一些年头了，最近忽然有个想法，想写一些现在仍然在迭代更新而且非常实用的前端框架的文章，毕竟个人需要记忆的东西太多，一是怕自己遗忘了，其次还是想分享一下自己的一些经验，希望能帮助到一些前端开发人员，如果是非常厉害的前端大牛，可以省略这些文章。一.PixiJS简介 本次系列要介绍的前端框架是PixiJS，PixiJS是一个快速的轻量级的2D动画渲染引擎，主要使用了WebGL技术

pixi引擎是将图像都绘制到同一个canvas对象中，下面是最简单的创建canvas对象的源码：var app = new PIXI.Application(800, 500, { backgroundColor: 0x1099bb});document.body.appendChild(app.view);其中，app.view就是canvas对象。通过查看canvas的API可以

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

一.粒子容器粒子容器PIXI.particles.ParticleContainer是一个能容纳大量显示精灵的容器，其具有快速、高效的特点，支持容期内显示对象的位置变化、大小缩放和角度旋转；然而出于性能的考虑，同时也屏蔽了容器内显示对象如基色变化、遮罩层等特效功能。粒子容器继承于PIXI.Container。创建方法如下：new PIXI.particles.ParticleContain

pixi.js系列（7）画布副本绘制、图片平铺效果的应用

一.文本文本对象PIXI.Text是指创建一行或多行文字，可以使用'\n'来实现换行，文本对象PIXI.Text的继承关系是：PIXI.Text->PIXI.Sprite文本PIXI.Text的创建代码如下：var text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fi

一.交互事件概念事件交互是指显示对象PIXI.Sprite、PIXI.Container与用户交互所触发的事件。常用的交互事件主要有如点击、拖拽等。在PixiJS中所触发的事件可以分为4种类型：鼠标左键触发，鼠标右键触发，触摸屏触发，兼容鼠标和触摸屏的共同触发。二.交互事件参考1.鼠标左键触发事件：click：点击事件mousedown：鼠标按下mousemov

上篇介绍了基本显示对象PIXI.DisplayObject及该对象与Container、Sprite之间的继承关系，本篇将对Container、Sprite独有的函数与事件进行详细分析。一.容器PIXI.Container的[独有]参考函数与事件-----------------------------------------------------------------

博主曾经有过2年的AS3开发经验，发现PixiJS框架与AS3有太多相似之处，就连对象的函数和事件都大体类似。曾经有过AS3开发经验的前端朋友，对容器、精灵的概念应该都了然于胸了。一.container容器和Sprite精灵概念(1)容器表示显示对象的集合。它是作为其他对象的容器的所有显示对象的基类，即容器是用来管理多个精灵的显示对象。创建方法：var container

在介绍骨骼动画之前，我先介绍一下DragonBones，它的中文名是龙骨，是一套由Egret团队制作的独立的骨骼动画编辑器，我们PIXI播放骨骼动画所需的图片和JSON数据都是从该编辑器生成和导出的。想了解DragonBones可以在百度上搜索“白鹭时代”或者访问网页：https://www.egret.com/。主页的“产品”栏中就有DragonBones项，如下图所示。进入Drag