Action

An action define how the object will be changed. For example, we can have a move action which will translate an project to another coordinate in the screen. We have the following actions in the framework.

• Location
• Scale
• Rotate
• Color

action = new animation.shift(obj,100,100);
action = new animation.scale(obj,0.5,0.5);
action = new animation.rotate(obj,250);
action = new animation.color(obj,0.2,0.2,0.2,0.3); // ARGB 

Word

Usually, when an action is executed, we will not change to the final value directly. Instead, we will use the start and end attributes and generate a stream of intermediate values to make it an animation. 

We have different ways to generate the intermediate values.

• Linear
• multi linear
• exponential
• External timeline

word = new animation.linear(action, 10, 10);
word = new animation.multilinear(action, 0.5, 5,0.5,5);
word = new animation.exponential(action, 0.5,10); 

Program

Each word can operate on a set of objects in the same way only. If we want multiple objects animated in the different ways, we need to have multiple words and put all of them as a program. All words in the same program will share the timeline. All of them will be updated simutaneously. 

progm = new animation.program([word1,word2,word3])
progm.start();
progm.finish();
progm.step(0.1);
progm.stop(); 

Convinient functions

For people which want to implement a simple animation for a group of objects, we provide a set of convienent functions which can implement the animation in a single line. For example,

(new animation.shift(10,10)).run([obj1,obj2]);

The run method will create word and program which contains the shift animation and start it. The following functions are provides with different functions.

• run/runlinear(objs)
  • Execute the action in linear scaling mode.
• runmultilinear(settings,objs)
  • Execute the action in multilibnear mode
• runexp(settings,objs)
  • Execute the action in exponential mode
• setDefaultMode(m)
  • Set the time mode for the program
    • 'realtime': Use realtime mode
    • 'frame': Use frame mode

Example

lightbar = app.get("lightbar");
// Get the new position
newy = app.get("item"+n).y; 
// Create a word to move to the new position at time 0 to 0.3
word = new word(new animation.shift(0,newy-lightbar.y), 0, 0.3);
new animation.program([word]).start();

SVG animation support

In addition to write the animation by hand, support SVG animation is another choice. We can use a graphic editor to compose the animation. There are two topic here.

• When
  • This is the starting point of the animation.
• How
  • After the animation is started, what's the actions and words we should perform.

A SVG animation is typically looks like

<rect>
    <animationTransform type="translate" begin="0s" dur="9s" fill=freeze by="100,100" />
</rect>

This is equipvalent to the shift(100,100) in the MadButterfly. Since the SVG animation is big, as the SVG renderer of the MadButterfly, we do not target to support the full SVG animation. The goal is to support the SVG animation produced by the tools. Fortunate, or unfortunate, the inkscpae do not support SVG animation yet. We will implement a simple one under the inkscape-pybind framework as well as the scene editor.

Initially, we will support the following items only.

• <animationTransform type="translate">
• <animationTransform type="scale">
• <animationTransform type="rotate">

There are some additional limitations

• We will support the linear time only.
• In order to simplify the implementation, we will support the group animation only. It means that we only respect the animation elements inside the group.
• We only support additive=sum and accumulate=sum.
• No repeatCount support. If this is necessary, we can use javascript to do it.
• The begin is always "indefinite". The animation is always started by the javascript.

For the detail of the inkscape for the MadButterfly, please look at InkscapeForMadButterfly.