Creating a Swing Dashboard Widget - Part 8 (Close Animation)

To prove that its possible to produce, fairly easily, and faithful interpretation of a UI it's important to get the little touches right.

When I added the close button I mentioned that the close action has a nice swoosh animation as the widget is removed but conveniently didn't implement it.

So I took a shot, and it actually it wasn't too bad.

There's already the basis for it:
- The code that is used in the flipping animation snaps an image of a component and transforms it.
- The marvelous Filter library from JHLabs provides various image distortion filters, or if you want to use no libraries and are good at matrix maths then roll your own BufferedImageOp )

I factored out the general component animation from the flipping animation code to create a simple framework that can visually filter a component over time - just supply the distortion or adjustment.

Using the Image Processing Editor I tried out different filters with different setting. It looks like Dashboard is using a Pinch filter to distort the widget away to nothingness.

The distortion code is quite small: use a pinch filter and gradually adjust the pinch amount and radius over time (once per timerTick()). The same image is painted every few milliseconds, and using this filter it displays the animation.
Oh, and the widget should fade over time too, so gradually reduce the alpha:
<br />public class CloseTransition extends AnimatedTransition<br />{<br /> private float alpha = 1.2f;<br /> private float alphaStep = 0.02f;<br /> private PinchFilter pinchFilter = new PinchFilter();<br /><br /> public CloseTransition(JComponent startComp, JLayeredPane layerPane)<br /> {<br /> super(startComp, startComp, layerPane);<br /><br /> pinchFilter.setCentreX(0.01f);<br /> pinchFilter.setCentreY(0.1f);<br /> pinchFilter.setRadius(Math.min(startComp.getWidth(),<br /> startComp.getHeight()));<br /> }<br /><br /> protected void updateInterImage()<br /> {<br /> }<br /><br /> protected boolean timerTick()<br /> {<br /> pinchFilter.setRadius(pinchFilter.getRadius() * 1.07f);<br /> pinchFilter.setAmount(pinchFilter.getAmount() * 1.05f);<br /> alphaStep *= 1.07;<br /> alpha = Math.max(0f, alpha - alphaStep);<br /> return alpha <= 0f;<br /> }<br /><br /> protected void paintInterImage(Graphics2D g2, int width, int height)<br /> {<br /> g2.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER,<br /> Math.min(1f, alpha)));<br /> g2.drawImage(startImage, pinchFilter, 0, 0);<br /> }<br />}<br />
Sccchhhuuuupppppppp.....


Webstart the demo (Java 6 update 10 is needed or it'll look funny). Hold 'Alt' to get the close button to appear.