JavaFX – Radial Menu – Movie inspiration

Hi,

A quick post to talk about my last radial menu trial.

This one is a remake of the menu you can see on the top left corner of this movie web site http://www.loopermovie.com/site/

It took me some time to understand how I could make the text at the right place, correctly aligned and looking smooth. If you need some information on this, do not hesitate to contact me. The secret is some trigonometry notions, some transformation matrix skill and a little bit of JavaFX API knowledge :)

I still have some problem with the animation that is not as smooth as on the site. I think I made too many parallel animations. I will have to try to rationalize it see if it improves the smoothness of the menu animations.

Anyway here is the video :

It also allows me to announce the creation of a JavaFX library dedicated to radial menu. It will offer the base radial menu item and many built-in example of radial menu. It shall allow coder to modify for their need the content of the built-in example. Stay in touch to have more information on this.

Next try ? Maybe Windows 8 radial menu…

LoNee

5 comments

    1. Hi,

      Thanks ! Yes the source code will be available soon trough a dedicated github project.

      Do not hesitate to contact me contact at mrlone dot com !

      The trig is very simple !

    1. Hi,

      This should not be complex since JavaFX offers built-in Translation animation (see javafx.animation.TranslateTransition) that works on a javafx.scene.Node translateX and translateY properties.

      I let you give it a try, it shall be a 5 lines of code :)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">