javascript - 如何使用 CreateJS 或其他 Javascript 解决方案创建条形动画

Question

我想创建一些像链接中那样上下生长的动画条。

http://www.createjs.com/soundjs

我不确定如何使用 CreateJS 来执行此操作。

或者其他 javascript 解决方案也将受到赞赏。请帮忙。

Answer 1

PreloadJS 存储库中有包含条形预加载器的示例:

• http://createjs.com/demos/preloadjs/preloadqueue
• http://createjs.com/demos/preloadjs/preloadimages

可以在GitHub中查看源码:https://github.com/CreateJS/PreloadJS/

第一个示例使用 HTML 和 jQuery 设置进度条的宽度 https://github.com/CreateJS/PreloadJS/blob/master/examples/PreloadQueue.html

div.children("DIV").width(event.progress * div.width()); // Set the width the progress.

第二个示例使用 EaselJS 和形状的 scaleX 属性设置进度条的宽度:

bar = new createjs.Shape();
bar.graphics.beginFill(loaderColor).drawRect(0, 0, 1, barHeight).endFill();
bar.scaleX = event.loaded * loaderWidth; // In a progress handler

这些示例的内容是使用 PreloadJS 加载的，它会调度具有 loaded、total 和 progress 属性的“进度”事件。

希望对您有所帮助。