Jump to content

Basic JFrame animations


Bobrocket

Recommended Posts

I'm looking into making some simple JFrame animations:

3e6f051dad000ea48adcdc21059be276.gif

 

Going to make a few, make sure it's all nice and polished and clean and then release it on Github.

Goals:

  • Pulling/sliding in all directions (done left & right, have to do up & down now)
  • Alpha-based animations (fading in/out)
  • Size-based animations (shrinking/expanding)
  • Color-based animations (switching from color x to color y)

All of this will be based on JFrames, and I am originally building this for my GUIs.

 

"Alpha" animation:

43f2e37bc8aba87e0e4f01ebc6698d1c.gif

This actually uses linear interpolation (10% decrease each time) instead of actual transparency as this should reduce overall strain on the CPU.

Edited by Bobrocket
  • Like 2
Link to comment
Share on other sites

inspired by the slayer gui i hope doge.png

Whatever helps you sleep at night :doge:

 

Looks neato.

 

However...

Alpha-based animations

Don't go there.

Your CPU will thank me.

They will be there should someone want to use them. Instead of drawing transparent colours, I could manually lerp each pixel by x%. That might take less CPU, albeit with different results.

  • Like 1
Link to comment
Share on other sites

it be like a phone app...on your computer :3 sounds good hope it works out for ya biggrin.png

 

Thanks! Having frames like this not only allows for less confusion by the end user (eg "where is the rest of the info?"), it also ensures that users actually fill out everything and simplifies everything (meaning the user is not overwhelmed at first sight)

 

Working on color/"alpha" animations right now. Will post back soon.

Link to comment
Share on other sites

Some interesting debug information for the sliding animations:

1bfd137abcdce32b9e2fe01a8badeb0d.png

The red "circles" indicate where I clicked the "animate" button, which would perform the animation. In short, it uses copious amounts of CPU.

Why?

Currently, we use BufferedImage#getSubImage(x, y, width, height) to create each frame and then Graphics#drawImage(BufferedImage, x, y, ImageObserver) to draw it. Now, in a form of width 480, you're going to be creating 480 frames. This is obviously not going to be very CPU friendly.

 

The solution, I hear you begging for, is (somewhat) simple: reduce the frames, and make the thread sleep a little bit.

Now, this still uses a fair amount of CPU, however it does not use as much (and for as long)!

By utilising both frame reduction and thread sleeping, I can achieve the same smooth transition while keeping the CPU down a little bit.

9400ee8984a6c40a912baf9232bb5dcd.png

You can see here that the CPU spikes a lot less (we hit 100% consumption by spam clicking the animate button, whereas we top 40% now by spam clicking)

There's also practically no difference in the speed too:

02fd59e8060251afd43f2c8d12dc9c30.gif

 

Another thing to mention for this animation library is that you can chain effects (I can put an alpha/colour effect on a panel as well as have it pull left/right)

  • Like 1
Link to comment
Share on other sites

I'm looking into making some simple JFrame animations:

3e6f051dad000ea48adcdc21059be276.gif

 

Going to make a few, make sure it's all nice and polished and clean and then release it on Github.

Goals:

  • Pulling/sliding in all directions (done left & right, have to do up & down now)
  • Alpha-based animations (fading in/out)
  • Size-based animations (shrinking/expanding)
  • Color-based animations (switching from color x to color y)

All of this will be based on JFrames, and I am originally building this for my GUIs.

 

"Alpha" animation:

43f2e37bc8aba87e0e4f01ebc6698d1c.gif

This actually uses linear interpolation (10% decrease each time) instead of actual transparency as this should reduce overall strain on the CPU.

 

Why not use JavaFX instead of fuckugly Swing? It's been in the API for over and does the same thing plus way more.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...