Question

我是一名JS / HTML5新手试图在Animate CC中使用HTML5 / JS动画一个IRC聊天。我的目标是使用聊天中的文本动态创建圆角矩形，并从底部将它们加载到画布上。将从列表底部弹出新消息并向上推送其他消息。

目前，我已经设置了WebSocket并监听消息。当它检测到一条消息时，它会将其发送到队列，在那里它会检查当前是否正在播放任何动画，如果没有，它会生成一个圆角矩形和消息文本，并将其设置为从屏幕底部显示。

我现在的问题是，如果我发送另一条消息，则会创建另一个圆角矩形的实例，并在旧的矩形之上设置动画。我不确定如何在动态创建旧消息的属性时将其向上推送。

我已经考虑过使用一定长度的数组（以便不占用整个屏幕），但实现它时遇到了一些麻烦。我还考虑过创建一个全局变量，其中当前屏幕上的消息数量可以随每个新实例递增，但是，这只对向上堆叠有用。它不会向上推动列表本身。

有没有人对我如何处理此事有任何建议？非常感谢任何帮助，谢谢！

编辑：我到目前为止的一些部分。在底部，生成了消息，但我无法再次访问它。

pubsub.listen('message', function (e) {
   // when I get a message, add it to the queue to be animated
   var msg = new Message(e.from, e.text);
   messageQueue.add(msg);
   checkMessages();
)};

function checkMessages() {
    //check if a message is already being animated
    //if not, send call the MessageQueue to dispatch
    //else, wait for animation to finish
}

MessageQueue.prototype.dispatch = function () {
    var msg = this.messages[0] //animate the latest message
    if (msg) {
        generateMessage(msg.from, msg.data); //dynamically create a message
        this.messages.splice(0, 1); //remove this from queue
    }
}

function generateMessage(msgFrom, msgData) {
    animActive = true; //animation now in progress

    var roundRect = new createjs.Shape();
    roundRect.graphics.beginFill("red").drawRoundRectComplex(0, 0, 400, 50, 25, 25, 25, 25);
    roundRect.x = 100;
    roundRect.y = 820;
    stage.addChild(roundRect);

    var text = new createjs.Text(msgData, "15px Gotham", "#ffffff");
    text.x = 150;
    text.y = 855;
    text.textBaseline = "alphabetic";
    stage.addChild(text);

    TweenMax.to(roundRect, 2, {y: 620, ease: Elastic.easeOut});
    TweenMax.to(text, 2, {y: 655, ease: Elastic.easeOut});

    setTimeout(animDeactivate, 2100); //animation has ended
}

动态创建文本/形状并为其设置动画（HTML5 / JS）

0 个答案: