GraphUI Type & Shape Animation at your Fingertips

Finished a little over the weekend animation work with AnimGroup (main commit), continuing the Graph Type Rendering and UI saga.

UISceneDemo03 demonstrates AnimGroup capabilities:

  • Two repetitive steady scrolling text lines. One text shorter than the line-width and one longer
  • One line of animated rectangles, rotating around their z-axis and accelerating towards their target
  • A text animation assembling one line of text, each glyph coming from a random 3D point moving to its destination all at once including rotation.
  • One line of text with sine wave animation flattening and accelerating towards its target

The mandatory demo video

(Direct video URL, download and share – or just view at original resolution)

(No, there is no stuttering, I intentionally demonstrated the Pause button. See mouse pointer and button-pressed)

I added sound using our GLMediaPlayer ( FFmpeg + JOAL/OpenAL), which is paused and resumed using the Pause button in the demo.

Music: Heaven by Zero V ( 2006-08-14,

I have posted artifacts on the JogAmp forum first, where I update and discuss things.


GraphUI‘s new AnimGroup allows adding multiple AnimGroup.Set of AnimGroup.ShapeData.

AnimGroup.ShapeData holds the actual Shape and its start- and target position as well as its active animation state and an optional user object attachment.

AnimGroup.Set holds a list of AnimGroup.ShapeData as well as the animation properties and states like acceleration and velocity for translation and angular operations.
It also contains the AnimGroup.LerpFunc for linear interpolation of the next position as called via AnimGroup.tick() over all sets.

AnimGroup.LerpFunc is intended to perform the linear interpolation for the next position, either user provided or one of the provided may be used, i.e. TargetLerp, ScrollLerp and SineLerp.

To setup the start- and target position for each AnimGroup.ShapeData, a AnimGroup.ShapeSetup is used, either user implemented or one of the build-in of AnimGroup.addGlyphSetHorizScroll01(..), AnimGroup.addGlyphSetRandom01(..).


Screenshots …


.. enjoy.