如何从侧面而不是在 Animate CC HTML5 中居中缩放对象？

Question

我设法创建了一个进度条，我使用 queue.on("progress", handleProgress); 更改 scaleX 我命名为 bar_mc.

的动画片段

var queue = new createjs.LoadQueue();
queue.on("complete", handleComplete);
queue.on("progress", handleProgress);
queue.loadFile({
    id: "img",
    src: "images/image.jpg"
});



function handleComplete(evt) {
    console.log("Done!");
    createjs.Ticker.removeAllEventListeners();
};

function handleProgress(event) {
    console.log("Event Loading: " + (queue.progress.toFixed(2) * 100) + "%");
};


createjs.Ticker.addEventListener("tick", handleTick.bind(this));

function handleTick(event) {
    console.log("ticking");
    this.bar_mc.scaleX = queue.progress;
};

有效，但它从中心开始，如 a):

如何让它像 b) 中那样从侧面开始？

此外，这在我尝试时给了我一个错误，但是有没有办法将 this.bar_mc.scaleX 放入 function handleProgress(event ) 而不是使用单独的代码函数来设置动画 bar_mc?

更新： 我确定有一种方法可以使用代码来完成，但我不知道该怎么做。我所要做的就是更改 Animate 中的变换点：

现在 bar_mc 从侧面缩放！

更新 2： 使用了 Muhammed Maruf 关于“fileprogress”的见解并更改了代码。现在它看起来更干净了，无需使用单独的自动收报机来制作 bar_mc 比例。

添加 var root before queue.on 代码使我能够将 root.bar_mc.scaleX 添加到 函数 handleProgress(event) 中，无需更改 "progress":

var root = this;

root.bar_mc.scaleX = 0;

var queue = new createjs.LoadQueue();
queue.on("complete", handleComplete);
queue.on("progress", handleProgress);
queue.loadFile({
    id: "img",
    src: "images/image.jpg"
});

function handleComplete(evt) {
    console.log("Done!");
    // do other stuff
};

function handleProgress(event) {
    console.log("Event Loading: " + (queue.progress.toFixed(2) * 100) + "%");
    root.bar_mc.scaleX = queue.progress;
};

Answer 1

这就是我更新代码的方式。请注意，我使用“fileload”而不是“complete”和“fileprogress”而不是“progress”。

var root = this;
root.bar_mc.scaleX = 0;
var source = "https://loremflickr.com/cache/resized/65535_49259263438_7e86e005b3_h_1280_960_nofilter.jpg?" + Math.random();
var queue = new createjs.LoadQueue();
queue.on("fileload", handleComplete);
queue.on("fileprogress", handleProgress);
queue.loadFile({
    id: "img",
    src: source
});

function handleComplete(evt) {
    console.log("Done!");
    console.log(queue.progress);
    root.bar_mc.scaleX = queue.progress;
};

function handleProgress(event) {
    console.log("Event Loading: " + (queue.progress.toFixed(2) * 100) + "%, " + queue.progress);
    root.bar_mc.scaleX = queue.progress;
};

如何从侧面而不是在 Animate CC HTML5 中居中缩放对象？

How to scaleX an object from the side, instead of centered in Animate CC HTML5?

javascript

html5-canvas

createjs

animate-cc