A quick way to animate a lot of graphic elements in JavaFX

Question

I am taking the first steps in JavaFX. I want to animate a lot of graphic elements (ellipses, Bezier curves, not images) using javafx. These elements are organized into groups of approximately 10 elements that must be moved together. I am trying to reach 60 frames per second, and I want to move thousands of these elements.

There are at least four ways to do this:

• Using one canvas and its graphic context for drawing directly in each frame.
• Using groups and nodes. Each element has a node value. I like this way because there are many classes that can be easily used to easily draw what I need, and the logical structure of nodes and groups is what I need.
• Each group represents a canvas. Draw its elements in your constructor using the canvas graphic context, and then move all the canvases in each frame.
• Create images with elements that should be glued together, and then move these images. I have not already found how this can be done, but I believe that it is not difficult. Elements may change from time to time, so I will need to recreate some images, but only from time to time.

My question is: which of these methods (or another) would be the fastest way to do this? In particular, does the efficiency of using a large number of nodes and groups affect performance?

Answer 1

I would start with option two, as this seems to fit your needs logically. It is also the easiest and cleanest way to do this using JavaFX. If you later find out that the performance is not good enough, you can try to improve this by using caching along with the appropriate cache hints. For example, you can optimize your code for speed or quality this way. It even works dynamically because you can switch between these cache hints depending on the state of your application. If you switch caching to a group, this has the same effect as drawing in a canvas or image.