The current Doodle animation system re-renders the entire picture for each frame. This is fine for a low-level API, particularly when coupled with an API for blasting pixels at the screen (see #93). However, we'd like higher level APIs. The current system is unsuitable, for example, in SVG where it requires continually destroying and recreating the DOM. This is slow and also destroys any event handlers attached to DOM elements.
We want a higher-level API, probably based on time-varying values (sometimes called reactive variables). For example, instead of writing Picture.circle(100) for a static circle, we might write Picture.circle(10.to(100).in(2.seconds)) for a circle that expands its radius from 10 to 100 over 2 seconds.
This is an interesting design problem. There are several features we should consider:
- Animations can react to events (e.g. one animation starts when another ends, or when an element is clicked)
- For SVG, we compile animations to SVG animations, CSS animations, or Web Animations where possible.
This is lots of existing work. Here's a small sample of it:
(The above three are more about structured diagrams than animation, but still interesting.)
The current Doodle animation system re-renders the entire picture for each frame. This is fine for a low-level API, particularly when coupled with an API for blasting pixels at the screen (see #93). However, we'd like higher level APIs. The current system is unsuitable, for example, in SVG where it requires continually destroying and recreating the DOM. This is slow and also destroys any event handlers attached to DOM elements.
We want a higher-level API, probably based on time-varying values (sometimes called reactive variables). For example, instead of writing
Picture.circle(100)for a static circle, we might writePicture.circle(10.to(100).in(2.seconds))for a circle that expands its radius from 10 to 100 over 2 seconds.This is an interesting design problem. There are several features we should consider:
This is lots of existing work. Here's a small sample of it:
(The above three are more about structured diagrams than animation, but still interesting.)