анимация линии, нарисованной на экране с помощью EaselJS и TweenJS

Question

Попытка найти лучший способ (или любой способ) для анимации линии, нарисованной. Это всего лишь пример того, как я нарисую несколько строк и т. Д. На экране, создавая анимацию «intro» конечного изображения. В настоящий момент единственное, что я могу сделать, это создать прямоугольную форму с шириной и высотой 1x1, а затем подстроить масштаб X этого объекта, но проблема, с которой я связан, - это точка регистрации, поэтому строка перемещается как а также масштабы, когда я хотел бы, чтобы шкала увеличивала свою ширину, оставляя ее в исходном положении. (В основном, закрепление левой стороны вниз) Нет ли способа обойти ширину прямоугольника в одиночку? Это все немного взломанно, но сейчас я просто экспериментирую. (это только день 3 моего обучения.). Оптимально, я бы предположил, что был бы способ оживить метод lineTo графического объекта, но мне больше не удастся сделать это над этим методом. Вот что у меня до сих пор:

<canvas id="canvas" width="500" height="500"></canvas> 

var canvas = document.getElementById('canvas'), 
stage = new createjs.Stage(canvas); 

function init() { 
    var line = new createjs.Shape(); 
    line.graphics.beginFill('#000').drawRect(10, 10, 1, 1); 

    // setting registration point doesn't work 
    line.regX = 0; 

    // trying to set the x = 0 on each to() doesn't work 
    // tween = createjs.Tween.get(line, {loop: false}).to({scaleX: 20, x: 0}, 2000).wait(1000).to({scaleX: 1, x: 0}, 2000); 

    // is there no way to tween the width itself of the rectangle?? it actually makes sense that scaleX would produce such a result 
    // but i can't seem to find any other way to animate a line being drawn 
    tween = createjs.Tween.get(line, {loop: false}).to({scaleX: 20}, 2000).wait(1000).to({scaleX: 1}, 2000); 
    stage.addChild(line); 
    createjs.Ticker.addEventListener('tick', handleTick); 
} 

function handleTick() { 
    stage.update(event); 
} 

init(); 

А вот скрипку, чтобы продемонстрировать: http://jsfiddle.net/vanPg/

Любые мысли о том, как это сделать? Ссылки на учебники, ссылки/ссылки API и общий приветственный прием.

Answer 1

После исследования я обнаружил, что могу сделать то, что мне нужно намного проще, используя Raphael вместе с GSAP для твинирования.

Answer 2

В случае, если вы хотите придерживаться семьи CreateJS.

Попробуйте это,

Countdown animation with EaselJs

Содержание по ссылке SO:

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

Надеется, что это помогает!