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:
valueFormat
. Allows to encode that path in a single property.text-shadow
, transform
.BeamToIX 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
.
example:
{ 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 BeamToIX 4.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.
BeamToIX has the following core paths:
- `line`
- `rect`
- `circle`
- `ellipse`
_see_: [gallery-path](/gallery/latest/#gallery-path).
<div class=api-header> </div>
#API
## PathFunc
<span class="code-badge badge-public">public</span> <span class="code-badge badge-export">export</span> <span class="code-badge badge-type">type</span>
```js
export type PathFunc = (t: number, params: PathParams, stage: uint,
args?: BeamToIXArgs) => 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;