如何利用 Sprite 动态显示图片并实现显示对象的处理

上次咱们讲过怎么用LBitmap和LBitmapData展示静态图，这次咱们要试试用Sprites显示动态图片，这样就能给网页带来更多活力，提升用户感受！大家也都明白动画能打造出多彩的网页体验~

构建lsprite类：基础框架

为了让动态显示更炫酷，我决定弄个lsprite类。这个类里有个叫childList的东西，专门用来装那些挂在上面的显示对象。当你用lsprite的show方法时，它就会把这个list翻个底朝天，保证每个孩子都能好好展示自己。这就是我从as中学到的精髓，给大家提供一个简单又好用的工具，搞定各种复杂的显示问题。

function LSprite(){  
    var self = this;  
    self.type = "LSprite";  
    self.x = 0;  
    self.y = 0;  
    self.visible=true;  
    self.childList = new Array()  
}  
LSprite.prototype = {  
    show:function (cood){  
        if(cood==null)cood={x:0,y:0};  
        var self = this;  
        if(!self.visible)return;  
        LGlobal.show(self.childList,{x:self.x+cood.x,y:self.y+cood.y});  
    },  
    addChild:function (DisplayObject){  
        var self  = this;  
        self.childList.push(DisplayObject);  
    }  
}

动态调用：让图片动起来

要让图画动起来，我就把LSPRITE的show方法变成循环。这样一来，每次运行show就能按部就班地持续工作。其实更方便的是，我还想到了一个包含全部要循环处理的方法的数组。只用在show里头对它进行遍历，我们就可以随心所欲地做出各种动态效果咯。

事件管理：添加与移除

function main(){  
    loader = new LLoader();  
    loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);  
    loader.load("1.png","bitmapData");  
}  
function loadBitmapdata(event){  
    var bitmapdata = new LBitmapData(loader.content);  
    var mapimg = new LBitmap(bitmapdata);  
      
    var backLayer = new LSprite();  
    addChild(backLayer);  
    backLayer.addChild(mapimg);  
}

为了让动画更听话，我学了addEventListener和removeEventListener这两招。它们能帮你不分时间、地点地加减动画中的各种循环事情。这样做不仅编程变得轻松了，还能把动画玩得更精细。举个例子，咱们可以借着用户的操作，随心所欲地开启或关闭动画，让他们觉得自己就是动画的主人！

实现行走图：让角色动起来

为了让你看看这个lsptite类多牛，我搞了个走路的小动画出来。我在BitmapData里加了几个新方法，可以调整图片大小和位置。这么一来，我们就可以随心所欲地操控角色的动作，就像他们真的在屏幕上走路似的。这个功能真是赞，不只证明了lsprite的好用，对于做游戏来说也是个好开始！

function LSprite(){  
    var self = this;  
    self.type = "LSprite";  
    self.x = 0;  
    self.y = 0;  
    self.visible=true;  
    self.childList = new Array()  
    self.frameList = new Array();  
}  
LSprite.prototype = {  
    show:function (cood){  
        if(cood==null)cood={x:0,y:0};  
        var self = this;  
        if(!self.visible)return;  
        LGlobal.show(self.childList,{x:self.x+cood.x,y:self.y+cood.y});  
        self.loopframe();  
    },  
    loopframe:function (){  
        var self = this;  
        var key;  
        for(key in self.frameList){  
            self.frameList[key]();  
        }  
    },  
    addChild:function (DisplayObject){  
        var self  = this;  
        self.childList.push(DisplayObject);  
    }  
}

动画的魅力：不仅仅是代码

其实，做编程就像是搞动画设计。你把那些静止的图片想象成场景，靠代码让它们变得栩栩如生，给人以美的感受。所以说，我们不仅是码农，还是艺术家！用代码来打造能打动人的作品，多酷！

addEventListener:function (type,listener){  
        var self = this;  
        if(type == LEvent.ENTER_FRAME){  
            self.frameList.push(listener);  
        }  
    },  
    removeEventListener:function (type,listener){  
        var self = this;  
        var i,length = self.frameList.length;  
        for(i=0;i<length;i++){  
            if(type == LEvent.ENTER_FRAME){  
                self.frameList.splice(i,1);  
                break;  
            }  
        }  
    }

结语：动画的未来

这年头儿，动画在网页设计里可是越来越火了！咱用ActionScript似得的语法做动画，效果还不赖，用户体验也更棒！以后，动画肯定是网页设计里必不可少的元素，给咱们的数字生活添彩不少！

提问与分享

你试过做动画吗？你觉得它对网页设计有啥用？快来评论区聊聊。让我们看看动画的前景如何！记得点赞分享，你的鼓励就是我前进的动力！

LBitmapData.prototype = {  
        setProperties:function (x,y,width,height){  
            var self = this;  
            self.x = x;  
            self.y = y;  
            self.width = width;  
            self.height = height;  
        },  
        setCoordinate:function (x,y){  
            var self = this;  
            self.x = x;  
            self.y = y;  
        }  
    }