利用pixi.js制作精灵动画
CSS Sprites 技术对于广大的前端工程师来说应该是一点也不陌生。国内开发者昵称为CSS精灵,通过一定的技术手段,让精灵动起来,我称其为精灵动画,那么目前有哪些实现方式 呢?下面让我们详细的聊聊。
关于实现精灵动画的方式有很多种,我自己实践过的主要有三种:
1: 把动作分解成一系列连续的编号的图片,如img0.jpg,img1.jpg,img2.jpg...,然后利用setIntval等定时器不断的去更换图片地址。
2: 把动作按照一定的间距排列在一张图片上,利用css3的动画帧,做出动画效果。
3: 利用pixi.js 精灵库来实现该效果
我们先分析一下上面三种实现方式的优缺点:
第一种,优点是简单粗暴,兼容性好,学习成本低。缺点是要加载的图片多,效率低,定时器本身也有不少问题。
第二种,优点是实现方便,充份利用了css3的动画特性,避免了使用定时器的各种原始问题。缺点是需要优赖css3,兼容性差,如果是动态生成的样式,同样有效率问题。
第三种,优点是充份利了cavas/webgl来实现,可以利用硬件加速,功能强大。缺点是学习成本高,同样有兼容性问题。
前面两种,我在项目中都有运应用,今天我要重点讨论的是第三种方案。在前面我介绍过pixi.js的简单用法,当时只说明了一些基本概念和静态图片的用法,没有讲到用它做动画。
官网有一个精灵动画的例子,但是用的是josn格式的配置,看的是一头雾水,显然对于一个简单的精灵动画,显得太过复杂了。我下面的例子是要实现一个类似小鸟飞舞翅膀或人跑步的动画,我们一起来看看利用pixi.js该怎么做。
var i=0;
var x = 0;
var data = [];
var width = 300;
var width = 300;
var stage = new PIXI.Stage(0xFFFFFF);
var renderer = PIXI.autoDetectRenderer(width, height);
document.body.appendChild(renderer.view);
var sprite = new PIXI.Sprite.fromImage('bird.png');
//对图片进行缩放
//sprite.scale.x = .5;
// sprite.scale.y = .5; for(var i = 0; i < count; i++){
data.push(i*width);
} stage.addChild(sprite); requestAnimFrame(animate); function animate(){
//控制刷新频率
if( i % 15 == 0){
sprite.position.x = -data[x];
renderer.render(stage);
x++;
if(x > data.length -1){
x = 0;
i = 0;
}
}
i++;
requestAnimFrame(animate);
}
参数使用前:
通过上面的代码,可以看到小龙已经在欢快的舞动它的翅膀了。一切看起来很美好,当我把它移到我的项目中的时候,发现小龙有一个白色背景。这个确实很可恶,翻遍了官方提供的api,没有找到可以控制舞台透明的参数。 于是我不得不去翻看pixi的源码了,好在终于被我找到了:
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/ /**
* This helper function will automatically detect which renderer you should be using.
* WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by
* the browser then this function will return a canvas renderer
* @class autoDetectRenderer
* @static
* @param width=800 {Number} the width of the renderers view
* @param height=600 {Number} the height of the renderers view
* @param [view] {Canvas} the canvas to use as a view, optional
* @param [transparent=false] {Boolean} the transparency of the render view, default false
* @param [antialias=false] {Boolean} sets antialias (only applicable in webGL chrome at the moment)
*
*/
PIXI.autoDetectRenderer = function(width, height, view, transparent, antialias)
{
第四个参数就是控制透明的,于是赶紧用上。
参数使用后:
利用pixi.js制作精灵动画的更多相关文章
- 利用css+js制作下拉列表
利用文本框来制作,可以不影响给后台传数据.<!DOCTYPE html> <html> <head> <style> *{;;;} body{font- ...
- 京东首页原生----js制作|css动画|js动画|计时器--轮播图(好久没更新,这两天闲的蛋疼做个京东页面分辨率1366*768,919京东,适应没调!)要文件加关注找我要哦!
- pixi.js教程中文版--基础篇
前言 Pixi.js使用WebGL,是一个超快的HTML5 2D渲染引擎.作为一个Javascript的2D渲染器,Pixi.js的目标是提供一个快速的.轻量级而且是兼任所有设备的2D库.提供无缝 C ...
- 网页小实验——用canvas生成精灵动画图片
实验目标:借助canvas把一张国际象棋棋子图片转换为一组适用于WebGL渲染的精灵动画图片,不借助其他图片处理工具,不引用其他库只使用原生js实现. 初始图片如下: 一.图片分割 将初始图片分割为六 ...
- 【百度地图API】如何利用地图API制作汽车沿道路行驶的动画?——如何获得道路层数据
原文:[百度地图API]如何利用地图API制作汽车沿道路行驶的动画?--如何获得道路层数据 有几个做汽车导航的朋友问我说,他们想在地图上制作一辆车沿着道路行驶的动画.可是,百度地图的道路数据并没有公开 ...
- 使用WebGL + Three.js制作动画场景
使用WebGL + Three.js制作动画场景 3D图像,技术,打造产品,还有互联网:这些只是我爱好的一小部分. 现在,感谢WebGL的出现-一个新的JavaScriptAPI,它可以在不依赖任何插 ...
- 【Unity 3D】使用 2DToolkit 插件 制作2D精灵动画
话说博客传图也太麻烦了吧,一个一个文件一个一个传....为什么不能直接粘贴了,自动上传呢... 刚直接粘贴了,结果一张图没有,又重新截一次图,在传了一次...真是太**了 好了,吐槽完了,开始博客吧 ...
- 利用css+原生js制作简易钟表
利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...
- css精灵动画
精灵动画的实现 CSS Sprites在国内很多人叫CSS精灵,其实这个技术不新鲜,原理就是:靠不断的切换图片让人感觉视觉上不断在变化,例如gif动画之类的效果 那么前端如何实现精灵效果? 传统的就是 ...
随机推荐
- redis的面试题,没答出来,直接被pass
redis 内存数据集大小上升到一定大小的时候,就会施行数据淘汰策略.redis 提供 6种数据淘汰策略: volatile-lru:从已设置过期时间的数据集(server.db[i].expire ...
- Linux Shell 重定向与管道【转帖】
by 程默 在了解重定向之前,我们先来看看linux 的文件描述符. linux文件描述符:可以理解为linux跟踪打开文件,而分配的一个数字,这个数字有点类似c语言操作文件时候的句柄,通过句柄就可以 ...
- 修复jLink V9固件小记
网上买了个山寨jLink V9.3 plus,号称不掉固件的,不过固件最终还是掉了,现象是:插上去红灯亮,发现jLink但是驱动无法安装.估计是固件丢失了,放G搜了一圈发现修复固件都是V8的,但是倒找 ...
- spring注解配置实例
在spring中使用注解配置前需要先在配置文件指定需要扫描的包. 通过注解的方式依赖注入,可以不用创建set方法,也不用在xml文件中申明注入关系. 实例结构如下: 整个流程是: 先创建好数据库的表对 ...
- php报表使用
php报表的使用: 1.到官网(http://jpgraph.net/)下载,建议下载jpgraph-3.0.7.tar.gz版本 2.解压后有两个文件夹 docportal:使用手册 src:报表核 ...
- Javascript 小技能
/* @@截取字符串长度,汉字算2个字符 @@return [string]+'...' */ var subString = function(str, len) { var newLen ...
- asp.net 使用DroDownList来实现二级联动
今天做新闻发布系统的时候,用到了二级联动,我把使用方法记录下来,以便日后查阅以及帮助新手朋友们.下面是效果图: 下面来讲解一下实现的方法: 1.在.aspx页面中,拖入两个DroDownList控件. ...
- IRP完成例程返回值理解
第一,完成例程里面直接返回STATUS_SUCCESS,这时候IRP已经继续向上回卷,失去了对IRP的控制. 第二,完成例程里面返回STATUS_MORE_PROCESSING_REQUIRED,仍具 ...
- Android课程---序列化与反序列化(转)
ava序列化与反序列化是什么?为什么需要序列化与反序列化?如何实现Java序列化与反序列化?本文围绕这些问题进行了探讨. 1.Java序列化与反序列化 Java序列化是指把Java对象转换为字节序列的 ...
- nmea协议
NMEA协议 信息类型为: GPGSV:可见卫星信息 GPGLL:地理定位信息 GPRMC:推荐最小定位信息 GPVTG:地面速度信息 GPGGA:GPS定位信息 GPGSA:当前卫星信息 1. Gl ...