用H5做动画可能会用到前端游戏引擎,知名的有CreateJS、PixiJS。CreateJS 是Adobe公司出品,虽在性能上没有PixiJS快,但功能比较全(PixiJS没有音频播放)主要组件有以下四个:
EaselJS: CreateJS 核心库,提供在HTML5 Canvas 上轻松创建操控元素的功能。
TweenJS: 用于提供平滑动画效果
SoundJS: 声音播放器
PreloadJS: 资源加载器
1.PreLoadJS的使用方法:
//预加载资源文件
var manifest = [
{id:"image1", src:"img/music_on.gif"},
{id:"image2", src:"img/music_off.gif"}
]
queue = new createjs.LoadQueue();
queue.on("complete", handleComplete, queue);
queue.on("progress", handleProgress, queue);
queue.loadFile({id:"bgm", src:"sound.mp3"}) //预加载音频文件
queue.loadManifest(manifest);
//如何使用预加载的文件
var bg = new createjs.Bitmap(queue.getResult('image1'));
var sound = queue.getResult('bgm')
sound.volume=0.8;
sound.play();