ActionScript와 유사한 구문을 사용하여 html5 작성 - 2부, Sprite를 사용하여 애니메이션 구현-H5 튜토리얼-php.cn

ActionScript와 유사한 구문을 사용하여 html5 작성 - 2부, Sprite를 사용하여 애니메이션 구현

黄舟

풀어 주다： 2017-01-17 16:32:55

원래의

1220명이 탐색했습니다.

이전 기사에서는 LBitmap 및 LBitmapData 클래스를 모방하고 추가하여 정적 이미지를 표시하는 데 사용했습니다.
이번에는 이미지를 동적으로 표시하기 위해 Sprite를 사용했습니다.
이전 기사의 표시 객체 처리 아이디어를 계속해서 다음과 같이 LSprite 클래스를 추가하고 show 메소드를 추가합니다.

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);  
    }  
}

로그인 후 복사

Sprite에는 그림과 기타 표시 가능한 객체가 있을 수 있으므로 생성자에는 모든 객체를 저장하기 위해 childList가 추가됩니다. 그런 다음 자체 show 메소드를 호출할 때 LGlobal을 반복하여 하위 객체를 표시합니다.
이러한 방식으로 이전 기사의 이미지 표시 코드도 Sprite를 사용하여 표시할 수 있습니다. 코드는 다음과 같습니다.

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);  
}

로그인 후 복사

액션스크립트의 Sprite가 동적용 EnterFrame 이벤트를 추가할 수 있다는 것을 알고 있습니다. 그림을 표시할 때 여기에서 모방하겠습니다. 왜냐하면 LSprite 클래스의 show 메소드가 지속적으로 반복되기 때문에 show 메소드에서 메소드를 계속 호출하기만 하면 반복이 가능하기 때문입니다.
연속적으로 반복되는 모든 메서드를 저장하는 배열이 있다고 가정합니다. 그런 다음 show 메서드에서 이 배열을 반복하여 모든 메서드의 루프가 달성되도록 할 수 있습니다.

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);  
    }  
}

로그인 후 복사

Light Assuming을 참조하세요. 물론 불가능합니다. 이 루프 이벤트를 추가하는 메서드가 필요하므로 addEventListener 메서드도 필요하며, 이 이벤트를 제거하려면 RemoveEventListener 메서드도 필요합니다.

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;  
            }  
        }  
    }

로그인 후 복사

추가해야 할 모든 것이 추가되었습니다. 다음은 간단하게 캐릭터의 걷기 차트를 구현해 보겠습니다
먼저 BitmapData 클래스에 몇 가지 메소드를 추가하여 이미지에 표시되는 영역의 위치 등을 변경합니다.

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;  
        }  
    }

로그인 후 복사

자, 이제 캐릭터의 걷기 차트 준비, 이것은 Let it move

var list = new Array();  
var index = 0;  
var mapimg;  
var loader  
var imageArray;  
var animeIndex = 0;  
var dirindex = 0;  
var dirarr = new Array({x:0,y:1},{x:-1,y:0},{x:1,y:0},{x:0,y:-1});  
function main(){  
    loader = new LLoader();  
    loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);  
    loader.load("1.png","bitmapData");  
}  
function loadBitmapdata(event){  
    var bitmapdata = new LBitmapData(loader.content,0,0,70,92);  
    imageArray = LGlobal.divideCoordinate(bitmapdata.image.width,bitmapdata.image.height,8,8);  
    mapimg = new LBitmap(bitmapdata);  
    mapimg.x = 100;  
    mapimg.bitmapData.setCoordinate(0,0);  
    index = 0;  
    var backLayer = new LSprite();  
    addChild(backLayer);  
    backLayer.addChild(mapimg);  
    backLayer.addEventListener(LEvent.ENTER_FRAME, onframe)  
}  
  
  
function onframe(){  
    index++;  
    if(index >= imageArray[0].length){  
        index = 0;  
    }  
    mapimg.bitmapData.setCoordinate(imageArray[dirindex][index].x,imageArray[dirindex][index].y);  
      
    mapimg.x += dirarr[dirindex].x*3;  
    mapimg.y += dirarr[dirindex].y*3;  
    if(animeIndex++ > 20){  
        dirindex++;  
        if(dirindex > 3)dirindex = 0;  
        animeIndex = 0;  
    }  
}

로그인 후 복사

위는 ActionScript와 유사한 구문을 사용하여 html5를 작성하는 방법입니다. 두 번째 부분은 Sprite를 사용하여 애니메이션 콘텐츠를 구현하는 것입니다. PHP 중국어 웹사이트(m.sbmmt.com)를 주목하세요!