使用EaselJS和TweenJS对在屏幕上绘制的线进行动画处理 [英] animating a line being drawn on the screen with EaselJS and TweenJS

问题描述

试图找到最佳方式（或任何方式）为正在绘制的线设置动画。这只是一个案例研究，我将如何在屏幕上绘制几条线，从而创建最终图像的简介动画。目前，我唯一能做的就是创建一个宽度和高度为1x1的矩形，然后在该对象的scaleX之间进行补间，但是我遇到的问题是配准点，因此该行移动为当我只希望刻度尺增加宽度而将其保留在初始位置时，也可以使用刻度尺。 （基本上将左侧固定下来）是否没有办法单独调整矩形的宽度？这一切都让人觉得有些棘手，但我现在只是在尝试。 （这只是我学习EaselJS的第3天：P）理想情况下，我想可以使用一种方法来为图形对象的lineTo方法设置动画，但是在这种方法上我再也没有运气了。这是到目前为止我得到的：

Trying to find the best way (or any way) to animate a line being drawn. This is just a case study for how I would draw several lines etc to the screen creating an "intro" animation of a final image. At the moment the only thing I've figured I can do is create a rectangle shape with width and height of 1x1 and then tween the scaleX of that object, but the issue I have with that is the registration point, so the line moves as well as scales when I would only want the scale to grow its width leaving it at it's initial position. (Basically pinning the left side down) Is there no way to tween the width of a rectangle alone? This all feels a bit hacky, but I'm just experimenting for now. (this is only day 3 of my learning EaselJS :P) Optimally, I'd imagine there would be a way to animate the lineTo method of a graphics object but I've have no more luck doing that over this method. Here's what I've got so far:

<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/

And here's a Fiddle to demonstrate: http://jsfiddle.net/vanPg/

有人对如何实现这一目标有何想法？

Any thoughts on how to accomplish this? Tutorial links, API links/references, and general ranting welcome.

推荐答案

经过更多研究后，我发现我可以做我想做的事通过使用 Raphael 和 GSAP 进行补间。

After more research I've discovered I can do what I need much easier by using Raphael along with GSAP for tweening.

这篇关于使用EaselJS和TweenJS对在屏幕上绘制的线进行动画处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！