Site archive. SpicyNodes was active 2005-2018.

Home > Archive > Developers/reference > How Spicynodes works > Animation Effects

The animation effects that enliven SpicyNodes seek to enhance the user experience by mimicking the physical world. The slow-in, slow-out timing is a technique widely used for visualization in order to “humanize” machine-generated output. Accelerating an action before its plateau and decelerating it at run time provides a user with a tangible feel for the event as well as a hint of the action so that he or she can better interpret it.

The acceleration effect is performed by using an arctangent function in the process of calculation of the animation keyframes (Figure 8).

Figure 8. Acceleration of nodes motion. By changing the numeric parameters, we can obtain different acceleration shapes.

During the animation there are no geometry calculations. The nodes placement along animation frames is extracted from the keyframes array, so the path of all visual elements is planned before the animation starts. Using this approach prevents relatively complex real-time calculations for many displayed nodes in the Adobe Flash Player environment, thus maintaining the smooth flow of animation.

Changing focus leads the display to a new layout, which in most cases reveals some sets of nodes that were not present in the previous layout. In order to help the user focus on the new node during animation, removing nodes from the new layout is accomplished on a gradient scale. The previously visible nodes disappear during the animation in few steps, depending on their distance to the new focus node.

Some incarnations of the SpicyNodes customizable skins bring additional effects to the animation. For example, the nodes may grow or shrink during animation depending on their distance to the new focus, or fluidly change color.