Page MenuHomePhabricator

Proposed Structure
Updated 855 Days AgoPublic

AnariLayout.png (816×1 px, 134 KB)


The Timeline is essentially the "ruling element" of Anari, A Timeline stores all of the Frames necessary to display an animation.

While a project would contain a main (or "master") timeline by default, certain kinds of Layers may contain timelines. In order to display an animation, the master Timeline would iterate through every Frame and render each of them to the screen one after the other.


A Frame can be thought of as one complete drawing or snapshot in the animation. Frames are displayed to the screen one after another to achieve the illusion of movement. An important thing to note is that a Frame isn't limited to one drawing or object. A Frame is a composite drawing made up of multiple LayerInstance objects. For example, one Frame might contain a LayerInstance for a blue sky at the very back, a LayerInstance of a green hill, and a LayerInstance of a cow standing on the hill. It's essentially a still snapshot of the entire scene.

Unlike the Synfig canvas/context relationship, the Frame contains its own iterator.

layerInstanceToFrame.png (522×745 px, 23 KB)


When the Frame class stores LayerInstances, it also keeps track of where these LayerInstances are located on the canvas/screen. The Frame divides the screen into evenly-sized partitions, then records which partitions each LayerInstance falls into. The reason why we're doing this is to make collision detection in the animation more efficient. In an actual animation a Frame might contain hundreds of LayerInstances. We don't want to have to loop through every single LayerInstance every time there is a possible collision. When there is a possible collision on the screen, we only need to look at the LayerInstances that are located in that same partition. In the example below, the Frame is divided into sixteen partitions. There are five LayerInstances in the Frame total. Some LayerInstances appear in multiple partitions, while others only belong to one. If the cursor is in the top right corner of the Frame, we only need to look at the LayerInstances that fall in that partition. In this example, those LayerInstances are the red and green ellipses.

Frame Partitions (482×745 px, 27 KB)


A Layer represents a vector-based drawing or other such object. (StaticLayer contains a vector-based drawing; this is the basic Layer type everything else is built on.) Layers are stored and manipulated in a map in the project. Layers store the Geometry (Bezier curves as vectors) and Attributes (color, stroke, fill data, etc.) for a drawing. For example, a Layer of a dog would store the Geometry of the dog, along with the default dimensions and the Attributes. It would not store any animation-specific data, like where on the screen the dog is located. That information is handled by the LayerInstance and Frame.

The name and functionality is carried over from Synfig Studio. However, certain layers may contain a timeline, and thus, other layers.

See Layer Types.

Layer Instance

The LayerInstance object is a snapshot of a single Layer in an animation. It references (has a point to) a Layer object in order to obtain the Geometry and Attributes of the Layer, and then applies its own Transformations and Filters to the Layer before rendering it to the screen.

Because it references another object's data and doesn't store its own copy, this is an implementation of the Flyweight design pattern.

The LayerInstance is in charge of scaling, rotating, and translating drawing on the screen. An example Layer might be a red ball. That Layer would contain information detailing the Geometry (Bezier curves) and Attributes (e.g. color). An example LayerInstance would point to the red ball Layer. It would reference the Layer to obtain the drawing geometry and default dimensions. The LayerInstance could then apply a Transformation (matrix) to the Geometry to scale, rotate, or translate it about the screen, and a Filter to make the ball's color greyscale.


All drawing data in Anari is vector-based, meaning Geometry is composed of points (X/Y pairs) and vectors that comprise Curves. These are stored in Layer objects (specifically StaticLayer).


Rotation, skew, scaling, translation, and other transformations are accomplished with matrix transformations, contained in Transformation objects. These are stored in LayerInstance objects.


All non-geometric properies of a drawing, such as fill color, stroke color, stroke thickness, and the like, are considered Attributes. These are stored in Layer objects (specifically StaticLayer).


Filters modify Attributes in the same wa that Transformation modifies Geometry. These are stored in LayerInstance.

Order of Rendering

StaticLayer (Geometry)LayerInstance (Transformation)FrameRenderer
StaticLayer (Attribute)LayerInstance (Filter)FrameRenderer

Class Reposibility Statements

  • Layer/StaticLayer: "Contain drawing data."
    • Curve (Geometry): "Define geometry of drawing."
    • Attribute: "Define non-geometric property of a drawing."
  • Timeline: "Tell renderer when to draw."
    • Frame: "Tell renderer where to draw."
      • LayerInstance: "Tell renderer what to draw."
        • Transformation: "Change geometry of a drawing."
        • Filter: "Change non-geometric property/properties of a drawing."
      • Partition: "Keep track of neighbors on a Frame."
NOTE: Some Layer types can contain Timeline, Frame(s), or LayerInstance(s).
Last Author
Last Edited
Apr 11 2020, 12:16 PM