利用pixi.js制作精灵动画
2014-12-18 22:48
597 查看
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该怎么做。
参数使用前:
通过上面的代码,可以看到小龙已经在欢快的舞动它的翅膀了。一切看起来很美好,当我把它移到我的项目中的时候,发现小龙有一个白色背景。这个确实很可恶,翻遍了官方提供的api,没有找到可以控制舞台透明的参数。 于是我不得不去翻看pixi的源码了,好在终于被我找到了:
第四个参数就是控制透明的,于是赶紧用上。
参数使用后:
关于实现精灵动画的方式有很多种,我自己实践过的主要有三种:
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系列(8)动画精灵AnimatedSprite实现逐帧动画效果
- [OpenGL] 利用精灵表制作动画
- 原创:利用JS制作GIF动画图(及图片轮转显示效果)
- 利用JQuery动画制作滑动菜单项效果
- 利用float制作兼容ie6纯css下来菜单,无table、无js
- 利用js读出xml制作地区联动下拉框
- OSG例程(3) - 利用更新回调制作路径动画
- MATLAB GUI中利用定时器制作动画
- 【游戏引擎LibGdx】利用演员制作简单动画(简单仿制保卫萝卜开头画面)
- 制作 JS 广告的简易入门(二)利用 CSS3 技术制作广告
- Visual C# 2005 - 利用程序代码制作简单动画效果
- 利用网络现有资源 制作 swf动画
- 利用CSS3制作淡入淡出动画效果
- 利用同一模型的两种表情(Poser轻松得到)制作表情动画(菜鸟版)
- 【Unity 3D】使用 2DToolkit 插件 制作2D精灵动画
- 【iOS-Cocos2d游戏开发之二十】精灵的基础知识点总汇(位图操作/贴图更换/重排z轴等)以及利用CCSprite与CCLayerColor制作简单遮盖层!
- 如何制作具有声音效果的动画桌面精灵
- Visual C# 2005 - 利用程序代码制作简单动画效果
- 利用VML标记语言画图、动画制作
- 利用JSFL制作swf素材包