Interface INodeAnimateProps<SC>

Properties used to animate() a Node

interface INodeAnimateProps<SC> {
    alpha: number;
    color: number;
    colorBl: number;
    colorBottom: number;
    colorBr: number;
    colorLeft: number;
    colorRight: number;
    colorTl: number;
    colorTop: number;
    colorTr: number;
    height: number;
    mount: number;
    mountX: number;
    mountY: number;
    pivot: number;
    pivotX: number;
    pivotY: number;
    rotation: number;
    scale: number;
    scaleX: number;
    scaleY: number;
    shaderProps: Partial<SC["props"]>;
    srcHeight?: number;
    srcWidth?: number;
    srcX?: number;
    srcY?: number;
    width: number;
    x: number;
    y: number;
    zIndex: number;
    zIndexLocked: number;
}

Type Parameters

Hierarchy

  • Omit<CoreNodeAnimateProps, "shaderProps">
    • INodeAnimateProps

Properties

alpha color colorBl colorBottom colorBr colorLeft colorRight colorTl colorTop colorTr height mount mountX mountY pivot pivotX pivotY rotation scale scaleX scaleY shaderProps srcHeight? srcWidth? srcX? srcY? width x y zIndex zIndexLocked

Properties

alpha

alpha: number

The alpha opacity of the Node.

Remarks

The alpha value is a number between 0 and 1, where 0 is fully transparent and 1 is fully opaque.

Default

1

color

color: number

The color of the Node.

Remarks

The color value is a number in the format 0xRRGGBBAA, where RR is the red component, GG is the green component, BB is the blue component, and AA is the alpha component.

Gradient colors may be set by setting the different color sub-properties: colorTop, colorBottom, colorLeft, colorRight, colorTl, colorTr, colorBr, colorBl accordingly.

Default

0xffffffff (opaque white)

colorBl

colorBl: number

The color of the bottom-left corner of the Node for gradient rendering.

Remarks

See color for more information about color values and gradient rendering.

colorBottom

colorBottom: number

The color of the bottom edge of the Node for gradient rendering.

Remarks

See color for more information about color values and gradient rendering.

colorBr

colorBr: number

The color of the bottom-right corner of the Node for gradient rendering.

Remarks

See color for more information about color values and gradient rendering.

colorLeft

colorLeft: number

The color of the left edge of the Node for gradient rendering.

Remarks

See color for more information about color values and gradient rendering.

colorRight

colorRight: number

The color of the right edge of the Node for gradient rendering.

Remarks

See color for more information about color values and gradient rendering.

colorTl

colorTl: number

The color of the top-left corner of the Node for gradient rendering.

Remarks

See color for more information about color values and gradient rendering.

colorTop

colorTop: number

The color of the top edge of the Node for gradient rendering.

Remarks

See color for more information about color values and gradient rendering.

colorTr

colorTr: number

The color of the top-right corner of the Node for gradient rendering.

Remarks

See color for more information about color values and gradient rendering.

height

height: number

The height of the Node.

Default

0

mount

mount: number

Combined position of the Node's Mount Point

Remarks

The value can be any number between 0.0 and 1.0:

  • 0.0 defines the Mount Point at the top-left corner of the Node.
  • 0.5 defines it at the center of the Node.
  • 1.0 defines it at the bottom-right corner of the node.

Use the mountX and mountY props seperately for more control of the Mount Point.

When assigned, the same value is also passed to both the mountX and mountY props.

Default

0 (top-left)

mountX

mountX: number

X position of the Node's Mount Point

Remarks

The value can be any number between 0.0 and 1.0:

  • 0.0 defines the Mount Point's X position as the left-most edge of the Node
  • 0.5 defines it as the horizontal center of the Node
  • 1.0 defines it as the right-most edge of the Node.

The combination of mountX and mountY define the Mount Point

Default

0 (left-most edge)

mountY

mountY: number

Y position of the Node's Mount Point

Remarks

The value can be any number between 0.0 and 1.0:

  • 0.0 defines the Mount Point's Y position as the top-most edge of the Node
  • 0.5 defines it as the vertical center of the Node
  • 1.0 defines it as the bottom-most edge of the Node.

The combination of mountX and mountY define the Mount Point

Default

0 (top-most edge)

pivot

pivot: number

Combined position of the Node's Pivot Point

Remarks

The value can be any number between 0.0 and 1.0:

  • 0.0 defines the Pivot Point at the top-left corner of the Node.
  • 0.5 defines it at the center of the Node.
  • 1.0 defines it at the bottom-right corner of the node.

Use the pivotX and pivotY props seperately for more control of the Pivot Point.

When assigned, the same value is also passed to both the pivotX and pivotY props.

Default

0.5 (center)

pivotX

pivotX: number

X position of the Node's Pivot Point

Remarks

The value can be any number between 0.0 and 1.0:

  • 0.0 defines the Pivot Point's X position as the left-most edge of the Node
  • 0.5 defines it as the horizontal center of the Node
  • 1.0 defines it as the right-most edge of the Node.

The combination of pivotX and pivotY define the Pivot Point

Default

0.5 (centered on x-axis)

pivotY

pivotY: number

Y position of the Node's Pivot Point

Remarks

The value can be any number between 0.0 and 1.0:

  • 0.0 defines the Pivot Point's Y position as the top-most edge of the Node
  • 0.5 defines it as the vertical center of the Node
  • 1.0 defines it as the bottom-most edge of the Node.

The combination of pivotX and pivotY define the Pivot Point

Default

0.5 (centered on y-axis)

rotation

rotation: number

Rotation of the Node (in Radians)

Remarks

Sets the amount to rotate the Node by around it's Pivot Point (defined by the pivot props). Positive values rotate the Node clockwise, while negative values rotate it counter-clockwise.

Example values:

  • -Math.PI / 2: 90 degree rotation counter-clockwise
  • 0: No rotation
  • Math.PI / 2: 90 degree rotation clockwise
  • Math.PI: 180 degree rotation clockwise
  • 3 * Math.PI / 2: 270 degree rotation clockwise
  • 2 * Math.PI: 360 rotation clockwise

scale

scale: number

Scale to render the Node at

Remarks

The scale value multiplies the provided width and height of the Node around the Node's Pivot Point (defined by the pivot props).

Behind the scenes, setting this property sets both the scaleX and scaleY props to the same value.

NOTE: When the scaleX and scaleY props are explicitly set to different values, this property returns null. Setting null on this property will have no effect.

Default

1.0

scaleX

scaleX: number

Scale to render the Node at (X-Axis)

Remarks

The scaleX value multiplies the provided width of the Node around the Node's Pivot Point (defined by the pivot props).

Default

1.0

scaleY

scaleY: number

Scale to render the Node at (Y-Axis)

Remarks

The scaleY value multiplies the provided height of the Node around the Node's Pivot Point (defined by the pivot props).

Default

1.0

shaderProps

shaderProps: Partial<SC["props"]>

OptionalsrcHeight

srcHeight?: number

The height of the rectangle from which the Image Texture will be extracted. This value can be negative. If not provided, the image's source natural height will be used.

OptionalsrcWidth

srcWidth?: number

She width of the rectangle from which the Image Texture will be extracted. This value can be negative. If not provided, the image's source natural width will be used.

OptionalsrcX

srcX?: number

The x coordinate of the reference point of the rectangle from which the Texture will be extracted. width and height are provided. And only works when createImageBitmap is available. Only works when createImageBitmap is supported on the browser.

OptionalsrcY

srcY?: number

The y coordinate of the reference point of the rectangle from which the Texture will be extracted. Only used when source srcWidth width and srcHeight height are provided. Only works when createImageBitmap is supported on the browser.

width

width: number

The width of the Node.

Default

0

x

x: number

The x coordinate of the Node's Mount Point.

Remarks

See mountX and mountY for more information about setting the Mount Point.

Default

0

y

y: number

The y coordinate of the Node's Mount Point.

Remarks

See mountX and mountY for more information about setting the Mount Point.

Default

0

zIndex

zIndex: number

The Node's z-index.

Remarks

TBD

zIndexLocked

zIndexLocked: number

Settings

Member Visibility

On This Page

Properties