关闭

图片精灵sprite动画插件

标签: 原生javascript图片动画插件前端
366人阅读 评论(0) 收藏 举报
分类:

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

我想大家在玩游戏的时候会看到人物走动,这些不管在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当前元素。

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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:8370次
    • 积分:215
    • 等级:
    • 排名:千里之外
    • 原创:13篇
    • 转载:0篇
    • 译文:0篇
    • 评论:8条
    文章分类