Timeline API

The Timeline API is placed in SDK samples\animations\timeline directory, with two examples provided in samples\animations. It's modelled after GreenSock Animation Platform (GSAP), albeit much more limited. Nevertheless, it's recommended to start learning with excellent GSAP tutorials and docs to get overall idea of this API.

The Timeline API provides the following classes:

• class Tween animates DOM object properties, f.e. Tween($(#button), {duration:2}, {opacity:1; scale:1}, {opacity:0; scale:0}) animates the button appearance in 2 seconds.
• class TweenRepeater extends Tween with repeated animations (including endless).
• class Timeline is animation sequencer composing multiple animations in sequential, parallel and delayed ways.

All three classes expose render() function that you may call in paintContent or run by element.animate. The Timeline class also exposes function play() that runs animate on the object.

Module morph.tis

morph.tis exposes a lot of easing function in namespace Ease. Easing function is the function that returns point on some curve at specified time.

It also attaches morph(from/*Object*/, to/*Object*/, position = 0.0 ) function to Object, Array, Tuple and Element classes. Each morph function returns intermediate state between states defined by the object from (equivalent to position 0) and object to (equivalent to position 1), interpolating all properties contained in the objects. F.e. morph({x:0; y:0}, {x:100; y:200}, 0.33) will return {x:33; y:66} object.

Animated objects may have arbitrarily complex structure. Moreover, Element.morph simplifies animation of CSS properties by providing natural default values for undefined ones, such as opacity=1 and rotate=0.

Module timeline.tis

Class Tween

Class Tween implements a single, non-repeated animation.

Constructor Tween(target, params = null , tovars/*:Object*/ = null, fromvars/*:Object*/ = null) where params may have the following fields:

• duration - duration of animation in seconds
• start - starting time
• ease - easing function (see above), can be also provided as symbol or string with a name of function from Ease namespace
• reversed - play animation from end to start
• onStart, onStop - functions to call on animation start/finish

Tween object provides the following r/w properties: duration, startTime, reversed.

R/W property state holds the current animation state:

• #dormant: waiting for animation (the initial state)
• #active: now playing
• #complete: finished animation
• #cancel: animation was cancelled

Function render(progress /*0.0 ... 1.0*/) morphs object properties to the specified progress stage. Note that it doesn't called automatically by timer nor draws anything itself. It's up to you to call this function by timer or paintContent, and it's up to you to ensure that properties being animated have some visual appearance (or not).

Function advance(toTime) moves object into state at specified time, making it active or complete, and renders it.