用EaselJs倒計時動畫

Question

我正在嘗試使用easyljs模擬倒計時動畫。 我有一個例子，它應該是什么樣子。 http://jsfiddle.net/eguneys/AeK28/

但這看起來像是駭客，是否有適當/更好/靈活的方法來做到這一點？

換句話說，我如何定義路徑，並使用easyljs繪制該路徑。

這看起來很丑：

     createjs.Tween.get(bar, {override: true}).to({x: 400}, 1500, createjs.linear)
.call(function() {
    createjs.Tween.get(bar, {override: true}).to({y: 400}, 1500, createjs.linear)
 .call(function() {
    createjs.Tween.get(bar, {override: true}).to({ x: 10 }, 1500, createjs.linear)
  .call(function() {
    createjs.Tween.get(bar, {override: true}).to({ y: 10 }, 1500, createjs.linear);
        })
    });
});

Answer 1

您可以使用TweenJS MotionGuidePlugin沿路徑進行補間，而不必具有多個補間。

createjs.MotionGuidePlugin.install();
createjs.Tween.get(bar).to({
    guide: {path: [10,10, 10,10,400,10, 400,10,400,400, 400,400,10,400, 10,400,10,10]}
}, 6000, createjs.linear);

路徑數組基本上是moveTo調用的坐標集，隨后是多個curveTo調用。 坐標將沿着這些調用產生的路徑進行插值。

---

指定路徑數組的一種更模塊化的方法是讓函數使用您聲明的一組點來生成它。

function getMotionPathFromPoints (points) {
    var i, motionPath;

    for (i = 0, motionPath = []; i < points.length; ++i) {
        if (i === 0) {
            motionPath.push(points[i].x, points[i].y);
        } else {
            motionPath.push(points[i - 1].x, points[i - 1].y, points[i].x, points[i].y);
        }
    }

    return motionPath;
}

var points = [
    new createjs.Point(10, 10),
    new createjs.Point(400, 10),
    new createjs.Point(400, 400),
    new createjs.Point(10, 400),
    new createjs.Point(10, 10)
];

createjs.MotionGuidePlugin.install();
createjs.Tween.get(bar).to({
    guide: {path: getMotionPathFromPoints(points)}
}, 6000, createjs.linear);

小提琴