화면에서 이젤 및 TweenJS로 그려진 선을 애니메이션으로 표현

Question

그려지는 선을 애니메이션하는 데 가장 좋은 방법을 찾으려합니다. 이것은 최종 이미지의 "소개"애니메이션을 만드는 화면에 여러 줄 등을 그릴 방법에 대한 사례 연구 일뿐입니다. 지금 내가 할 수있는 유일한 방법은 너비와 높이가 1x1 인 직사각형을 만든 다음 해당 객체의 scaleX를 트위닝하는 것입니다.하지만 그 점과 관련된 문제는 등록 포인트이므로 줄이 다음과 같이 이동합니다. 잘 스케일을 원할 때 스케일을 초기 위치에 두면서 너비를 늘려야합니다. (기본적으로 왼쪽 아래로 고정) 사각형의 너비를 트위닝하는 방법은 없습니까? 이 모든 것은 약간 해키 한 느낌이지만, 지금은 실험 중입니다. (이것은 나의 학습 EaselJS : P의 단지 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 패밀리를 계속 사용하려는 경우.

이 시도

의 SO 링크에서

Countdown animation with EaselJs

이

내용 :

대신 여러 트윈을 갖는 경로를 따라 트위닝하는 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

희망!