关于javascript：使用EaselJs倒计时动画


Countdown animation with EaselJs

我正在尝试使用easyljs模拟倒计时动画。我有一个例子，它应该是什么样子。 http://jsfiddle.net/eguneys/AeK28/

但这看起来像是黑客，是否有适当/更好/灵活的方法来做到这一点？

换句话说，我如何定义路径，并使用easyljs绘制该路径。

这看起来很丑：

1
2
3
4
5
6
7
8
9
10
     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);
        })
    });
});
相关讨论

您可以使用TweenJS MotionGuidePlugin沿路径进行补间，而不必具有多个补间。

1
2
3
4
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调用。坐标将沿着这些调用产生的路径进行插值。

一种用于指定路径数组的模块化方法是使函数使用您声明的一组点生成路径数组。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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);

FIDDLE

相关讨论