I found this cool project for web developers this week called Animate.css. It has 52 ready to go animations that you can apply to any dom node. I thought having this for JavaFX would be really handy. We are planning on adding CSS animations to JavaFX in the future along with Web standard CSS properties. Once we do that you will be able to use Animate.css directly in JavaFX but I thought it was too cool to make you wait. So I have written JavaFX Transition classes for each of these 52 animations and put the code for them in the FXExperienceControls project. So now all you need to do in your code is:
Button btn = new Button("Button");
new TadaTransition(btn).play();
That will play the animation and clean up after its self. I put together a demo application that shows off all the animations. You can download and run the project Blog-Demos/CannedAnimations from our github repo.
Here is what it looks like, enjoy playing with it. I can’t wait to start using these in the applications I build 🙂
Thanks Jasper! This is awesome!!!
You’re doing some awesome projects.
Cool stuff. Thank you very much.
When I went through the code I noticed a few little issues though.
In the demo, “Bounce out” does not resize the button to its original size when the animation has finished.
For usage in a real project it is not so nice that GoogleWebFontHelper just writes error messages to System.err. The programmer should have a chance to hook that up to his favorite logging framework.
I have noticed that some of the input fields in “…scene.control have a comment saying that the style class is set to “money-field” which is wrong.
Nice article! Thank You!
Hi !
Nice job 🙂
BTW, I’m looking for a way to build a background-color transition, do you know any way to achieve this ? It seems I can’t access CSS properties that easy in JavaFX…
Hi,
which license is this code subject to?
Thanks!
Jasper, you are the MAN.
Thanks for everything!!!
Rob
Awesome!!! Thank You!
I don’t have words to thanks you!
obrigada!
Hello there…
Thank you for your work..
I would like to test the project you made.. so far, I’m only exposed to netbeans… what IDE did you use? I can’t view it via NB. 🙁
Hi Again., Finally got some to work..
how do I use this if a node is set to .setVisible(false)
and then show the node with animation setting its visibility to true?
if i just use just .setVisible(true) the animation doesn’t look good 🙁