The document describes the Animatron Player API, which provides a JavaScript HTML5 engine for building animations and games. It allows defining animations and interactions through elements that can be shapes, images, text or sprites. Elements have properties for position, size, opacity and other visual attributes, as well as the ability to modify these properties over time through tweens, modifiers and painters. The API supports features like sprites, events, timing controls, and composition of elements.
7. Files
player.js
builder.js
var pl = createPlayer('...');
var scene = new anm.Scene();
var oval = new anm.Element('oval', null,
function(ctx) { ... });
scene.add(oval);
player.load(scene).play();
createPlayer('...').load(
b('oval').oval(...)
).play();
*.module.js
b(this.$).collides(...)
*.import.js
createPlayer('...').load(project,
new AnimatronImporter());
33. Embedding
http://player.animatron.com/go/3f68b131-8a6a-4e0f-82f8-99a2576ab9d9?
w=600&h=500&bg=f0fff0&m=0&r=0&z=1&t=25&p=37&debug=0
Any of the parameters is optional, here is a definition for each one
• w and h — forced width and
forced height of the player. Will
add black ribbons if scene ratio
will be different.
• bg — the background color of
the player in format of ff00a6;
Default is transparent. Appears
below the scene background.
• m — mode of the player,
PREVIEW (no controls, no
handling mouse/kb) is 0,
DYNAMIC (no controls,
handling mouse/kb) is 4,
VIDEO (controls are shown, no
mouse/kb handling, default) is
11.
• r — repeating mode, 1 is to
repeat (loop), 0 (default) —
play once.
• t is time to start play from
when scene is loaded. t=370
means "play from 3s 700ms"
• p is time to pause at when
scene is loaded. p=370 means
"pause at 3s 700ms"
⚙ • debug flag (0 or 1, off by
default) allows to turn on
debug information such as FPS
and exact time.
• z is zoom of the scene, may be
a float value
<iframe/>
34. Supports
</> • Еmbedding
• Time bands
x,y
• Static modification
• Repeat modes
• Structures of any deep
• Events
• Masks
α
5
!
• Tweens and Easings
• Live changes
• Simple collisions
• Jumping in time
9:17
• Band-restricted modifiers
• Sprites
0.3:1
• Relative modifiers
36. Construction
• b() — unnamed empty element
'name'
• b('name') — empty element with a name
• b(this.$) — from low-level element
• b(b()) — find in cache & return
• b().add(b()) — add child (even live)
• b().remove(child) — remove child (even live)
40. Bands & Repeat Modes
• b().band([2, 10]) — lives from 0s to 10s of parent time
• b().band([2, 10]).once() — the same
• b().band([2, 10]).stay() — keep last state inst. of disappearing
• b().band([2, 10]).loop() — loop during life of a parent
• b().band([2, 10]).bounce() — bounce during life of a parent
51. Timing
5
• b().on(C.M_CLICK, function(evt, t) { this.t = 5; }) — jump to time
.3
• b().on(C.M_CLICK, function(evt, t) { this.rt = 0.3; }) — jump to relative time
jump
.jump
• b().key(5, 'jump').on(C.M_CLICK, function(evt, t) { this.key = 'jump'; }) — jump by key
• b().rkey(0.2, 'jump').on(C.M_CLICK, function(evt, t) { this.key = 'jump'; }) — (NIY) relative
• b().time(C.E_QIN) — predefined time easing
• b().time(function(t) { return t / 2; }) — time easing
• b().rtime(function(t) { return 1 - t; }) — relative time easing (NYI)
t
52. Sprites
• b().sprite([30, 30], 'my_sprite.png', [40, 40], ...) — create sprite
and define frames / frames names
• b().switch(['jump', 'walk'], 10) — switch to given frames and FPS,
waiting for run() call
• b().run(7) — animate stored frames starting from given time
• b().animate(7, ['jump', 'walk'], 10) — animate frames starting
from given time with given FPS
53. Composition & Masks
• b().acomp(C.C_SRC_OVER) — Source over
• b().acomp(C.C_SRC_IN) — Source in
• b().acomp(C.C_DST_ATOP) — Destination atop
• b().acomp(C.C_LIGHTER) — Lighter
• ...
• b().mask(b()) — Use element as a mask
SRC_IN
54. Other
• b().enable() — enable
• b().disable() — disable element
• b().show() — (NYI) show element
• b().hide() — (NYI) hide element
• b().each(function(elm) { ... }) — iterate over direct children
• b().deach() — iterate deeply over sub*-children
• b().take(b()) — copy another element
• b().use(b()) — clone another element
• B.grad(...), B.path(...), B.sheet(...), B.easing(...) ... — helpers for you to make things