图片精灵sprite动画插件

来源：互联网发布：逐浪cms怎么样编辑：程序博客网时间：2024/05/16 06:20

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

我想大家在玩游戏的时候会看到人物走动，这些不管在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:count，initPos:initPos,targetDom:targetDom}然后介绍一下里面具体的参数，spriteLength总共的精灵个数，unitLength单行的精灵个数，unitArea指的是每一个精灵的大小，speed速度，count运行的次数，initPos初始的位置，targetDom当前元素。

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

0 0