Chops a stroke into a repeating dash pattern — the field for dashed and dotted lines, marching-ants borders, and ticked paths.
Declarative element:
<sk-dash-array-stroke-field>
Global: available as sk.DashArrayStrokeField inside a scene <script>.
This is the dash-pattern member of the StrokeField family: like every
field it turns where into how much
— a scalar weight consumers read by #id (field="#id") — but a stroke field is
defined only along a stroke (see the general SpatialField concept for
position-based fields). Here the weight follows arc-length (strokeCoord.x),
repeating an on/off cycle so a solid stroke reads as evenly spaced dashes.
Key attributes. segment-length is the length of one on+off cycle in stroke
units; on-fraction is the share of each cycle that is "on" (weight 1) versus the
gap (weight 0); and softness softens the on↔off edges. An offset shifts the
pattern along the stroke — offsetting a second stroke by half a cycle interleaves
two dash patterns so one fills the other's gaps, and animating offset marches the
dashes along the path.
Related. Sibling stroke fields: sk-progress-stroke-field (a single
start→end ramp) and sk-cross-stroke-field (fade across the width). The
usual consumer is a sk-tonemap applied through a sk-stroke-paint.
constructor(config?: { segmentLength?: number; onFraction?: number; softness?: number; offset?: number })Inherited from: StrokeField, SkenraAnimatable
— see those pages for inherited members.
| Property | Type | Default | Description | Declared by |
|---|---|---|---|---|
segmentLengthanimatable |
number |
— | Length of one on/off cycle along the stroke. | DashArrayStrokeField |
onFractionanimatable |
number |
— | Fraction of each segment that is “on” (weight 1). | DashArrayStrokeField |
softnessanimatable |
number |
— | Edge softness — how gradually the weight transitions at the boundary (0 = hard). | DashArrayStrokeField |
offsetanimatable |
number |
— | Phase offset of the pattern along the stroke. | DashArrayStrokeField |
| Property | Type | Default | Description | Declared by |
|---|---|---|---|---|
segmentLengthBasebase value |
number |
— | The base (non-animated) value of segmentLength. |
DashArrayStrokeField |
onFractionBasebase value |
number |
— | The base (non-animated) value of onFraction. |
DashArrayStrokeField |
softnessBasebase value |
number |
— | The base (non-animated) value of softness. |
DashArrayStrokeField |
offsetBasebase value |
number |
— | The base (non-animated) value of offset. |
DashArrayStrokeField |
remapCurve |
SampledCurve | null |
— | Optional curve that reshapes this field's raw [0, 1] output. | StrokeField |
remapPhase |
number |
0 |
Horizontal remap phase — an animatable scalar that translates a present | StrokeField |
enabled |
boolean |
true |
Whether this field is enabled. When disabled, evaluate() returns 0. |
StrokeField |
sceneread-only |
any |
— | Gets the Scene this animatable belongs to, if any. | SkenraAnimatable |
animationsread-only |
SkenraAnimation[] |
— | Public getter for the animations affecting this target. | SkenraAnimatable |
| Method | Description | Declared by |
|---|---|---|
animate(firstArg: TypedKeyframe<this>[] | TypedPropertyIndexedKeyframes<this> | Record<string, any> | globalThis.Keyframe[] | globalThis.PropertyIndexedKeyframes | null, secondArg?: number | KeyframeAnimationOptions | globalThis.KeyframeAnimationOptions): SkenraAnimation & Animation |
Creates a new SkenraAnimation for this target per Web Animations API. | SkenraAnimatable |
removeAnimation(animation: SkenraAnimation): boolean |
Removes a specific animation from this object. | SkenraAnimatable |
constrain(type: K, config: ConstraintConfigMap[K]): ConstraintReturnMap[K] |
Creates a constraint on this Animatable using a fluent API. | SkenraAnimatable |
// Primary stroke: on for first half of each segment
const primary = new DashArrayStrokeField({
segmentLength: 2.0,
onFraction: 0.5,
});
// Complementary stroke: on for second half (offset shifts the pattern)
const complement = new DashArrayStrokeField({
segmentLength: 2.0,
onFraction: 0.5,
offset: 0.5,
});