Animations and Transitions

In taccgl™ terminology an Animation is a collection of Transitions. More precisely an Animation includes initially all transitions that had been started with transition.start before taccgl.start was used to play the Animation. If further transitions are started, while the Animation is still playing, these transitions are added to the Animation.

After all transitions of the Animation have finished, the complete Animation is finished. All transitions started afterwards no longer belong to the Animation but to the next Animation (starting a new animation if required.)

In most cases, it is irrelevant, if two transitions belong to the same animation or to different animations. In any case, when you define and start transitions and finally call taccgl.start, the new transitions are run. If this happens while no Animation is running, a new Animation is started. If it happens while an Animation is running the new transitions are appended to the running animation and played in parallel to the already running Animation. There are subtle differences, nevertheless, that we will discuss below in section "Running an Animation: Rendering Loop".

Updating an Animation

Never forget the double start, transition.start for each transition and taccgl.start for the Animation, even if an Animation is running already. transition.start must be called for every transition, to indicate that all parameters are set and the final taccgl.start to start playing of the Animation. If the animation is playing already taccgl.start instead of starting updates the data of the running animation in the GPU and therefore is also essential. Note, however, that updates of transitions might take effect immediately without transition.start or taccgl.start, e.g. for effects that are not performed by the GPU or in the canvas 2D fall back mode.

Note that for performace reasons you should call taccgl.start only when needed. It transferrs data into the GPU and it is much more efficient to transfer many transitions at once.

Adding, Stopping, and Updating Transitions

It is possible to add, stop, and update transitions of a running animation. The normal transition.start adds a transition to the current animation, if it is not yet present. Otherwise it is updated. You can add a new transition as well as a transition that was used by a previous animation. When you update a previously started transition then you must call transition.start and taccgl.start subsequently. It is undefined weather the update takes effect immediately or after executing the start methods (with the current implementation in WebGL™ mode most updates take effect only after start, while in canvas 2D fallback mode the updates take effect immediately. However this is implementation defined and might change).

The start time of a transition always is relative to the begin of the animation. The default starting time is the current time w.r.t. to a currently running animation (or 0 if no animation runs). So the default is to start the transition immediately. All times given as parameter to startTime are increased by the current time. So startTime(1) means to start the transition within one second. See alse absStartTime.

You can also update a transition that is currently visible or that becomes visible by modifying the starting time. In that case however the behaviour of onBegin, hideAtBegin, and opacityAtBegin is undefined and these methods should not be used. Likewise, if starting time and/or duration are changed in a way the transition immediately becomes visible or invisible the behaviour of onEnd, visAtEnd, and opacityAtEnd is undefined and these methods should not be used.

Running an Animation: The Rendering Loop

While an animation is running, taccgl™ shows the canvas element on the page. It draws a new image on the canvas in a loop, performance permitting, 25 to 30 times a second. While no animation is running the canvas element is normally hidden and nothing is drawn.

An animation terminates when/if all transitions are finished (disregarding ShowAfter) or if the stop method is used. On termination the visFinal and opacityFinal methods take into effect and all transitions displayed because of the ShowAfter method terminate as well.

GPU Buffering

In order to get a better understanding of the start methods it might be useful to discuss the WebGL™ double buffering: WebGL™ requires the animation data to be (1) prepared in a special formatted buffer and (2) this buffer to be transferred into the GPU. (1) is performed during transition.start and (2) during taccgl.start. You must call both start methods after each change and you can call them multiple times, to keep the buffers up to date. However, it is not guaranteed that a change becomes effective only after start! Some effects do not need the GPU/WebGL™ and in canvas 2D fall-back mode there is also no buffering. So your program should never update a started transition without calling start afterwards, because then it is undefined if the update becomes visible or not.

WebGL™ is a trademark of the Khronos Group Inc.