A path is an interpolator function where the input is the result of the oscillator interpolator after the easing interpolator usually, goes from [0, 1] and the output is an list of numbers, representing the n-dimensions of a path.
To reverse the direction path, set value = -1 and valueStart = 0.
To follow only a segment of the path, set both value and valueStart.

Multi-dimension paths are mutual exclusive with textual valueText.

Single-dimensions paths work similar to easings and oscillators.
These paths use the easing to define the speed and the path can create post-effects such as steps.
The output of the a single-path value isn't stored in the Action Link, unlike the oscillator.

A multi-dimension path can be used in the following ways:

  • via valueFormat. Allows to encode that path in a single property.
    Used in text-shadow, transform.
  • via dual-properties.

ABeamer has the following built-in dual-properties:

  • Interpolate the following CSS properties for DOM Elements:
  • left-top.
  • right-top.
  • left-bottom.
  • right-bottom.

  • Interpolate n parameters via valueFormat.
    ```json { selector: 'text-shadow', props: [{ valueFormat: '%dpx %dpx 2px black', path: { handler: 'circle', params: { radius: 6px, }, } }] }

  • Interpolate n-dimension paths for virtual elements.
    Virtual Elements such as WebGL can use 3D paths to move their objects.

Core paths

WARNING! In the ABeamer 2.x these core paths will move core-paths plugin.
To prevent breaking changes include now the js script core-paths.js on the html file.

ABeamer has the following core paths:
- line
- rect
- circle
- ellipse

see: gallery-path.




public export type

export type PathFunc = (t: number, params: PathParams, stage: uint,
    args?: ABeamerArgs) => number[];

Defines the type of a path function.
A path function is an interpolator that usually runs from [0, 1].
An path defines a movement in the n-space.


public export type

export type PathHandler = PathName | string | ExprString | PathFunc;

Defines the path type, which is either string representing a predefined path function or a custom function (see path function).
The path function interpolates from [0, 1].


public export type

export type PathParams = AnyParams;

Defines the Base parameters for every path function.
At the moment no parameter is required, but it can change in the future.



public export interface

export interface Path{ }

Path parameters defined in an Animation Property.


public property [Path]

handler: PathHandler;

Defines a Path by Name, Expression or Code Handler


public property [Path]

params?: FuncParams
    | LinePathParams
    | RectPathParams
    | CirclePathParams
    | EllipsePathParams;

Params passed to the Path. Depends on the Path Type



public export interface

export interface CenteredPathParams extends PathParams{ }


public property [CenteredPathParams]

centerX?: number | ExprString;


public property [CenteredPathParams]

centerY?: number | ExprString;


public export interface

export interface LinePathParams extends PathParams{ }


public property [LinePathParams]

x0?: number | ExprString;


public property [LinePathParams]

y0?: number | ExprString;


public property [LinePathParams]

x1?: number | ExprString;


public property [LinePathParams]

y1?: number | ExprString;


public export type

export type RectPathParams = LinePathParams;


public export interface

export interface CirclePathParams extends CenteredPathParams{ }


public property [CirclePathParams]

radius?: number | ExprString;


public export interface

export interface EllipsePathParams extends CenteredPathParams{ }


public property [EllipsePathParams]

radiusX?: number | ExprString;


public property [EllipsePathParams]

radiusY?: number | ExprString;