CreateJSのTweenJS、SoundJS、PreloadJS

TweenJS基礎實例：

var canvas = document.getElementById('myCanvas'),
    stage = new createjs.Stage(canvas);
    
var stageWidth = canvas.width;
var stageHeight = canvas.height;

var characterWidth = 75;
var characterHeight = 96;

var spritesheet; 
var charactor;

window.onload = function(){
  
  spritesheet = new createjs.SpriteSheet({
    'images': ['http://cdn.gbtags.com/gblibraryassets/libid108/charactor.png'],
    'frames': {"height": 96, "count": 10, "width": 75}
  });
  
  charactor  = new createjs.Sprite(spritesheet);
  charactor.x = (stageWidth - characterWidth)/2;
  charactor.y = (stageHeight - characterHeight)/2;
  
  stage.addChild(charactor);
  
  charactor.play();
  
  /*
   *  以下代碼生成了tween動畫人物相關效果
   */
  
  // 生成上下移動人物效果（一次性）
  createjs.Tween.get(charactor, {loop:false})
      .to({y:150}, 500, createjs.Ease.quadInOut)
      .to({y:50}, 500, createjs.Ease.quadInOut);
      
  // 生成人物左右移動效果（無限循環）
  createjs.Tween.get(charactor, {loop:true})
      .wait(3000)
      .call(charactor.gotoAndStop, [5], charactor) 
      .wait(300)
      .to({x:450}, 1200, createjs.Ease.backInOut) 
      .call(charactor.gotoAndStop, [0], charactor)
      .wait(2000)
      .call(charactor.gotoAndStop, [5], charactor)
      .wait(300)
      .to({x:(stageWidth - characterWidth)/2}, 500, createjs.Ease.backInOut)
      .call(charactor.gotoAndStop, [0], charactor);

  
  createjs.Ticker.setFPS(35);
  createjs.Ticker.addEventListener("tick", tick);
  
  function tick(){
    stage.update();
  }
};

 

SoundJS播放音頻

createjs.Sound.alternateExtensions = ['mp3'];
createjs.Sound.on('fileload', this.loadHandler, this);
createjs.Sound.registerSound('endless.mp3', 'sound');
     
function loadHandler(event) {
     // 這會引發針對每個已注冊的聲音
     var instance = createjs.Sound.play('sound');
     instance.on('complete', this.handleComplete, this);
     instance.volume = 0.5
}

 

PreloadJS加載文件

var canvas = document.getElementById("myCanvas");
var stage = new createjs.Stage(canvas);

var manifest;
var preload;
var progressText = new createjs.Text("", "20px Arial", "#dd4814");
progressText.x = 125 - progressText.getMeasuredWidth() / 2;
progressText.y = 20;
stage.addChild(progressText);
stage.update();

//定義相關JSON格式文件列表
function setupManifest() {
    manifest = [{
        src:  "lib/easeljs-0.8.2.min.js", 
        id: "easeljs"
    }, {
        src: "resource/4d8f3f13-89c0-455c-95f3-ba5120c2f123.jpg",
        id: "logo"
    }, {
        src:  "endless.mp3",
        id: "audiofile"
    }
 
    ];
    for(var i=1;i<=10;i++)
        manifest.push({src:"resource/200x200"})
}

//開始預加載
function startPreload() {
    preload = new createjs.LoadQueue(true);
    //注意加載音頻文件需要調用如下代碼行
    preload.installPlugin(createjs.Sound);         
    preload.on("fileload", handleFileLoad);
    preload.on("progress", handleFileProgress);
    preload.on("complete", loadComplete);
    preload.on("error", loadError);
    preload.loadManifest(manifest);
 
}

//處理單個文件加載
function handleFileLoad(event) {
    console.log("文件類型: " + event.item.type);
    if(event.item.id == "logo"){
        console.log("logo圖片已成功加載");
    }
}
 
//處理加載錯誤：大家可以修改成錯誤的文件地址，可在控制台看到此方法調用
function loadError(evt) {
    console.log("加載出錯！",evt.text);
}
 
//已加載完畢進度 
function handleFileProgress(event) {
    progressText.text = "已加載 " + (preload.progress*100|0) + " %";
    stage.update();
}

//全度資源加載完畢
function loadComplete(event) {
    console.log("已加載完畢全部資源");
}

setupManifest();
startPreload();