关注
分享
PixiJS是一个快速的轻量级的2D动画渲染引擎，主要使用了WebGL技术，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡实现在浏览器里更流畅地展示3D场景和模型，还能创建复杂的导航和数据视觉化。
黄泽平
深耕前端，努力前进!
展开
-
前端动画渲染引擎pixi.js系列（1）简单介绍及应用
做前端开发已经有一些年头了，最近忽然有个想法，想写一些现在仍然在迭代更新而且非常实用的前端框架的文章，毕竟个人需要记忆的东西太多，一是怕自己遗忘了，其次还是想分享一下自己的一些经验，希望能帮助到一些前端开发人员，如果是非常厉害的前端大牛，可以省略这些文章。一.PixiJS简介 本次系列要介绍的前端框架是PixiJS，PixiJS是一个快速的轻量级的2D动画渲染引擎，主要使用了WebGL技术原创 2017-04-14 16:47:30 · 11807 阅读 · 2 评论 -
前端动画渲染引擎pixi.js系列（2）container和Sprite的概念和继承关系
博主曾经有过2年的AS3开发经验，发现PixiJS框架与AS3有太多相似之处，就连对象的函数和事件都大体类似。曾经有过AS3开发经验的前端朋友，对容器、精灵的概念应该都了然于胸了。一.container容器和Sprite精灵概念(1)容器表示显示对象的集合。它是作为其他对象的容器的所有显示对象的基类，即容器是用来管理多个精灵的显示对象。创建方法：var container原创 2017-04-14 17:57:27 · 9233 阅读 · 1 评论 -
前端动画渲染引擎pixi.js系列（3）container和Sprite继承外专有的函数与方法
上篇介绍了基本显示对象PIXI.DisplayObject及该对象与Container、Sprite之间的继承关系，本篇将对Container、Sprite独有的函数与事件进行详细分析。一.容器PIXI.Container的[独有]参考函数与事件-----------------------------------------------------------------原创 2017-04-14 18:24:09 · 6137 阅读 · 0 评论 -
前端动画渲染引擎pixi.js系列（4）如何实现鼠标交互事件
一.交互事件概念事件交互是指显示对象PIXI.Sprite、PIXI.Container与用户交互所触发的事件。常用的交互事件主要有如点击、拖拽等。在PixiJS中所触发的事件可以分为4种类型：鼠标左键触发，鼠标右键触发，触摸屏触发，兼容鼠标和触摸屏的共同触发。二.交互事件参考1.鼠标左键触发事件：click：点击事件mousedown：鼠标按下mousemov原创 2017-04-17 11:32:52 · 17898 阅读 · 2 评论 -
前端动画渲染引擎pixi.js系列（5）Text文本和Graphics画笔工具
一.文本文本对象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原创 2017-04-17 16:22:56 · 17983 阅读 · 4 评论 -
前端动画渲染引擎pixi.js系列（6）副本实现和平铺精灵TilingSprite
pixi.js系列（7）画布副本绘制、图片平铺效果的应用原创 2017-04-18 00:12:36 · 6905 阅读 · 0 评论 -
前端动画渲染引擎pixi.js系列（7）粒子容器、遮罩层和滤镜的应用
一.粒子容器粒子容器PIXI.particles.ParticleContainer是一个能容纳大量显示精灵的容器，其具有快速、高效的特点，支持容期内显示对象的位置变化、大小缩放和角度旋转；然而出于性能的考虑，同时也屏蔽了容器内显示对象如基色变化、遮罩层等特效功能。粒子容器继承于PIXI.Container。创建方法如下：new PIXI.particles.ParticleContain原创 2017-04-17 18:09:10 · 9298 阅读 · 0 评论 -
前端动画渲染引擎pixi.js系列（8）动画精灵AnimatedSprite实现逐帧动画效果
逐帧动画是一种常见的动画形式（Frame By Frame），其原理是在“连续的关键帧”中分解动画动作，也就是在时间轴的每帧上逐帧绘制不同的内容，使其连续播放而成动画。 因为逐帧动画的帧序列内容不一样，不但给制作增加了负担而且最终输出的文件量也很大，但它的优势也很明显：逐帧动画具有非常大的灵活性，几乎可以表现任何想表现的内容，而它类似与电影的播放模式，很适合于表演细腻的动画。例如：人物或动物急剧转原创 2017-05-18 14:34:23 · 12731 阅读 · 1 评论 -
前端动画渲染引擎pixi.js系列（9）如何生成缩略图
pixi引擎是将图像都绘制到同一个canvas对象中，下面是最简单的创建canvas对象的源码：var app = new PIXI.Application(800, 500, { backgroundColor: 0x1099bb});document.body.appendChild(app.view);其中，app.view就是canvas对象。通过查看canvas的API可以原创 2017-05-19 14:27:12 · 3682 阅读 · 0 评论 -
前端动画渲染引擎pixi.js系列（10）骨骼动画实现之DragonBones
在介绍骨骼动画之前，我先介绍一下DragonBones，它的中文名是龙骨，是一套由Egret团队制作的独立的骨骼动画编辑器，我们PIXI播放骨骼动画所需的图片和JSON数据都是从该编辑器生成和导出的。想了解DragonBones可以在百度上搜索“白鹭时代”或者访问网页：https://www.egret.com/。主页的“产品”栏中就有DragonBones项，如下图所示。进入Drag原创 2017-05-19 16:02:31 · 11353 阅读 · 5 评论