Interface Animation

A Scene.addAnimations runs its list of animations and properties in parallel, and at the end of last animation it moves the position forward. Setting the advance:

1. To true of an animation property will move forward the position for the next property animation, but not the animation. The property of each element moves independently.
2. To true of an animation that isn't the last one, will move forward for the next animation within the list. The value used with the maximum of all the elements of the all the properties of the previous animation.
3. To false of the last animation, it won't move forward at the end.

Defines the duration of the animation of a single cycle in terms of frames, seconds, minutes or milliseconds. The total duration is duration*(iterationCount + 1). In case of numerical values, BeamToIX uses defaultUnit to known what kind of unit is it.

An easing is a interpolator runs t from [0, 1], where t=0 is the first frame and t=1 the last frame of the animation. This interpolator can be viewed as the speed interpolator and its the first one in the Animation Pipeline. The output value will be used to feed the . Usually outputs a value from [0, 1] but other values are also possible.

This interpolator can be used outside physical motion (left/right/top/bottom). In cases of textual property, such as color, text, src, the easing will define how quickly those values will change among a list defined valueText or by using valueFormat. In this case, the startValue and value should be between [0, 1]. Setting a startValue higher than value, will reverse the direction of the changes.

The easing can also be used to define the speed of the changes of multi-parameter properties, such as text-shadow, by using as an input of a valueFormat.

This is the first stage of the Animation Pipeline. The output value will be used to feed the .

BeamToIX includes a list of the most common easings by bundling the jquery.easing plugin. More can be added via plugins.

An easing can be defined by:

1. Name - It will use the list of easings predefined or added via plugins.
2. Expression - It evaluate the expression for each frame, passing the variable t.
3. Code Handler - This function will receive the variable t.

WARNING Code Handlers aren't teleported, therefore it can't be used in remote rendering.

If it's false, it will bypass the animation or property.

Applies a random changes with maximum of itemDelayDisturbance to the itemDelayDuration for each element defined by the selector.

Delay of the start of the animation between 2 elements defined inside the selector. The total duration of the animation will be: duration+count*itemDelayDuration.

Applies a modulus division to the elements defined in the selector when it relates the itemDelayDuration. A itemDelayDuration=2, will make the odd elements to have the same itemDelayDuration.

An oscillator is an optional interpolator that runs t from [easing(0), easing(1)] and the usually outputs a value from [-Amplitude, Amplitude] where usually f(0) = 0 and f(1) = 0. Its output will be generate v = valueStart + (value - valueStart) * oscillator(easing(t)) and then will be injected into a path as input.

An oscillator has the following usages:

1. A rotational movement, where the oscillator defines the rotation and the easing the defines the speed.

2. Flashing elements, where an element changes its opacity or text-shadow, and these values oscillate between [0, 1].

3. Uni-dimensional paths. Unlike paths, the oscillators have their value stored in the Action Link, allowing to link the end value to the next animation.

The oscillators shares the namespace with , allowing any easing function to operate also as a oscillator. Since the main function of an oscillator is to return to its original position at the end of the animation cycle, when an easing is used as an oscillator the best is to use the following:

{ iterationCount: 2,
  direction: alternate
}
Copy

An oscillator can be defined by:

1. Name - It will use the list of easings and oscillator predefined or added via plugins.
2. Expression - It evaluate the expression for each frame, passing the variable t.
3. Code Handler - This function will receive the variable t.

WARNING Code Handlers aren't teleported, therefore it can't be used in remote rendering.

Allows to the starting point of an animation. Use +, - for relative positions. Prefer relative positions over absolute positions. Use only if you need to off-sync an animation. Overlapping property animations isn't supported.