From Inkscape Wiki
Revision as of 23:45, 6 January 2005 by PeterMoulder (talk | contribs) (* Add text from SVG Tiny page. Reformat.)
Jump to navigation Jump to search

User interface for timeline-based animation

Existing animation programs (Free & non-Free)

  • Macromedia Flash is a good non-Free example.
  • F4L is a non-functional free-software mock-up of the Flash 4 interface.
  • Moho as a gratis-but-non-free example. (Written in Java.)
  • LimSee2 ( is an excellent almost-free basis. (The web site claims open source, contradicted by the license which says no commercial use.)

Other thoughts

It is suggested that there be basically two modes: Local (Object) mode and Global mode. Below is a picture showing a very rough design of the local mode:

In local modes, all properties of the object editing will be shown on a timeline, and one can create and edit frame within the timeline. Then one may assign different value of that porpoties on different timeline, or make it change linearly, or inlinearly :)

Fantavision example

Back in the '80's there was a program on Apple IIE (I believe) called "Fantavision". It allowed one to create vector artwork (although I didn't understand at the time that that was what it was called) and animations. It allowed one to create frames of animation where you manually repositioned, recolored, scaled, rotated etc. the objects from one frame to the next. However, it then automatically interpolated frames between the 2 frames (the number of interpolated frames was configurable) such that it create a smooth transition of the object moving from one frame to the other. The effect was very similiar to the "Morphing" effect for raster graphics (popularized in a Michael Jackson video, I believe). That is, the system calculated the trajectory of "Key Points" of the objects from one frame to the next.

I guess what I'm sayin is that I think a nice interface to create animations would be similiar. So to animate you would do the following:

  • Draw the initial SVG Image
  • Increment Frame (from say 1 to 20)
  • Reposition the elements in frame 20 (including scaling, color changes, adding removing objects, etc, etc, etc)
  • System would then calculate a trajectory for each key point from frame 1 to frame 20. Trajectories would be calculated for things like:
    • Each "node" of an object
    • Color
    • Transformation Matrix
    • etc
  • You could display/manipulate the trajectories (using the trajectory editor shown above by the original creator of this topic)
  • The system would then store the animations using SVG trajectories and the "Key Points" would be the frames you manually created
So, to create say a 100 frame animation, one might only need to manually create/modify 10 frames and the system would interpolate the addional frames as necessary.
  • Also, once the system interpolated frames it would allow you to manually modify the interpolated frames creating further "Key Points" and allow further refinement and interpolation.