Interface AnimationProp

Defines parameters used both by Animation and AnimationProp. The AnimationProp overrides the parameters defined by Animation. This way, an animation can have parameters for all animation properties and some animation properties can have different parameters. The duration parameter defined in the animation property

interface AnimationProp {
    advance?: boolean;
    bypassBackwardMode?: BypassMode;
    bypassForwardMode?: BypassMode;
    direction?: any;
    duration?: TimeHandler;
    easing?: EasingHandler;
    enabled?: boolean;
    itemDelayDisturbance?: TimeHandler;
    itemDelayDuration?: TimeHandler;
    itemDelayGrouping?: uint;
    iterationCount?: int;
    oscillator?: Oscillator;
    path?: Path;
    position?: TimeHandler;
    prop: PropName;
    roundFunc?: RoundFuncName;
    value?: any;
    valueFormat?: string;
    valueStart?: any;
    valueText?: any;
    waitFor?: WaitForList;
    onSetValue?(value: AnimPropValue, args?: BeamToIXArgs): boolean;
}

Hierarchy (view full)

AnimationCommonParams
- AnimationProp

Properties

`Optional`advance

advance?: boolean

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:

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.
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.
To false of the last animation, it won't move forward at the end.

`Optional`bypassBackwardMode

bypassBackwardMode?: BypassMode

Defines how the frames should be bypassed in case of a flush or another backward motion outside the rendering process. In a backward motion the first stage it's end point of animation.

Default

BP_FIRST_INSIDE

`Optional`bypassForwardMode

bypassForwardMode?: BypassMode

Defines how the frames should be bypassed in case of a flush or another forward motion outside the rendering process.

Default

BP_FIRST_INSIDE

`Optional`direction

direction?: any

Defines the direction of each iteration. Same as CSS animation-direction.

Example

'alternate'

Example

BeamToIX.DI_ALTERNATE

Example

BeamToIX.DS_NORMAL

`Optional`duration

duration?: TimeHandler

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.

See

#iterationCount

Example

'1s'

Example

'40ms'

Example

'20%'  (use only on the animation property duration)

Example

'5fps'

Example

2.5   (use only if the DefaultUnit is 's' or 'ms')

Example

(args) => '2s'  (JavaScript functions aren't teleportable)

Example

'=round(fps/2)'

`Optional`easing

easing?: EasingHandler

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:

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

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

Default

'linear'

See

easings

`Optional`enabled

enabled?: boolean

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

`Optional`itemDelayDisturbance

itemDelayDisturbance?: TimeHandler

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

`Optional`itemDelayDuration

itemDelayDuration?: TimeHandler

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.

See

itemDelayGrouping

`Optional`itemDelayGrouping

itemDelayGrouping?: uint

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.

`Optional`iterationCount

iterationCount?: int

Defines how many times the animation repeats itself. Same as CSS animation-iteration-count.

See

gallery/animate-loop

Example

1 (to run twice)

Example

3 (to run 4 times)

`Optional`oscillator

oscillator?: Oscillator

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:

A rotational movement, where the oscillator defines the rotation and the easing the defines the speed.
Flashing elements, where an element changes its opacity or text-shadow, and these values oscillate between [0, 1].
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
}

An oscillator can be defined by:

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

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

`Optional`path

path?: Path

`Optional`position

position?: TimeHandler

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.

Example

'-10fps'  (starts the animation 10 frames before the expected starting point)

Example

'+2ms'  (starts the animation 2 milliseconds after the expected starting point

Example

(args) => '4ms' (JavaScript functions aren't teleportable)

prop

prop: PropName

Defines the property name. The property corresponds to DOM style element or special properties

See

AnimationPropName

`Optional`roundFunc

roundFunc?: RoundFuncName

Round function to apply after easing->oscillator->path. If this value is not set, for pixels properties the round function will be used, for other properties there is no default round function.

`Optional`value

value?: any

Defines the end numerical value into the Animation Pipeline (easing->oscillator->path|valueText->valueFormat). Easing interpolates from valueStart to value.

For pixels, use a numerical value.
Use textual properties, usually don't need to define this value since the default is 1.
To have a value relative to the starting value (valueStart or computed value), use '+value' or '-value'.
It supports expressions and Code Handlers.

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

Default

Example

'+10'

Example

`Optional`valueFormat

valueFormat?: string

Formats the value using the sprintf rules. This is the last node in the computation pipeline. It can format numerical values returned by the easing->oscillator, but also each value of a path and a value returning from valueText.

Example

'%dpx %dpx 8px white'

Example

'rotateX(%fdeg)'

Example

'rotateX(%fdeg)'

`Optional`valueStart

valueStart?: any

Defines the starting value of an animation injected into the Animation Pipeline (easing➝oscillator➝path|valueText➝valueFormat). Easing interpolates from valueStart to value.

Use only if:

BeamToIX can't get the value from the element property.
There is no [](#Action Link) or you want to have a different start value.
Handle virtual elements.

Always set this value CSS transforms, since BeamToIX doesn't computes the CSS transform.
For pixels, all write text with 'px' suffix unless is defined valueFormat.
To interpolate textual values, usually set valueStart=0.
It supports expressions and Code Handlers.

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

Example

'4px'

Example

'true'

Example

'=frameCount'

If `valueFormat='%dpx'`

Example

`Optional`valueText

valueText?: any

Provides a list of textual values, expression or function to be interpolated. This value is computed after easing, oscillator and path interpolators and round function. Mutual exclusive with pixels, multi-dimension paths and booleans.

Used by textual properties such as color, url, font-family and text.

`Optional`waitFor

waitFor?: WaitForList

EXPERIMENTAL Waits for the adapter to be ready to deliver an asset before instructing the render to move to the next frame or give the server order to store the image. Used to wait for loading images or sync with videos.

This feature is not implemented yet...Coming soon .

See

gallery/animate-video-sync

Methods

`Optional`onSetValue

onSetValue(value, args?): boolean
This event is fired before modifying an element property during rending. Use if you need to handle virtual elements. or if you want to manually set an element value. If returns false, BeamToIX won't set the element property.

WARNING Events aren't teleported, therefore it can't be used in remote rendering.
Parameters
- value: AnimPropValue
- Optionalargs: BeamToIXArgs
Returns boolean
- Defined in docs/ts/API - end-user/animations.ts:353

Interface AnimationProp

Hierarchy (view full)

Index

Properties

Methods

Properties

Optionaladvance

OptionalbypassBackwardMode

Default

OptionalbypassForwardMode

Default

Optionaldirection

Example

Example

Example

Optionalduration

See

Example

Example

Example

Example

Example

Example

Example

Example

Optionaleasing

Default

See

Optionalenabled

OptionalitemDelayDisturbance

OptionalitemDelayDuration

See

OptionalitemDelayGrouping

OptionaliterationCount

See

Example

Example

Optionaloscillator

Optionalpath

Optionalposition

Example

Example

Example

prop

See

OptionalroundFunc

Optionalvalue

Default

Example

Example

OptionalvalueFormat

Example

Example

Example

OptionalvalueStart

Example

Example

Example

Example

Example

OptionalvalueText

OptionalwaitFor

See

Methods

OptionalonSetValue

Parameters

Returns boolean

Settings

On This Page

`Optional`advance

`Optional`bypassBackwardMode

`Optional`bypassForwardMode

`Optional`direction

`Optional`duration

`Optional`easing

`Optional`enabled

`Optional`itemDelayDisturbance

`Optional`itemDelayDuration

`Optional`itemDelayGrouping

`Optional`iterationCount

`Optional`oscillator

`Optional`path

`Optional`position

`Optional`roundFunc

`Optional`value

`Optional`valueFormat

`Optional`valueStart

`Optional`valueText

`Optional`waitFor

`Optional`onSetValue