This morning I've found an interesting effect on the web that shows a rollover effect between images. I asked myself how much work could it be to create one of these effects in JavaFX...well it did not take long and it's worth to share it with you.
So here is a little screenshot of the effect in JavaFX...
As you might guess I take two images of the same size, cut them into pieces and animate these pieces. The most complicated part was getting the animation of both sides correctly. Ok ok, I agree an image doesn't really show the effect and therefor I captured a little screenvideo that you could find on YouTube.
I'm pretty sure that the code could need some more love but to be honest I was only interested in how long it would take to create the effect so feel free to improve it.
In the demo I simply load two images of the same size and split them into 20 tiles. In my code you could adjust the number of tiles and also the duration of the animation but that's it. After each animation I will toggle the background and the foreground image so this is the point where you might want to add a new image to the background that will come to the front after next animation. So you could use this effect for your dia show etc.
To make it easier for you I've put the code in a repo on bitbucket so fork it if you like...
And that's it again...so keep coding...
Sweet. I wonder if/how this could be done as a custom effect, as soon as the API becomes public. Sometime. It is really smooth and not even optimized, e.g. operations on an image instead of transforms of viewports of x*y imageviews...
ReplyDelete