While I was working I needed to create a button bar that performs more like the Mac OS X Dock using the same magnifying effect. After many tries and many versions later I managed to get the desired effect in Flash, get access to the source code at: https://github.com/juank-pa/dock-menu-as. In this post I explain the math algorithm I used for this effect.
The first idea was to make icon under the cursor bigger and then start making the surrounding icons smaller and smaller using a linear progression. In the next image you can see how icons were shown using this algorithm.
This algorithm has two problems though:
- When and icon grows and shrinks it doesn’t have a smooth movement because of the linear progression.
- There is a side-effect in the algorithm that makes icons appear to be shaking. I’ve seen the same movement in a lot of bars of this type so I guess they are using this linear approach. Some others try to soften this movement with and smooth algorithm but the issue is still in there.