如何使用 TweenMax/EaselJS 为对角线设置动画

Question

我有一个星座，我想用线连接。这些线需要从起点到终点进行动画处理。我提供了一张图片来说明我需要的最终结果：

所有这些星星和线条都是使用 easelJS HTML5 canvas 绘制的。假设下面是我目前的代码，"this.paths" 变量包含 x 和 y 位置。

var graphics = this.shape.graphics;

graphics.beginStroke('#ffffff');
graphics.setStrokeStyle(1);

for(var i = 0; i < this.path.length; i++)
{
    var path = this.path[i];

    graphics.moveTo(path[0].x / 2, path[0].y / 2);
    graphics.lineTo(path[0].x / 2, path[0].y / 2);
    graphics.lineTo(path[1].x / 2, path[1].y / 2);
}

this.shape.alpha = 0.6;

提前致谢。

Answer 1

您需要的一切都已在此演示中
http://www.createjs.com/demos/tweenjs/tween_sparktable
您有一组坐标，例如 (x1,y1) 和 (x2,y2)。现在您需要使用直线方程 并逐点绘制直线以获得流畅的动画效果，只需延迟播放即可获得满意的效果。说真的，该演示涵盖了所有这些以及更多内容，您甚至可以在那里进行编辑！我稍微玩了一下代码，这是你的对角线，只需将这段代码粘贴到那里即可运行

var stage;
var prevPoint, dataProvider, rect = new createjs.Rectangle(20,20,700,360);
var bar, container, currentClip;
var selectedFunction, selectedItem, selectedIndex = 0;
var resetRuninng = false, startTimeout;
var clips = [];
var activeTween;

function init() {
    stage = new createjs.Stage("testCanvas");

    var Ease = createjs.Ease; // shortcut.
    dataProvider = [
        {type: "divider", label: "Ease Equations"},

    ];

    var eases = document.getElementById("eases");
    var cloneElement = document.createElement("a");
    cloneElement.href = "#";

    for (var i = 0, l = dataProvider.length; i < l; i++) {
        var item = dataProvider[i];

        if (item.type == "divider") {
            element = document.createElement("span");
            element.innerHTML = item.label;
            eases.appendChild(element);
            continue;
        }

        var element = cloneElement.cloneNode(true);
        element.id = i;
        element.onclick = selectItem;
        element.innerHTML = item.label;
        eases.appendChild(element);

        if (item.label == "linear") {
            selectedItem = element;
            element.className = "selected";
        }
    }

    createjs.Ticker.setFPS(60);
    createjs.Ticker.addEventListener("tick", tick);

    prevPoint = new createjs.Point(rect.x, rect.y);

    container = stage.addChild(new createjs.Container());
    bar = container.addChild(new createjs.Shape()
                                     .set({alpha:0.7, x:rect.x, y:rect.y}));
    bar.graphics.f("#000").setStrokeStyle(1)

    stage.update();

    startTimeout = setTimeout(run, 1000);
}

function stop() {
    Ticker.off("tick", tick);
}

function selectItem() {
    clearTimeout(startTimeout);
    if (clips.length > 0) { fade(); }

    if (selectedItem != null && selectedItem != this) {
        selectedItem.className = "";
    }

    selectedItem = this;
    selectedIndex = this.id;
    selectedItem.className = "selected";
    selectedFunction = dataProvider[selectedIndex].type;

    resetRuninng = true;
    //createjs.Tween.get(bar, {override: true}).to({x: rect.x}, 500).call(resetComplete);
    return false;
}

function run(easeType) {
    currentClip = stage.addChild(new createjs.Shape());
    clips.push(currentClip);
    prevPoint.setValues(rect.x, rect.y);
    activeTween = createjs.Tween.get(bar, {override: true}).to({x: rect.x+rect.width}, 1500, easeType);
}

function resetComplete() {
    bar.x = rect.x;
    resetRuninng = false;
    currentClip = null;
    prevPoint.setValues(rect.x, rect.y);

    run(selectedFunction);
}

function tick(event) {
    if (!resetRuninng && currentClip != null) {
        var hue = (selectedIndex / dataProvider.length) * 360;
        var g = currentClip.graphics
                .setStrokeStyle(1, "round", "round")
                .beginStroke(createjs.Graphics.getHSL(hue, 50, 50))
                .moveTo(prevPoint.x, prevPoint.y);

        prevPoint.x = bar.x;
        prevPoint.y = rect.x+ activeTween.position/1500 * rect.height;

        g.lineTo(prevPoint.x, prevPoint.y);

        stage.update(event);
    } else if (resetRuninng) {
        stage.update(event);
    }
}

function fade() {
    for (var i = 0; i < clips.length; i++) {
        var clip = clips[i];
        createjs.Tween.get(clip, {override: true})
                .to({alpha: clip.alpha - 0.4}, 1000)
                .call(fadeTweenComplete);
    }
}

function fadeTweenComplete(tween) {
    var clip = tween._target;
    if (clip.alpha <= 0) {
        stage.removeChild(clip);
        var index = clips.indexOf(clip);
        clips.splice(index, 1);
    }
}

更新:

这是另一种基于简单刻度方法的方法

http://jsfiddle.net/t21v9bo4/

如何使用 TweenMax/EaselJS 为对角线设置动画

How to animate a diagonal line with TweenMax/EaselJS

html

canvas

easeljs

gsap