使用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在屏幕上绘制一条线进行动画制作

回答

相关问题