使用EaselJS和TweenJS在屏幕上繪製一條線進行動畫製作

試圖找出繪製線條的最佳方法（或任何方法）。這只是一個案例研究，我將如何在屏幕上繪製幾行代碼，創建最終圖像的「前奏」動畫。目前我唯一能做的事情就是創建一個寬度和高度均爲1x1的矩形形狀，然後調整該對象的scaleX，但是我遇到的問題是註冊點，因此該行將以以及尺度，當我只希望尺度增加其寬度而使其處於初始位置時。（基本上固定左側）無法單獨調整矩形的寬度嗎？這一切都感覺有點冒失，但我現在只是在嘗試。（這只是我學習EaselJS：P的第3天）最好的，我想象會有一種方法來爲圖形對象的lineTo方法制作動畫，但我沒有更多的運氣來做這個方法。下面是我到目前爲止有：使用EaselJS和TweenJS在屏幕上繪製一條線進行動畫製作

<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鏈接/參考，以及一般的歡迎聲。

來源

2013-11-22 ocergynohtna

選中此鏈接：https：//github.com/CreateJS/TweenJS/issues/25。你的問題似乎相關。 –

是的，看到這部分是什麼導致了我的社區。經過更多的研究，我發現我可以通過使用Raphael（http://raphaeljs.com/）和GSAP進行補間（http://www.greensock.com/gsap-js/） – ocergynohtna

經過更多的研究，我發現我可以通過使用Raphael以及GSAP補間來做我所需要的事情。

來源

2013-11-25 22:28:08 ocergynohtna

-1

如果你想堅持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

希望這有助於！

來源

2015-10-02 10:31:46

雖然這個鏈接可能回答這個問題，但最好在這裏包含答案的重要部分，並提供供參考的鏈接。如果鏈接頁面更改，則僅鏈接答案可能會失效。 – SuperBiasedMan

我剛剛從原始SO帖子複製了該鏈接內容。謝謝@SuperBiasedMan –

使用EaselJS和TweenJS在屏幕上繪製一條線進行動畫製作

回答

相關問題