Blends between two other spline-sources by morph-progress — the way to make
one curve continuously interpolate into a different curve (a circle relaxing
into a square, an SVG glyph flowing into a hand-authored path).
Declarative element:
<sk-morph-spline-source>
Not on the sk.* global — construct via the declarative element or a module import.
This is the compositing member of the spline-source family: a spline-source
supplies the curve geometry for a AbstractSpline, so it lives as the
single geometry child of a sk-spline. Unlike the leaf sources, this one
has no geometry of its own — it wraps TWO other spline-sources and produces the
per-vertex linear interpolation between them. Both children are resampled to a
matching vertex count (the larger of the two) by arc length, then positions and
widths are lerped every frame at the current morph-progress. The children may
be any spline-sources — SVG, points, GPU, trail, or even a nested
sk-morph-spline-source for recursive composition.
Key attributes. morph-progress is the blend factor in [0, 1]: 0 = the
first (source) child exactly, 1 = the second (target) child exactly, and it
is animatable, so keyframing it 0 → 1 plays the morph. The two child roles are
fixed by DOM order — the FIRST *-spline-source child is the source, the SECOND
is the target; exactly two children are required (any other count makes the
morph inert). A child that is itself a GPU source
(sk-compute-buffer-spline-source, sk-custom-wgsl-spline-source)
or a sk-trail-spline-source contributes nothing until it has CPU-side
polyline data (first readback / first accumulated points), so the morph renders
nothing until BOTH children are ready. Like every spline-source it also carries
the family's distribution / distribution-count controls: a spline-source is
itself a points-source, so a sk-cloner given one places clones along the
blended curve, and these controls choose how it is sampled into those positions.
Related. Its two children are any members of the spline-source family:
sk-svg-spline-source, sk-points-spline-source,
sk-trail-spline-source, or the GPU sources
sk-compute-buffer-spline-source / sk-custom-wgsl-spline-source.
Its host is a sk-spline, whose curve then draws with a stroke paint,
carries an sk-align-to-spline-constraint, or seeds points and fields —
and those consumers see the morph animate as morph-progress sweeps.
constructor(config?: { id?: string; source?: SplineSource; target?: SplineSource; morphProgress?: number })Inherited from: AbstractSplineSource, SkenraAnimatable
— see those pages for inherited members.
| Property | Type | Default | Description | Declared by |
|---|---|---|---|---|
idconfig-only |
string |
— | Optional element id. | MorphSplineSourceConfig |
sourceconfig-only |
SplineSource |
— | The source (start, morph-progress 0) spline source instance for the | MorphSplineSourceConfig |
targetconfig-only |
SplineSource |
— | The target (end, morph-progress 1) spline source instance for the | MorphSplineSourceConfig |
morphProgressanimatable |
number |
0 |
Current morph progress. 0 = source, 1 = target. | MorphSplineSource |
| Property | Type | Default | Description | Declared by |
|---|---|---|---|---|
sourceChildread-only |
SplineSource | null |
— | The source (start) child, or null until supplied (imperatively or |
MorphSplineSource |
targetChildread-only |
SplineSource | null |
— | The target (end) child, or null until supplied (imperatively or |
MorphSplineSource |
vertexCountread-only |
number |
— | — | MorphSplineSource |
isValidread-only |
boolean |
— | — | MorphSplineSource |
isClosedread-only |
boolean |
— | — | MorphSplineSource |
polylineread-only |
readonly Readonly<SplinePoint>[] |
— | — | MorphSplineSource |
pointCountread-only |
number |
— | Cloner-facing point count. Tracks distribution: equals |
AbstractSplineSource |
localMatricesread-only |
Float32Array<ArrayBufferLike> | null |
— | — | AbstractSplineSource |
distribution |
SplineDistributionMode |
— | — | AbstractSplineSource |
distributionCount |
number |
— | — | AbstractSplineSource |
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 |
|---|---|---|
pointAt(t: number): SplinePoint | null |
Returns a point on the morphed spline at normalized parameter t. | MorphSplineSource |
getBoundsInSpace(fullTransform: Float32Array): PolylineBounds | null |
— | MorphSplineSource |
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 morphSource = new MorphSplineSource({ source: svgSource, target: pointsSource });
morphSource.morphProgress = 0.5; // halfway between source and target