Introduction

This document serves as user manual for the aniGen editor, version 0.8.1. The manual describes the interface, controls and files, provides a basic explanation of SVG animation, and a set of examples which can serve as basic tutorials.

This document may be incomplete, or partially out of date with current version. If you find discrepancies, please follow the bug reporting section.

About editor

AniGen is a browser-based SVG animation editor. It is designed to work in tandem with Inkscape, expanding its functionality to allow the user to animate vector images, as well as export them. Transfer of files between the editors should work without loss of information.

AniGen is free software available as is. It is written and maintained by Ondřej 'Aibo' Benda, and covered by GPLv3 license. The editor is currently in testing phase. Please take a moment to encounter any bugs you encounter.

For more information about SVG format, see the format's specification.

Compatibility

The editor is developed mainly on Google Chrome, and should also work reasonably well on Mozilla Firefox. Compatibility with other browsers is not the editor's main objective. To use the editor, JavaScript needs to be enabled.

Third-party libraries

AniGen uses the following third-party assets, as mentioned in the "about" section of the editor:

User interface

Overview of the aniGen editor's main window.

The main window of aniGen (shown above) consists of eight main sections:

The XML editor and windows are toggled by the icons on right side of toolbar.

Main menu

The menu (top right corner) allows access to most of the editor's functions:

Global information

The top left section shows the following (left to right):

Selection information

Shows information about currently selected element:

Selection information of a layer.Selection information of a layer. Left to right: tag name (g for group), identifier ("layer1"), inkscape's group name ("mouth").

Selection information of an animated group.Selection information of an animated group. Left to right: tag name (g for group), identifier ("g4138"), group type ("animated group"), group name ("mouth-female-3q").

Toolbar

Canvas

The visual representation of SVG document. The page (area exported as animation) is specified by the gray border. Page size can be set in Inkscape. See also controls and tools.

Keyframes and timing window

Keyframes windowKeyframes window shows the keyframes and timing of currently selected animation. (See animation for more details.)

While details may vary, each keyframe generally has a percentage (its position relative to the duration of the animation), time (the same, as time relative to the animation's beginning) and one or more values. Animations with the spline interpolation mode also show the respective splines between every pair of keyframes.

Clicking the percent or time value of each keyframe allows you to change it, within the 0% - 100% range, or boundaries given by the animation's duration respectively.

Keyframes can be selected by clicking the striped button on the left. To select multiple frames, hold ctrl. Holding shift will select all frames between the furthest already selected frame and the frame clicked.

Values can be changed with standard input fields. If multiple keyframes are selected, all of their values are changed when you change one. It's also possible to drag the keyframes to switch their values with one another, or move them up and down with page up / page down. Selected keyframes can be duplicated with ctrl+d and deleted with delete.

Keyframes window - spline menuKeyframes window - spline editorSplines can be changed between various presets or a custom value can be given instead. If custom spline is selected, a button allows the user to edit it.

The editor shows spline as the red curve, defined by its two control points (handles). The rectangles shown depict a five second animation, the top rectangle showing linear progression, the bottom showing progression as set by the given spline. Input fields allow direct change the spline's numeric components, and change with the handles. Any changes are immediately applied to the animation. Selecting multiple keyframes changes the spline for all of them.

Selected keyframes are affected by the context menu (right click). If none is selected, the clicked keyframe is affected, except the cases noted below.

Keyframes windowThe second tab of the window shows a list of begin times, that is times when animation will start (see duration, repetition, and begins for more details). New begins can be added by inputing a time (in seconds) in the field below the list, and selecting "add". Begins are removed by the buttons on their right. The end time given for each begin time is the time when the given set of loops (if applicable) of animation ends - if two loops overlap, the animation resets at the later begin value.

Fill and stroke window

Fill tab of Fill and Stroke window, showing gradientsManages fill and stroke of selected element. Both fill (the inner parts of an element) and stroke (element's outlines) can be set to one of the following:

Stroke paint tab of Fill and Stroke window, showing solid colorFill also allows the user to change the fill rule:

Fill tab of Fill and Stroke window, showing generic linkingFor generic link, an indentifier input field is given.

Stroke style tab of Fill and Stroke windowThe third tab allows the user to change the stroke's other properties.

AniGen currently doesn't have UI elements for creating and editing gradients, other than doing so manually. Linked objects (e.g. gradients) can be selected with link the appropriate button.

Additionally, the sliders at the bottom part of the window allows the user to change the blur and opacity of the element, independent of fill and stroke.

Layers window

Layers windowThe window similar to its Inkscape's counterpart. It shows layer groups in the usual order (higher layers overlap lower ones). Nested layers are shown indented. Current layer is higlighted, and can be moved up and down with the menu below, the context menu (right click), or page up / page down keys.

visibilityvisibility_offThe show/hide icon allows toggling visibility of each layer.

Below the layer list is a menu with following items:

Right-clicking layers opens a context menu with similar options:

XML editor

XML editor windowThe XML editor allows quick navigation through the SVG's elements. Branch elements (i.e. elements with children) can be opened by clicking the share button, displaying their children in standard tree fashion. These elements can also be selected by double-clicking. Leaf elements (i.e. elements with no children) can be selected by single click.

XML editor is useful for quick navigation between elements, as well as selecting animations, which have no direct graphical representation to click.

Elements are shown (from top to bottom) in order of rendering, meaning the lowest elements will be on top of the drawing.

Some elements in XML tree have specific icons:

Event log

Keeps information about actions made during editing, such as copying, pasting, deleting etc.

Preview window

Shows the animation's canvas as it will look when exported. Limited controls are available:

Canvas is painted in with white, the remaining portion of the window is black.

Settings

Settings dialogue

Files

Opening and saving SVGs

File open dialogueAniGen only works with existing SVG files (preferably created with Inkscape). They can be opened by clicking the icon, or by dropping the file on it.

File open dialogue with existing fileIf a file is stored in local browser storage (by selecting file→save or hitting ctrl+s), it will be available in the file open dialogue. The local file can be deleted by the button next to it.

Importing

Files can be imported by dragging them into the editor's canvas. Imported files include SVGs, JPEGs and PNGs. Raster files (JPEGs and PNGs) will be appended to the currently selected container object. SVGs will be merged, i.e. all elements container in the root SVG element will be moved to the current SVG's root element, and the contents of defs (clip paths, gradients, animation states etc.) will be moved to current defs.

It's recommended to save file before importing.

Exporting

File export dialogueCurrent SVG can be exported as a series of PNGs or static SVGs archived in a ZIP. User can set:

Static SVGs will create individual SVG files for each frame, stripped of all animations.

Default duration is set to the loop length specified by the user with animation→loop animation... dialogue, or is computed as the least common multiple of all animation durations.

If only one frame is exported, it's downloaded directly instead of in a ZIP.

Rendering in progressWhile rendering, the editor will be unavailable. Progress and estimated time to completion (HH:MM:SS) is shown. Progress percentage is shown in the page title. The rendering process can take significant time, which scales with the number of elements in the SVG. Furthermore, each PNG is stored in the computer's memory. It's recommended to export longer animations, or animations with extremely large size, in smaller segments. Rendering process can be canceled (with slight delay).

Files being packed into a ZIPWhen all frames are rendered, they are packed into a ZIP, which then triggers the standard save dialogue of the browser. This process takes some time, but comperatively little to the rendering process.

Note: While mostly working, exporting is still in its testing phases. Save your work before you export and please report any problems.

Note: High resolutions, high downsampling settings, and long export times can lead to browser running out of allocated memory. It's advised to save your work before exporting, and export larger animations in shorter intervals.

Controls

Mouse

Generally used for selecting elements by clicking in a manner similar to Inkscape. Specific tools may change the default behavior.

Right click usually opens a context menu (for selected element, or contextual to the given window).

Middle button allows user to drag the canvas view.

Scroll wheel moves view up and down. Shift + wheel moves view left and right. Ctrl + wheel zooms in and out. Alt + wheel seeks (moves time) forward and backward, ctrl mask increases the seek distance.

Keyboard shortcuts

F1Select the group selection tool
F2Select the element selection tool
F3Select the zoom tool
F5Refreshes the window (after confirmation)
F7Select the picker tool
Space/Pause/Ctrl + PPause / unpause animations
Alt + PauseReset animations
Ctrl + ←/1Go to previous keyframe of selected animation
Ctrl + →/3Go to next keyframe of selected animation
Ctrl + ↓/2Go to the closest keyframe of currently selected animation
+/ESeek forward (1s if animation is running, 100ms if animation is paused)
Shift + +/Shift + ESeek forward (10s if animation is running, 1s if animation is paused)
Alt + +/Alt + ESeek forward (100ms if animation is running, 10ms if animation is paused)
-/QSeek back (1s if animation is running, 100ms if animation is paused)
Alt + -/Alt + QSeek back (100ms if animation is running, 10ms if animation is paused)
Shift + -/Shift + QSeek back (10s if animation is running, 1s if animation is paused)
Ctrl + ASelect / unselect all keyframes (keyframe window only)
W/Ctrl + RSet current value for selected animation
EscapeHide popup / dialogue
Ctrl + +Zoom in
Ctrl + -Zoom out
DeleteRemove currently selected element
Ctrl + Y/Ctrl + Shift + ZRedo
Ctrl + ZUndo
Page UpRaise currently selected element
Page DownLower currently selected element
HomeRaise currently selected element to the top of its parent
EndLower currently selected element to the bottom of its parent
///Move selected element
Alt + ←/Shift + ASelect previous sibling of selected element
Alt + →/Shift + DSelect next sibling of selected element
Alt + ↑/Shift + WSelect parent of selected element
Alt + ↓/Shift + SSelect first child of selected element
Alt + ↑/Alt + WSelect closest animation parent of selected element
Ctrl + Shift + EOpen Export dialogue
Ctrl + Shift + KOpen / close the Keyframes and timing window
Ctrl + Shift + LOpen / close the Layers window
Ctrl + Shift + XOpen / close the XML editor window
Ctrl + OOpen the open dialogue
Ctrl + SSaves SVG into browser local storage
Ctrl + Shift + SSave and download SVG
Ctrl + CCopy selected element into clipboard
Ctrl + XCut element and move it to clipboard
Ctrl + VPaste element or animation timing (animation to animation)
Ctrl + DDuplicate selected element
Ctrl + L/Alt + DCreates a <use> link element.
Ctrl + GGroup selected element
Ctrl + UUngroup selected element

Elements and the XML tree

An SVG is an XML format, meaning the file is composed of elements. In code, these usually appear as pairs of tags similar to this:

<svg id="green"></svg>

In this example, svg is the element's tag name, id is a name of an attribute (in this case an identifier), and green is this attribute's value. <svg> is the opening tag and </svg> is the closing tag.

An element can have various attributes. Some are shared betwen different types of elements, like id or transform, others are exclusive to certain type of element, like dur (animation duration).

Most elements can have children, that is, other elements between the opening and closing tags.

<svg id="green">
<g id="group"></g>
</svg>

In this case, the g element is a child of the svg element.

An SVG file will usually have single svg element as its root, and all other elements will be its children, or the children of its children (and so on). This is called "nesting" and creates a tree structure depicted in the XML editor.

All SVGs share these basic properties.

Attributes

As mentioned above, elements can have various attributes. For example:

<rect
id="rectangle1"
x="10"
y="20"
width="50"
height="100"
fill="red"
>
</rect>

The code above defines a rectangle (rect element). Its top left corner is denoted by the given x and y attributes, its width and height by attributes of the same name (all sizes default to pixels). Furthermore, its fill color is set to "red", equal to the hexadecimal value of #ff0000.

Were one of the attributes changed, e.g.

<rect
id="rectangle1"
x="50"
y="20"
width="50"
height="100"
fill="red"
>
</rect>

The element's properties will change. In this case, the top left corner (along with the rest of the element) will move 40 pixels right (along the x axis).

All SVG animations work by changing an attribute (or in some cases, CSS styles) over time.

Attributes of interest common to multiple types of elements:

Attribute nameDescriptionPossible values
transformTransformation of given element, usually in the form of a 3x3 matrix (simplified as its first two rows, i.e. six numeric values). Basis of all transformation animations.matrix(a b c d e f), rotate(angle cx cy), translate(x y), scale(x y), skewX(angle), skewY(angle)
idIdentifier, unique to the SVG file. Other elements can use this to connect to others, for example, in case of gradients.string
styleCSS styles, providing a large number of various visual options - colors, opacity, stroke width and dashing are all handled by these.semicolon separated pairs of name:value
displayWhether the element should or should not be displayed. Sometimes as part of CSS styles.usually none or inline (none meaning hidden)
visibilityWhether the element should or should not be visible, similar to "display". Sometimes as part of CSS styles.usually hidden or visible
opacityOpacity (non-transparency) of the given element. Carries over to all of its children.numeric value between 0 and 1 (1 meaning 100% opaque)

Common elements

This section contains a list of elements common to most SVG files, links to their official documentation, as well as short list of attributes interesting for attribute animation.

SVG element <svg>

See also W3C recommendation.

Usually the root element of an SVG document (although not exclusively). Amongst others, SVG has the following attributes of interest:

  • width and height, determining the size of the rendered canvas
  • viewBox (x y width height), defining the position and size of rendered rectangular area

For the purpose of keeping aniGen running, animation of SVG attributes is not advised.

Group <g>

See also W3C recommendation.

A container element, meaning an element with no actual graphical representation - simply holds other elements.

Definitions <defs>

See also W3C recommendation.

A special container element, usually placed directly in the root svg element. Holds definitions, which can be various other elements. These are not rendered, but can be linked to by other elements in the SVG file.

For example, defs element holds the information about all clip paths, masks and filters. In aniGen, animation states are also kept here.

Rectangle <rect>

See also W3C recommendation.

One of several graphical elements. Attributes of note:

Attribute nameDescriptionPossible values
xx-axis position of top left cornernumeric value or length
yy-axis position of top left cornernumeric value or length
widthwidthnumeric value or length
heightheightnumeric value or length
cxx-axis rounding of cornersnumeric value, percentage, or length
cyy-axis rounding of cornersnumeric value, percentage, or length

Circle <circ>

See also W3C recommendation.

Circle, a special case of an ellipse (with both radii being the same). Attributes of note:

Attribute nameDescriptionPossible values
cxx-axis position of centernumeric value, percentage, or length
cyy-axis position of centernumeric value, percentage, or length
rradiusnumeric value or length

Ellipse <ellipse>

See also W3C recommendation.

Attributes of note:

Attribute nameDescriptionPossible values
cxx-axis position of centernumeric value, percentage, or length
cyy-axis position of centernumeric value, percentage, or length
rxx-axis radiusnumeric value or length
ryy-axis radiusnumeric value or length
ryy-axis radiusnumeric value or length

Path <path>

See also W3C recommendation.

Bread and butter of most SVG vectors - a Bézier curve. Shape is defined by its d attribute (path data), a sequence of commands.

When animating a path, keep in mind that both d attributes must have the same number and types of commands. In inkscape, the simplest way to achieve this is to create one path, duplicate it and adjust each node to another position, then each of the paths for different animation keyframe.

Links <use>

See also W3C recommendation.

A link to another element. If original element changes, the link changes with it.

You can create links with from menu edit→create link.

Transformation animation <animateTransform>

See also W3C recommendation.

Groups of animations which change the transform attribute of their parent. Includes translation, rotation, scaling, and horizontal and vertical skewing.

Attributes of note:

Attribute nameDescriptionPossible values
beginList of begin times.semicolon separated list of time values
durDuration of single pass of animationtime value
repeatCount Number of repeats of animation per each begin.nonnegative numeric value or "indefinite"
fillThe state of the animated object after the animation finishes - freeze denotes the last value should be kept, remove means the object returns to the original state.freeze or remove
additiveWhether this animation adds to values already present in the parent or completely replace them.sum or replace
accumulateCumulation of the animation with itself. If set to sum, the animation will add to its last value each time it is repeated (good for infinitely moving objects).none or sum
calcModeInterpolation mode.linear, spline, discrete, or paced
keyTimesSee keyframes.Semicolon separated list of ascending numeric values between 0 and 1
keySplinesSee splines.Semicolon separated groups of four numeric values between 0 and 1
typeSpecific type of this animation.translate, rotate, scale, skewX, or skewY
valuesValues for each keyframe.Semicolon separated list of values (groups of numeric values)

Motion animation <animateMotion>

See also W3C recommendation.

Animation along a path. Shares most attributes with transform animation (except type and values), with these expetions:

Attribute nameDescriptionPossible values
keyPointsList of lengths along the path for each keyframe.semicolon separated list of numeric values between 0 and 1
pathPath data of the given path.path data

Attribute animation <animate>

See also W3C recommendation.

Generic animation of attribute. Can handle almost anything except transform (which has specific animations). Shares most attributes (except type) with transform animation.

Bread and butter of most complex animations - can do anything from changing a path's shape to element's opacity to the color of its stroke.

Editing tools

Group selection

near_meBased on Inkscape's "Select and transform objects" tool.

Element selection

editBased on Inkscape's "Edit path by nodes" tool. Directly selects graphical objects, disregarding groups they might be in, and allows their editing with nodes.

Zoom

searchZooms in or out at the factor of square root of two.

Picker

colorizeBased on Inkscape's "Picker" tool. When a graphical element is selected:

If an animation is selected and any number of keyframes is selected in the keyframe window:

Right-click context menu will also show additional options tied to the selected element and target.

Animation

All types of SVG animations share some common properties. Each animation has set duration of one pass (with possible repetition), a set of begin times, and keyframes which describe the value at given times, denoted as percentages of the animation's duration.

Furthermore, animations can be set to hold their last value after they finish (or return to the original value), are able to acumulate (meaning each run of the animation will add to the previous value), and calculate values through different interpolation modes.

Timing

Duration

All animations have a set duration. This describes how long a single run of the animation lasts. In aniGen, this value is in seconds.

Beginnings

Any animation can have multiple begin times. At each time, the animation restarts, and if applicable, loops the given number of times. If an animation is set to begin again while it's still running, it will usually reset. AniGen uses values given in seconds of the SVG's time.

Repetition

An animation can repeat multiple time per each beginning. Repeat count of zero means the animation only runs once, higher values denote multiple repetitions. Furthermore, repetition can be set to "indefinite", meaning the animation will run forever (or until it's ended by external source).

Interpolation modes

The progress between every pair of values can be calculated in several ways:

  • Linear - meaning a continuous change from one value to the other.
  • Discrete - changing instantaneously (without any interpolation) at the time of the given keyframe.
  • Spline - progress is guided by a simple spline, allowing for non-linear calculation. See splines.
  • Paced - animation slows down and speeds up to provide smooth progression between keyframes. Usually only applicable for motion through path - the animation element will slow down during sharp turns, slow down as it nears each keyframe position etc.

Splines

A non-linear way of interpolation between keyframes. Splines are simple curves defined by two control points, each as its X and Y value between 0 and 1.

AniGen uses several spline presets, but also allows the user to set custom splines more suited to their needs.

The following examples show simple two-value animation. Top bar progresses according to a spline, bottom bar has linear progression. Spline's shape is depicted in red, its control points are shown as white circles.

Spline animation 0 0 1 1 (linear)
0 0 1 1 - linear progression
Spline animation .25 0 .75 1 (ease in, ease out)
0.25 0 0.75 1 - ease in, ease out
Spline animation .5 0 .5 1 (ease in, ease out, sharp)
0.5 0 0.5 1 - sharp ease in, ease out
Spline animation .25 1 .75 .75 (ease in)
0.25 1 0.75 0.75 - ease in
Spline animation .5 1 .5 .5 (ease in, sharp)
0.5 1 0.5 0.5 - sharp ease in
Spline animation .25 .25 .75 1 (ease out)
0.25 0.25 0.75 1 - ease out
Spline animation .25 .25 .75 1 (ease out, sharp)
0.25 0.25 0.75 1 - sharp ease out
Spline animation .75 1 .25 .75 (custom)
0.75 1 0.25 0.75 - a custom spline.

Keyframes

Keyframes windowEach animation has a set of keyframes. Each is denoted by its time (given as percentage of a single animation run) and its value. If spline interpolation mode is selected, every frame (except the first one) will have a spline attached to it as well, describing how the animation progresses to this keyframe from the previous one.

Format of values is specific to each animation type. In general, each "value" is actually a set of numeric values. As the animation progresses, the value is changed from one to the other according to the selected interpolation mode. For instance, a path animation will calculate the position of each control point of the path at each given time. This limits animations somewhat; an animation with no clear way to change from one value to the next will progress discretely (it will jump). For instance, a path's shape can only change into a shape with the same amount and types of control points. Other attributes, such as visibility, can have non-numeric values (visible/hidden), and can only change discretely.

Keyframes can be manipulated through the keyframes and timing window. Motion and transformation animations also have a node-based interface shown on the canvas, and described in sections below.

Keyframe window allows duplication and deletion of keyframes (with the minimal two keyframes - 0% and 100%). Keyframes can be moved by dragging, efectively switching values (and splines) while retaining timing.

Other attributes

Animations have several other attributes:

Post-animation state (or "fill") describes how animation affects its parent once it finishes. If from animation is selected, it will retain the value of its last keyframe. On the other hand, selecting original will return the affected element to the state it had before the animation.

Additive indicates whether animation should add to any previous value the affected element already has or not. For instance, an additive translation from 0 to 100 will move the element from its original position. For non-additive animation, if the element already has a transformation attribute, however, it will be completely replaced. It's recommended to set additive to "yes" for transformations and motion along a path. Attribute animations, in contrast, are usually better served by replacing the attribute completely.

Cumulative attribute indicates the animation should add to its own value each time it runs. This means that with each repetition (or new begin), the last value is kept as initial, and new values are added to it. For instance, a cumulative translation from 0 to 100 will, in first run, move the object from 0 to 100. On second repetition, the object will move from 100 to 200, and so on. This is particularly useful for creating continuous movement which should go forever.

Animation types

There are, for most intents and purposes, three basic animation types in SVG. Transformations change the element's transform attribute, allowing for rotation, translation, scaling, and skewing. Motion along path is similar, and as name implies, moves the element along a given path. Attribute animation is the widest and most generic type of animation, which allows for the change of almost any remaining attribute of almost any SVG element.

Element can be animated with the menu animation option, or with the power_settings_new animate element toolbar button.

Multiple animations can be applied to the same object. Their behavior can be exclusive if not set to additive.

Camera

Viewbox animation videocamAnimates the SVG's viewbox - the rectangular view, which ultimately gets rendered.

Each keyframe is defined as a rectangle. By default, the aspect ratio stays the same as the original, but this can be changed manually. However, the view always gets rendered to the same size raster, which would lead to uneven stretching or shrinking of the picture.

Translation

Translation animation trending_upMovement along X and Y axis. Each keyframe is defined by two values indicating the element's position. The node interface allows the user to set each by hand. Holding ctrl while dragging a node will move it in straight line from previous node to current node's last position.

While not as versatile as motion through path, multiple translation animations can be combined to achieve similar effect without the hassle connected to the path management.

Motion through path

Motion animation swap_callsHas the element travel along a given path. Optionally, the angle can be set (or set to auto or auto-reverse) this will turn the element as it travels along the path instead of simply translating it.

The picker tool can be used to assign the animation's path. The animation values are distance as percentage along the path, allowing the animation to run back and forth, or in reverse.

Rotation

Rotation animation refreshTurning around a given origin. Keyframes hold angle (in degrees) and the X and Y position of the origin. The position of origin can change throughout the animation, allowing for fairly complex range of motion (albeit harder to master than simply turning along a single point). Node interface allows the user to move all origins with the same location, and all handles.

For each origin, angle zero is given as the angle the line from the origin to the affected element. This can effectively combine rotation with translation within a single animation.

Scaling

Scaling animation zoom_out_mapChanging the element's size. Described by scale factor in X and Y axis (allows independent scaling). As SVG has no native support for scaling origin, aniGen provides a more-or-less functional workaround. It's recommended to group any element you intent to scale, and only apply the scaling animation to this group to avoid issues.

Skewing

Skewing animation swap_horizswap_vertSeparated into horizontal (X axis) and vertical (Y axis) skew animations. Each keyframe is defined by the skew angle, zero being the initial value.

A workaround similar to that with scaling is employed for skewing, and similar care should be used when using this animation.

Attribute animation

Attribute animation text_formatChanges the selected attribute of the parent (except transform and several other attributes) through time. Each value indicates the new value. Several attributes (display, visibility, opacity) allow the user to select values from available presets.

If keyframes are selected in the keyframes window, the picker tool can be used to pick values of other (clicked) elements with relative ease.

Animated groups

Object menu Context menu AniGen expands the basic animation functionality by introducing animated groups.

The user can select any element (including groups) and save it as an animation state with main menu or right-click context menu.

States are grouped according to the number and order of elements, so that standard path animation is applicable between all of them. When created, animated group allows the user to set each state from the group as the value of given keyframes. This allows the user to quickly change one complex shape to another without the need to create and synchronize large number of attribute animations.

Animation state

Animation state dialogueAnimation states are set by selecting an object, and chosing object→object to animation state from the main menu, or via right-click context menu.

Animation state dialogueWhen selected, the user will be able to pick a name for the given state, as well as the group. If no group exists, or no group shares the element model necessary, the user will have to pick the New group option and naming the group.

Note: if a group is made into a state, its transformation is disregarded. This means one can duplicate a group, move it somewhere else, and tweak elements therein without fear of making the final animation travel the distance.

Note: if all children of selected elements share the same element model, a batch option is provided. This allows the user to set all the child elements as individual states, sharing the same group. For example, if the selected element is a layer, which has a number of sub-layers, each with a single state, the batch option will create a group named after the parent layer, and popuplate it with states named after each individual sub-layer. This is experimental.

Animated group

Keyframe window - animated group New animated group dialogue New animated group can be created via the main menu, or by right-click context menu.

Animated groups behave like any other animation, with few notable exceptions. While they have duration, begins, times, and so on, each value corresponds to a state name the user has given.

The keyframe window also includes a small preview of the selected shape, as well as an intensity slider. This allows the user to quickly create states part way between two existing state - intensity is the percentage of the change from previous state to the one in the given keyframe.

Keyframe window - animated group - animated attributes tabIntensity can also be set manually to a value outside the 0 - 1 range, creating an extrapolated state. This can have rather mixed results.

Tip: To "hold" a temporary value created with intensity slider, simply set the intensity of the following keyframe to zero.

Another addition is the ability to select which attributes will be animated. By default, the d attribute (see paths) is animated, but more can be added as the users desires.

State manager

Animation state manager Animation state interpolation Existing animation states can be viewed and changed with object→manage animation states menu option.

The dialogue shows all existing state groups, animation states, and a live preview. The states can be renamed, and the states can be deleted.

State groups can be hidden by clicking their name. Empty groups are deleted automatically.

Additionally, new states can be created from existing ones as an interpolation (inbetween value), or extrapolation, similar to the use of intensity option in keyframe window.

The new state is a combination of two previous states, and is added to the end of the group.

Bug reporting

Please report any bugs encountered to bugs(at)anigen.org. The report should include following: