Анимация обратного отсчета с EaselJs

Я пытаюсь смоделировать анимацию обратного отсчета, используя мольберт. У меня есть пример того, как это должно выглядеть. http://jsfiddle.net/eguneys/AeK28/

Но это похоже на взлом, есть ли правильный/лучший/гибкий способ сделать это?

Другими словами, как я могу определить путь и нарисовать этот путь с помощью станков.

Это выглядит некрасиво:

     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);
        })
    });
});

javascript animation path easeljs jstween
person Community    schedule 28.01.2014    source источник
comment
Вы пытаетесь создать индикатор выполнения или что-то вроде Fiddle?   -  person Andrew    schedule 30.01.2014
comment
Что-то вроде индикатора выполнения с пользовательским путем.   -  person    schedule 30.01.2014

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете использовать 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);

FIDDLE

person joelrobichaud    schedule 30.01.2014
comment
есть ли способ сохранить видимость вашего пути в точках, в которые он уже попал? например индикатор выполнения - person Daniel Tate; 14.01.2016