图片精灵sprite动画插件

原创 2016年08月29日 12:05:03

好久好久没有写博客了,最近写了俩个小插件,这是其中一个。

我想大家在玩游戏的时候会看到人物走动,这些不管在3d还是2d游戏都会有这些动画,这些动画都有一个小单元一个小单元拼凑吹来的,这个小单元就是精灵,用js或者一些游戏引擎或者是用一些制作游戏的工具不如unity3D会有自带动画制作工具,都可以实现,这里主要由js来实现这一点,毕竟我只是个小前端~

首先我们需要知道UI给到我们的图片是什么样子的,然后根据UI给过来的图进行参数的处理。

我们先来看看那js吧

var spriteDemo = {
        rowCount:0,
        lastColCount:0,
        param:{},
        currentCount:0,
        currentIndex:{rows:0,columns:0},
        inifiteSave:"",
        initFunc:function(option){
            this.param=option;
            this.rowCount=Math.floor((option.spriteLength-0)/(option.unitLength-0));
            this.lastColCount=(option.spriteLength-0)%(option.unitLength-0)==0?option.unitLength-0:(option.spriteLength-0)%(option.unitLength-0);//获取最后一行的个数
            var _this=this;
            this.inifiteSave = setInterval(function(){_this.aniFunc()},option.speed);
//            _this.aniFunc();
        },
        aniFunc:function(){
            this.currentIndex.columns+=1;
            if(this.param.count!=""&&this.param.count!="auto"){
                if(this.currentCount>this.param.count){
                    clearInterval(this.inifiteSave);
                    return false;
                }
            }
            if((this.currentIndex.columns>(this.param.unitLength-1)&&this.currentIndex.rows<this.rowCount-1)){
                this.currentIndex.rows++;
                this.currentIndex.columns=0;
            }else if((this.currentIndex.rows==this.rowCount-1)&&this.currentIndex.columns==this.lastColCount){
                this.currentIndex.rows=0;
                this.currentIndex.columns=0;
                this.currentCount++;
            }
            this.param.targetDom.style.backgroundPosition="-"+(this.currentIndex.columns*this.param.unitArea.width+this.param.initPos.x)+"px -"+(this.currentIndex.rows*this.param.unitArea.height+this.param.initPos.y)+"px";
        }
    };

这里就是全部的js了,你肯定会觉得,这么点js也算是一个插件了?您先别急,听我后面的给您介绍介绍这些参数哈。option代表需要传递的参数option={spriteLength:spriteLength,unitLength:unitLength,unitArea:unitArea,speed:speed,count:countinitPos:initPos,targetDom:targetDom}然后介绍一下里面具体参数,spriteLength总共的精灵个数,unitLength单行的精灵个数,unitArea指的是每一个精灵的大小,speed速度,count运行的次数,initPos初始的位置,targetDom当前元素。

  看了这些参数介绍大家应该都已经知道了这个函数的原理了,这里我就不在瞎比比了。希望此博客了对你有帮助。

版权声明:本文为博主原创文章,未经博主允许不得转载。

Motio:简单但功能强大的的 jQuery 精灵动画插件

您可能感兴趣的相关文章 期待已久的2012年度最佳 jQuery 插件揭晓 精心挑选的优秀jQuery Ajax分页插件和教程 推荐几款非常棒的 jQuery 全景图片展示...
  • dyllove98
  • dyllove98
  • 2013年04月27日 23:23
  • 630

移动端适配之雪碧图(sprite)背景图片定位

为了减少网络请求个数量,提高网站的访问速度,我们一般都会把一些小的图片合并成一张sprite图,然后根据background-position来进行定位。在web端由于是固定的大小与left 、top...
  • charlene0824
  • charlene0824
  • 2016年09月06日 17:21
  • 3415

按键精灵图像识别插件

  • 2008年12月07日 15:36
  • 262KB
  • 下载

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

逐帧动画是一种常见的动画形式(Frame By Frame),其原理是在“连续的关键帧”中分解动画动作,也就是在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成动画。 因为逐帧动画的帧序列内容不一样...
  • zeping891103
  • zeping891103
  • 2017年05月18日 14:34
  • 2319

unity学习笔记-精灵集和精灵动画

2D游戏中,对精灵的操作需求,往往是两点: 1、 静态精灵:一般做背景展示等 2、 精灵动画:帧动画、骨骼动画等 声明:以下对Unity的操作,基于Unity3D 4.3.4,本人初学Unity,没用...
  • leecrest
  • leecrest
  • 2014年03月16日 20:18
  • 3832

Unity2D之Sprite动画相关

[Unity2D]精灵动画       通常我们在游戏里面创建的精灵比如玩家主角,它在移动的过程中一般会带有一些动画的效果,比如两只脚前后地移动,那么这种动画效果的实现和控制就可以通过Uni...
  • kenkao
  • kenkao
  • 2015年08月05日 16:58
  • 6367

Qt移动应用开发(三):使用精灵图片实现帧动画

上一篇博文讲到了Qt Quick对于动画的一般支持,动画的形式多样,配合不同的插值函数,可以几乎实现所有想要的动画效果,而对于游戏的一些特殊的效果比如说帧动画,Qt更是有专门的类来实现。下面我们就来看...
  • jiangcaiyang123
  • jiangcaiyang123
  • 2014年06月23日 18:19
  • 4958

Motio:简单但功能强大的的 jQuery 精灵动画插件

您可能感兴趣的相关文章 期待已久的2012年度最佳 jQuery 插件揭晓 精心挑选的优秀jQuery Ajax分页插件和教程 推荐几款非常棒的 jQuery 全景图片展示...
  • dyllove98
  • dyllove98
  • 2013年04月27日 23:23
  • 630

unity学习笔记-精灵集和精灵动画

2D游戏中,对精灵的操作需求,往往是两点: 1、 静态精灵:一般做背景展示等 2、 精灵动画:帧动画、骨骼动画等 声明:以下对Unity的操作,基于Unity3D 4.3.4,本人初学Unity,没用...
  • leecrest
  • leecrest
  • 2014年03月16日 20:18
  • 3832

CSS精灵技术(就是我们常说的,雪碧图,CSS Sprites)

基本的原理,就是利用background-postion的负值来进行调节。 当我们定位于background-position:-50px -50px;时,发现图片向左向上移动了...
  • dl429
  • dl429
  • 2014年11月07日 10:40
  • 4936
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:图片精灵sprite动画插件
举报原因:
原因补充:

(最多只允许输入30个字)