Soccer Simulation

[sajjadkharrazi 0 Likes (Newbie)]

Hi,

i have an json file that contain 22 second of soccer match that contains data of 11 Home Player and 11 Away Player and 3 Referee and a Ball frame by frame.

for example: {"x":449,"y":358,"type":"H","jerseyNumber":"19"} ( type:H means Home)...

 

what is the best way to simulate this soccer match with pause and resume button in greensock.

 

sorry for my bad grammer     

[Carl 9,066 Likes (Superhero)]

Hi and welcome to the GreenSock forums,

 

Please understand that we can't advise you on how to organize your data or set up your interaction logic. But in simple terms the best thing to do is just loop through your data and insert tweens into a timeline based on that data. Once all the animations are in a timeline it will be very easy to play and pause. 

Here is a rough demo:

 

http://codepen.io/GreenSock/pen/rxyeWo?editors=001

[OSUblake 9,990 Likes (Superhero)]

Carl beat me to it. 

 

Your didn't have any time data, which seems critical, but here's another example.

See the Pen XXMXBY by osublake (@osublake) on CodePen

[sajjadkharrazi 0 Likes (Newbie)]

thank you so much!

 

i can add time to json file like your example and it's not a problem!

but in your example how can i add seek animation?

 

tnx

[OSUblake 9,990 Likes (Superhero)]

Just like the play and pause buttons are doing.

someElement.addEventListener("click", function() {
  
  // Start at 1 second
  tl.seek(1);
});

anotherElement.addEventListener("click", function() {
  
  // Start at 25% completed
  tl.progress(0.25);
});

[sajjadkharrazi 0 Likes (Newbie)]

i could create nice timleline simulation with your helps!

 

but another problem is:

i want add or remove a player from json file, for example add a player from time 00:10 to 00:18 or remove player with jerseyNumber 19 from time 00:10 to 00:15.

 

 

how can i do it?

[OSUblake 9,990 Likes (Superhero)]

You could add a visible property to your json.

 

See the Pen 2227a749f655f70fc802d32c528b6b62 by osublake (@osublake) on CodePen

[sajjadkharrazi 0 Likes (Newbie)]

no, i want dynamically add or remove player in simulation!

 

for example add player from 00:10 to simulation and then when time equal 00:18 remove that player from simulation

[OSUblake 9,990 Likes (Superhero)]

Dynamically adding and removing animations is going to require a lot more work. You're going to have to come up with your own logic to handle that. I think hiding and showing the players using autoAlpha is going to be the easiest way to do that. You could also create a separate timeline for each player, and then you can add or remove them from a main timeline. But you would still need to hide/show them using something like autoAlpha.

 

Here's an example of that. You can add and remove the third timeline whenever you want, and it will sync up with the other timelines. You could add your own callbacks to the timeline to do something like that.

 

See the Pen fa778e7c1622e6a85c9de438fdab4319?editors=001 by osublake (@osublake) on CodePen

[Carl 9,066 Likes (Superhero)]

I have to echo Blake's sentiment. Adding and removing players is certainly possible but will require a lot more logic that has very little to do with GSAP.

We have to keep our support focused on answering questions related to how the GSAP API functions. Unfortunately, it just isn't feasible for us to walk you through every difficult part of your project when it comes up.