首页 > 代码库 > CreateJSのTweenJS、SoundJS

CreateJSのTweenJS、SoundJS

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
}

 

CreateJSのTweenJS、SoundJS