Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
thefyrewire

How to dynamically create, animate and remove objects? (Animate CC)

Recommended Posts

Note: when you open the Codepen scroll down to the bottom

 

 Hello there!

 

I'm a JS/HTML5 newbie trying to animate an IRC chat using HTML5/JS in Animate CC. My goal is to dynamically create rounded rectangles with text from the chat and load them onto the canvas from the bottom. New messages would pop up from the bottom of the list and push the other messages upwards.

 

Currently, I have the WebSocket set up and listening to messages. When it detects a message it sends it to the queue where it checks if any animation is currently playing, then if not it generates a rounded rectangle and the message text and animates it coming up from the bottom of the screen. My problem now is, if I send another message, another instance of this rounded rectangle is created and animates on top of the old one.

 

I tried instead pushing each object pair (the text and the rectangle) into an array and then accessing it from there, which works, however, I'm having a little trouble optimising it (I attached a codepen to demonstrate the effect I'm going for and the bloated spaghetti code) (and I don't know if this is the best way to do things). The messages would also need to fade out to the side after a certain amount of time, which would mean new messages need to start lower down again. So, I'm thinking maybe each message has some kind of timer that animates it being removed and removes it from the array so that newer messages can overwrite them? I'm not sure.

 

Does anyone have any suggestions for how I could approach this? Any help would be greatly appreciated, thank you!

 

EDIT: This was my attempt at iterating: (the main attached one is what I'm trying to achieve without manually specifying the Y position, as the height of boxes will be dependent on the size of the message).

See the Pen BmrmRe by thefyrewire (@thefyrewire) on CodePen

 

See the Pen ooqGQw by thefyrewire (@thefyrewire) on CodePen

Link to comment
Share on other sites

26 minutes ago, thefyrewire said:

 Hello there!

 

I'm a JS/HTML5 newbie

 

You couldn't be that much of newbie of you're messing around with sockets. :ugeek:

 

So how is this supposed to work? What are the rules?

 

Is there a limit on how many messages can be displayed at one time?

What happens if 100 messages come in around the same time?

How long does a message stay active for?

Can a user remove/close a message?

 

 

Link to comment
Share on other sites

4 minutes ago, OSUblake said:

 

You couldn't be that much of newbie of you're messing around with sockets. :ugeek:

 

 

 

It's amazing what you can learn on the internet these days! :-P

 

7 minutes ago, OSUblake said:

So how is this supposed to work? What are the rules?

 

Is there a limit on how many messages can be displayed at one time?

What happens if 100 messages come in around the same time?

How long does a message stay active for?

Can a user remove/close a message?

 

 

It will be an overlay, so most likely the max number of messages will be if it exceeds a certain height or I could just make the max the height of the screen. If it exceeds a certain height I'll probably force the message to clear instead of waiting for the timer.

 

The chat definitely won't be that busy, but in the case of preparing for all eventualities, I imagine the messages would pop up, shoot up to the max height and be forcibly removed.

 

Messages will probably be active for a couple seconds before fading and sliding out to the left, and users can't remove messages once it's been sent.

 

 

Link to comment
Share on other sites

Ok. I think I have a good understanding of the behavior you want. I'll make something for you later today to help you out.

 

In the meantime, here are some things to look into.

 

I'm not familiar with createJS/easelJS, but there should be some type of container object that will allow you to put your rectangle and text inside of. So instead of trying to move 2 objects at the same time, you can just move them as a group.

 

And to speed up rendering, find out how to cache your graphic and text objects as a bitmap, like in this demo.

https://www.createjs.com/demos/easeljs/cache

 

I noticed this in your code.

 

for (var i in messageArray) {
  ...
}

 

Don't use for...in loops on arrays as that can lead to all sorts of problems. Instead, use a regular for loop, the newer for...of loop, or the array forEach method.

 

Arrays are good for storing stuff, and you're storing a lot of arrays inside your arrays.

messageArray.push([roundRect, text]);

// And then accessing them later on like this
TweenMax.to(messageArray[0][0], 2, {y: 565, ease: Elastic.easeOut});
TweenMax.to(messageArray[0][1], 2, {y: 600, ease: Elastic.easeOut});

 

There's nothing inherently wrong with that, but when working with GSAP and canvas, it might be better to work with objects instead. So the code above could be reworked to look like this.

 

messageArray.push({
  rect: roundRect,
  text: text
});

// And then accessing them later on like this
TweenMax.to(someMessage.rect, 2, {y: 565, ease: Elastic.easeOut});
TweenMax.to(someMessage.text, 2, {y: 600, ease: Elastic.easeOut});

 

And if you can figure out hot to put them inside a group, you would need only 1 tween there instead of 2.

  • Like 3
Link to comment
Share on other sites

Thank you! I took a look at the containers and implemented them, so now I push that into the array and can tween just the container instead of the rounded rectangle and text, which already looks much cleaner, thank you!

 

I'm not too familiar with using objects in arrays so will definitely read up on that tomorrow, likewise with caching.

 

See the Pen JOvOGE by thefyrewire (@thefyrewire) on CodePen

 

 

 

Link to comment
Share on other sites

Sorry about the delay. It was a major holiday in the US, and I didn't get anything done. I will make that demo for you tonight thought!

  • Like 1
Link to comment
Share on other sites

Hi @thefyrewire

 

I made a demo that shows how you could set this up. I don't know createJS/easelJS, so I had to use PixiJS. It's API is similar, so you should be able to tell what's going on to a point. I know you said you're new to JavaScript, so the object stuff might be a little confusing at first.

 

Here's a quick overview of how it works. When you create a new message it is added to a queue. The ticker runs a function to check if any messages are in the queue. If so, it moves all the placed messages up, and then places the new message. Once a message is placed, a timer using TweenLite.delayedCall() on the message object starts. Once that expires, the message is removed. 

 

See the Pen xPaQpx?editors=0010 by osublake (@osublake) on CodePen

 

 

  • Like 4
Link to comment
Share on other sites

Firstly, I hoped you had a great Thanksgiving! And secondly, thank you so much for taking the time to create this. I'm going to go over it and deconstruct it until I understand every part. Thanks again, this is really helpful and I appreciate it greatly.

  • Like 2
Link to comment
Share on other sites

45 minutes ago, thefyrewire said:

I'm going to go over it and deconstruct it until I understand every part. 

 

I wish more people had that attitude!

 

Let me know if you need any clarification about what's going on. The Pixi stuff should be easy to understand as it seems to be pretty close to easelJS. The object stuff might take some time getting used to. 

 

Here's a simple example that show's the pattern I'm using to create the message objects.

 

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

Person.prototype.greet = function() {
  console.log("Hello, I am " + this.firstName + " " + this.lastName);
};

var person1 = new Person("Billy", "Bob");
var person2 = new Person("Jane", "Doe");

person1.greet(); // => Hello, I am Billy Bob
person2.greet(); // => Hello, I am Jane Doe

 

 

See the Pen LOgYpw?editors=0011 by osublake (@osublake) on CodePen

 

  • Like 5
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×