Skip to content
This repository has been archived by the owner on Jul 3, 2023. It is now read-only.

Timeline API

Jump to bottom
Bulat-Ziganshin edited this page Aug 21, 2017 · 10 revisions

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 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 ones).
  • 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

Module 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(fromObject, toObject, position) function to Object, Array, Tuple and Element classes. Each morph function returns intermediate state between states defined by the fromObject (equivalent to position 0) and the toObject (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, toObject, fromObject) 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

If fromObject or toObject are omitted, the current object state is used.

Tween object exposes 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.

Class TweenRepeater

Class TweenRepeater implements a repeated animation. Inheriting from Tween, it supports all its initialization parameters, properties and methods.

Constructor TweenRepeater(tween, nrepeats, doswing, onStart, onStop) creates repeatable version of tween repeating nrepeats times, calling onStart prior to animation start, and calling onStop when animation finished. If doswing is true, then animation direction is reversed on each cycle (making smooth animation), otherwise it always goes in the same direction.

Class Timeline

Class Timeline implements an animation scenario, allowing individual animations to perform sequentially, parallelly or partially overlapped. Inheriting from Tween, it supports all its initialization parameters, properties and methods.

Function defaults(params) sets default parameters for further animations added to scenario. Example: defaults { duration: 1s, ease: Ease.quadOut }.

Functions from(target, params, fromVars), to(target, params, toVars) and fromTo(target, params, fromVars, toVars) add next animation to the scenario, f.e. to(rings, { start:0.0s }, { angle:90deg, color:rgb(127,0,127) } )

  • if params include field repeats, then TweenRepeater(tween, params.repeats, params.swing, params.onStart, params.onStop) animation is created
  • target may be an array, in this case all animations are started simultaneously or staggered with offset specified by interval. Example: to( $$(picture), {interval:0.3s, repeats:8, swing:true}, {x: 0})

Function label(name, position=null) labels current or specified position. F.e. you can anchor current position with label("final-scene") and later use it with start: [label:"final-scene", 0.2s] in the params object.

Function add(child) adds existing Tween or Tween-derived object (it may be TweenRepeater or entire Timeline) to the scenario. Tween cannot belong to two Timelines simultaneously, so it will be removed from previous scenario if required.

Function play(onStart=null, onStop=null) plays the entire animation scenario, once onStart and onStop functions were assigned to the corresponding fields in the Timeline object.

Clone this wiki locally