摘要：在做動畫時，精靈封裝的好壞，直接影響后續的編程體驗。基本封裝精靈名字繪制器，需另外封裝行為，精靈行為屬性是一個指向對象的引用，使用方法來繪制精靈。精靈繪制器即提供給對象的對象，和解耦。

在做canvas動畫時，精靈封裝的好壞，直接影響后續的編程體驗。

下文的封裝方法來自《HTML5 Canvas核心技術 圖形、動畫與游戲開發》，實現了精靈與繪制對象的解耦，很好用，平時自己也用這種寫法。

一個完整的Sprite包含兩部分：

Sprite的基本封裝

Sprite Painter實現

拆開Sprite和Painter，實現了解耦，可以隨意調整Painter功能。Pinter對象只需要實現: void paint(sprite, context)方法即可。這好像也叫策略模式。

// name：精靈名字
// painter: 繪制器，需另外封裝
// behaviors: 行為，精靈行為
var Sprite = function(name, painter, behaviors){
    this.left = 0,
       this.top = 0,
       this.width = 10,
       this.height = 10,
      this.velocityX = 0,
      this.velocityY = 0,
       this.visible = true,
       this.animating = false,
       this.painter = undefined, // object with paint(sprite, context)
       this.behaviors = [], // objects with execute(sprite, context, time)
       
       if(name){
        this.name = name;
    }
    if(painter){
        this.painter = painter;
    }
}

Sprite.prototype = {
    // painter屬性是一個指向Painter對象的引用，使用paint(sprite, context)方法來繪制精靈。
    // behaviors屬性指向一個對象數組，數組的每個對象都以execute(sprite, context, time)方法來對精靈進行操作
    paint: function(context){
        if(this.painter.paint !== undefined && this.visible){
            this.painter.paint(this, context);
        }
    },
    
    update: function(context, time){
        for(var i = this.behaviors.length; i > 0; --i){
            this.behaviors[i-1].execute(this, context, time);
        }
    }
}

behavior一開始有些難理解。書上的解釋是：精靈的行為。

什么叫行為呢？

個人覺得，改變了Sprite基本屬性的動作，都叫精靈的行為，改變了top、width、velocityX等balabala的都叫行為。

behavior里面會實現一個excute方法 void excute(sprite, context, time){}。在方法里面會修改各類的值。到Pianter繪制的時候，會實現修改后的效果。也就實現了精靈的多種行為。

即提供給Sprite對象的Painter對象，和Sprite解耦。

目前Painter對象分為三類：

描邊及填充繪制器
圖像繪制器
精靈圖繪制器

描邊繪制器可以隨意控制，只要實現了 void paint(sprite, context)就可以了。

1.圖像繪制器

var ImagePainter = function(imgUrl){
    this.image = new Image();
    this.image.src = imgUrl;
}

ImagePainter.prototype = {
    paint: function(sprite, context){
        if(this.image.complete){
            context.drawImage(this.image, sprite.left, sprite.top, sprite.width, sprite.height);
        } else{
            this.iamge.onload = function(e){
                context.drawImage(this.image, sprite.left, sprite.top, sprite.width, sprite.height);
            }
        }
    }
}

2.精靈繪制器

var SpriteSheetPainter = function(cells){
    this.cells = cells;
};

SpriteSheetPainter.prototype = {
    cells: [],
    cellIndex: 0,
    
    advance: function(){
        if(this.cellInde === this.cells.length -1 ){
            this.cellIndex = 0;
        } else{
            this.cellIndex++;
        }
    },
    paint: function(sprite, context){
        var cell = this.cells[this.cellIndex];
        context.drawImage(spritesheet, cell.x, cell.y, cell.w, cell.h,
                            sprite.left, sprite.top, cell.w, cell.h);
    }
}

SpriteAnimator包含兩個參數，Painter數組和回調函數。

var SpriteAnimator = function(painters, elapsedCallback){
    this.painters = painters;
    if(elapsedCallback){
        this.elapsedCallback = elapsedCallback;
    }
};

SpriteAnimator.prototype = {
    painters: [],
    duration: 1000,
    startTime: 0,
    index: 0,
    elapsedCallback: undefined,
    
    end: function(sprite, originalPainter){
        sprite.animating = false;
        if(this.elapsedCallback){
            this.elapsedCallback(sprite);
        } else{
            sprite.painter = originalPainter;
        }
    },
    
    start: function(sprite, duration){
        var endTime = +new Date() + duration,
            period = duration / (this.painters.length),
              interval = undefined,
              animator = this, // for setInterval() function
              originalPainter = sprite.painter;
              
          this.index = 0;
          sprite.animating = true;
          sprite.painter = this.painter[this.index];
          
          interval = setInterval(){
              if(+new Date() < endTime){
                  sprite.painter = animator.painters[++animator.index];
              } else{
                  animator.end(sprite, originalPainter);
                  clearIntercal(interval);
              }
          }, period);
    }
}