• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
[Ultracode Munich #4] Demo on Animatron by Anton Kotenko
 

[Ultracode Munich #4] Demo on Animatron by Anton Kotenko

on

  • 573 views

Animatron is an engine for a web animation tool written in Java/GWT. Presentation took place at Wayra Munich during the Ultracode Munich meetup: http://www.meetup.com/Ultracode-Munich

Animatron is an engine for a web animation tool written in Java/GWT. Presentation took place at Wayra Munich during the Ultracode Munich meetup: http://www.meetup.com/Ultracode-Munich

Statistics

Views

Total Views
573
Views on SlideShare
446
Embed Views
127

Actions

Likes
0
Downloads
4
Comments
0

3 Embeds 127

http://blog.bemyapp.com 119
http://plus.url.google.com 6
http://cloud.feedly.com 2

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    [Ultracode Munich #4] Demo on Animatron by Anton Kotenko [Ultracode Munich #4] Demo on Animatron by Anton Kotenko Presentation Transcript

    • Animatron Player API Modern JavaScript HTML5 Engine Flow in Details Anton shaman.sir Kotenko Animatron, June 2013
    • Place to go http://animatron.com/player
    • Docs
    • Sandbox
    • Games
    • Files player.js internals builder.js API *.module.js Extending API *.import.js Import scenes
    • 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());
    • Flow
    • Scene consists of Elements A B
    • ...actually, internally structured A w A A B X
    • Everything is an Element A shape path text image
    • Everything is an Element A shape path text even sprite
    • Everything is an Element A shape path b('my-star').star(5) text b('a-letter').text('A'); b('fish').path('...'); sprite b('alien').sprite('...');
    • Elements may have children A w A A i BX
    • Elements may have children b('parent').sprite(...).add(b('child').star(5)) A w A A i BX
    • ...even while not being something for themselves b('parent').add(b('child').star(5)) w A A i BX
    • Which way a single element is rendered?
    • It stores transformations (state)
    • It stores transformations (state) ...and a brush (visuals) A
    • It stores transformations (state) ...and a brush (visuals)
    • state visuals
    • state Modify f(t) → f(t) → f(t) → visuals Paint ← f(ctx) ← f(ctx) ← f(ctx)
    • state Modifiers f(t) → f(t) → f(t) → visuals Painters ← f(ctx) ← f(ctx) ← f(ctx)
    • visuals state Painters Modifiers f(t) → f(t) → f(t) → ← f(ctx) ← f(ctx) ← f(ctx) Time band
    • visuals state Painters Modifiers f(t) → f(t) → f(t) → ← f(ctx) ← f(ctx) ← f(ctx) Time band
    • visuals state Painters Modifiers tweens → events → f(t) → ← f(ctx) ← morphs ← f(ctx, t) Time band
    • visuals state Painters Modifiers tweens → events → f(t) → ← f(ctx) ← morphs ← f(ctx, t) Time δ δ δ δ band Browser δ time between calls is unpredictable, though has delta
    • Animatron Player
    • Animatron Player createPlayer('canvas-id').load(my_scene).play();
    • Animatron Player createPlayer('canvas-id').load(my_scene).play(3); 3 3
    • Options createPlayer('canvas-id', { 'mode': C.M_VIDEO, // C.M_PREVIEW (no controls) or C.M_DYNAMIC (for games) 'zoom': 1.0, 'repeat': false, 'bgcolor': '#ffffff', 'anim': { 'width': 400, 'height': 250, 10 'bgfill': { color: '#fff' }, 'duration': 10 } } ).load(my_scene); ⚙
    • Import and Export createPlayer('canvas-id').load(my_scene, new AnimatronImporter()); new AnimatronExporter().create(source_scene) (NYI)
    • 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/>
    • 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
    • Overview
    • 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)
    • Shapes • b().rect([30, 30], [53, 53]).fill('#00f') — square | rectangle • b().oval([30, 30], [53, 53]).fill('#00f') — circle | oval • b().path([30, 30], 'M0 0...').stroke('#000').nofill() — path • b().image([30, 30], '/....jpg') — image A • b().text([30, 30], 'A', 53).stroke('#000').nofill() — text • b().sprite([30, 30], '/....png', [53, 53]) — sprite
    • Shapes • b().rect([30, 30], 53).fill('#00f') — square | rectangle • b().oval([30, 30], 53).fill('#00f') — circle | oval • b().path([30, 30], B.path([...])).stroke('#000').nofill() — path • b().image([30, 30], '/....svg') — image A • b().text([30, 30], 'A', 53).stroke('#000').nofill() — text • b().sprite([30, 30], '/....png', 53) — sprite
    • Base state change (NYI) • b()...pos([30, 30]) — move • b()...angle(Math.PI / 3) — rotate • b()...size([2, 7], [2, 1.5]) — scale • b()...opacity(0.8) — change opacity
    • 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
    • Tweens • b()...trans([2, 7], [[5, 5], [10, 10]) — translate • b()...transP([2, 7], [...pts...]) — translate by path • b()...rotate([2, 7], [0, Math.PI * 2]) — rotate • b()...rotateP([2, 7], [...pts...]) — rotate to path • b()...scale([2, 7], [[2, 2], [0.5, 0.3]) — scale • b()...xscale([2, 7], [2, .5]) — equally scale • b()...alpha([2, 7], [0, 0.8]) — alpha
    • Tweens • b()...trans([2, 7], [[5, 5], [10, 10]) — translate • b()...transP([2, 7], [...pts...]) — translate by path • b()...rotate([2, 7], [0, Math.PI * 2]) — rotate • b()...rotateP([2, 7], [...pts...]) — rotate to path • b()...scale([2, 7], [[2, 2], [0.5, 0.3]) — scale • b()...xscale([2, 7], [2, .5]) — equally scale • b()...alpha([2, 7], [0, 0.6]) — alpha
    • Relative Tweens • b()...rtrans([0.18, 0.6], [[5, 5], [10, 10]) — translate • b()...rtransP([0.18, 0.6], [...pts...]) — translate by path • b()...rrotate([0.18, 0.6], [0, Math.PI * 2]) — rotate • b()...rrotateP([0.18, 0.6], [...pts...]) — rotate to path • b()...rscale([0.18, 0.6], [[2, 2], [0.5, 0.3]) — scale • b()...rxscale([0.18, 0.6], [2, .5]) — equally scale • b()...ralpha([0.18, 0.6], [0, 0.6]) — alpha
    • Composing Tweens b()...xscale([2, 7], [.5, 2.2]) .rotate([2, 7], [0, Math.PI / 2]) .alpha([2, 7], [0, 1])
    • Composing Tweens b()...xscale([2, 7], [.5, 2.2]) .rotate([2, 7], [0, Math.PI / 2]) .alpha([2, 7], [0, 1])
    • Composite Tweens (NYI) b()...rotate([2, 3, 5, 7], [0, 1/2 * Math.PI, Math.PI, 2 * Math.PI]) 2π π 0 0 2 π / 2 3 5 7
    • Relative Composite Tweens (NYI) b()...rrotate([0.3, 0.5, 0.6, 1], [0, 1/2 * Math.PI, Math.PI, 2 * Math.PI]) 2π π 0 0 0.3 π / 2 0.5 0.6 1
    • Easings • b()...trans([2, 2], [[5, 5], [10, 10]], C.E_IN) — predefined IN • b()...trans([2, 2], [[5, 5], [10, 10]], C.E_OUT) — predefined OUT • b()...trans([2, 2], [[5, 5], [10, 10]], C.E_INOUT) — predefined INOUT • b()...trans([2, 2], [[5, 5], [10, 10]], C.E_CIN) — predefined CIN • b()...trans([2, 2], [[5, 5], [10, 10]], C.E_COUT) — predefined COUT • ... • b()...trans([2, 2], [[5, 5], [10, 10]], [...pts...]) — path-based easing • b()...trans([2, 2], [[5, 5], [10, 10]], function(t) { return 1 - t; }) — custom
    • Modifiers & Painters • b().modify(function(t) { this.x = y / t; }) — normal modifier • b().modify([6, 7], function(t) { this.x = y / t; }) — band-restricted modifier • b().rmodify([0.25, 0.9], function(t) { this.x = y / t; }) — relative band-restricted modifier • b().modify(5, function(t) { this.x = y / t; }) — trigger-modifier (NYI) • b().rmodify(0.3, function(t) { this.x = y / t; }) — relative trigger-modifier (NYI) • b().modify(function(t) { this.x = y / t; }, C.E_IN) — modifier with easing 10 f(t) • b().paint(function(ctx, t) { ctx.fillText(0, 0, t); }) — painter
    • Events • b().on(C.M_CLICK, function(evt, t) { this.x = evt.x; }) • b().on_click(function(evt, t) { this.x = evt.x; }) • ...double-click, mouseover, mouseout, mousemove, mouseup, mousedown, keydown, keypress, keyup, draw A • NYI: touchstart, touchend, touchmove... on()
    • 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
    • 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
    • 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
    • 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
    • Everything with the help of modifiers and painters
    • May be head to the docs now?)
    • ...or Sandbox?
    • Version 1.0 is coming soon
    • Thank you!