Ramps a value from the start of a stroke to its end — the field for gradients that run along a path, reveal-along-length effects, and progress bars.
Declarative element:
<sk-progress-stroke-field>
Global: available as sk.ProgressStrokeField inside a scene <script>.
This is the along-the-length 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 is arc-length progress (strokeCoord.x): 0
at the stroke start, 1 at the end, rising linearly between — so a tonemap driven
by it sweeps smoothly from one end of the path to the other.
Key attributes. clamp keeps the weight within [0, 1] through the end caps
(on by default; turn it off to let cap regions read slightly past the ends).
cap-progress-mode chooses whether progress is measured across the stroke body
only or all the way to the cap tips. It needs no reference spline — it reads only
the stroke coordinate.
Related. Sibling stroke fields: sk-dash-array-stroke-field (a repeating
dash pattern) and sk-cross-stroke-field (fade across the width). For
progress along a free-standing spline rather than a stroke, see
sk-spline-progress-gradient-field. The usual consumer is a
sk-tonemap applied through a sk-stroke-paint.
constructor(config?: { clamp?: boolean; capProgressMode?: CapProgressMode })Inherited from: StrokeField, SkenraAnimatable
— see those pages for inherited members.
| Property | Type | Default | Description | Declared by |
|---|---|---|---|---|
clampanimatable |
boolean |
— | Whether the output is clamped to [0, 1]. | ProgressStrokeField |
capProgressModeanimatable |
CapProgressMode |
— | How progress is computed relative to stroke caps. | ProgressStrokeField |
| Property | Type | Default | Description | Declared by |
|---|---|---|---|---|
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 |
const field = new ProgressStrokeField();
// At start: weight = 0
field.evaluate([0, 0, 0], [0, 0]);
// At midpoint: weight = 0.5
field.evaluate([0, 0, 0], [0.5, 0]);
// At end: weight = 1
field.evaluate([0, 0, 0], [1, 0]);