@pixodesk/svg-animator-web 1.0.40 → 1.0.41
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +12 -4
- package/dist/{internal-BmFv1B6H.d.cts → PxAnimator-yjuSFhQw.d.cts} +8 -29
- package/dist/{internal-BmFv1B6H.d.ts → PxAnimator-yjuSFhQw.d.ts} +8 -29
- package/dist/{chunk-TNWZIIVG.js → chunk-BYDBNKO7.js} +1 -1
- package/dist/chunk-BYDBNKO7.js.map +1 -0
- package/dist/index.cjs +227 -230
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +10 -10
- package/dist/index.d.ts +10 -10
- package/dist/index.js +222 -222
- package/dist/index.js.map +1 -1
- package/dist/index.min.cjs +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.prerendered-waapi.umd.js +53 -53
- package/dist/index.prerendered-waapi.umd.js.map +1 -1
- package/dist/index.prerendered-waapi.umd.min.js +1 -1
- package/dist/index.prerendered.umd.js +68 -68
- package/dist/index.prerendered.umd.js.map +1 -1
- package/dist/index.prerendered.umd.min.js +1 -1
- package/dist/internal.cjs.map +1 -1
- package/dist/internal.d.cts +24 -1
- package/dist/internal.d.ts +24 -1
- package/dist/internal.js +1 -1
- package/dist/internal.min.cjs +1 -1
- package/dist/pixodesk-svg-animator.umd.js +137 -137
- package/dist/pixodesk-svg-animator.umd.js.map +1 -1
- package/dist/pixodesk-svg-animator.umd.min.js +1 -1
- package/package.json +2 -2
- package/dist/chunk-TNWZIIVG.js.map +0 -1
|
@@ -545,7 +545,7 @@ var PixodeskAnimator = (() => {
|
|
|
545
545
|
* The base can be the result of px.object() or px.openObject() — anything with a _shape property.
|
|
546
546
|
*
|
|
547
547
|
* @example
|
|
548
|
-
* const PxSvgNodeSchema = px.extendedObject(
|
|
548
|
+
* const PxSvgNodeSchema = px.extendedObject(PxNodeBaseSchema, { width: px.number().optional() });
|
|
549
549
|
*/
|
|
550
550
|
extendedObject: (base, extra) => new Obj(__spreadValues(__spreadValues({}, base._shape), extra)),
|
|
551
551
|
/** Array whose unrecoverable items are filtered out. Default: []. */
|
|
@@ -637,7 +637,7 @@ var PixodeskAnimator = (() => {
|
|
|
637
637
|
native: "native",
|
|
638
638
|
js: "js"
|
|
639
639
|
};
|
|
640
|
-
var
|
|
640
|
+
var PxTimelineEngineSetting = __spreadProps(__spreadValues({}, PxTimelineEngine), {
|
|
641
641
|
auto: "auto"
|
|
642
642
|
});
|
|
643
643
|
var PX_TRIGGER_DEFAULTS = {
|
|
@@ -780,7 +780,7 @@ var PixodeskAnimator = (() => {
|
|
|
780
780
|
flattenMemo.set(cfg, flat);
|
|
781
781
|
return flat;
|
|
782
782
|
}
|
|
783
|
-
function
|
|
783
|
+
function getDefinitions(doc) {
|
|
784
784
|
var _a;
|
|
785
785
|
if (!doc) return void 0;
|
|
786
786
|
return (_a = getAnimatorConfig(doc)) == null ? void 0 : _a.definitions;
|
|
@@ -823,20 +823,20 @@ var PixodeskAnimator = (() => {
|
|
|
823
823
|
// its internal COPY-PASTE payload, which never validates against this schema.)
|
|
824
824
|
}));
|
|
825
825
|
var anyKf = (kf) => kf;
|
|
826
|
-
var
|
|
826
|
+
var keyframeTime = (kf) => {
|
|
827
827
|
var _a, _b;
|
|
828
828
|
return (_b = (_a = anyKf(kf).time) != null ? _a : anyKf(kf).t) != null ? _b : 0;
|
|
829
829
|
};
|
|
830
|
-
var
|
|
830
|
+
var keyframeValue = (kf) => {
|
|
831
831
|
var _a;
|
|
832
832
|
return (_a = anyKf(kf).value) != null ? _a : anyKf(kf).v;
|
|
833
833
|
};
|
|
834
|
-
var
|
|
834
|
+
var keyframeEasing = (kf) => {
|
|
835
835
|
var _a;
|
|
836
836
|
return (_a = anyKf(kf).easing) != null ? _a : anyKf(kf).e;
|
|
837
837
|
};
|
|
838
|
-
var
|
|
839
|
-
var
|
|
838
|
+
var keyframeTangentIn = (kf) => anyKf(kf).tangentIn;
|
|
839
|
+
var keyframeTangentOut = (kf) => anyKf(kf).tangentOut;
|
|
840
840
|
var PxLoopSchema = implementsInterface()(px.object({
|
|
841
841
|
segmentCount: px.number().optional(),
|
|
842
842
|
repeatAt: px.enum([PxLoopRepeatAt.start, PxLoopRepeatAt.end]).optional(),
|
|
@@ -890,7 +890,7 @@ var PixodeskAnimator = (() => {
|
|
|
890
890
|
unitsPerEm: px.number(),
|
|
891
891
|
glyphs: px.record(PxGlyphSchema)
|
|
892
892
|
}));
|
|
893
|
-
var
|
|
893
|
+
var PxDefinitionsSchema = implementsInterface()(px.object({
|
|
894
894
|
easings: px.record(px.tuple([px.number(), px.number(), px.number(), px.number()])).optional(),
|
|
895
895
|
animations: px.record(PxAnimationDefinitionSchema).optional(),
|
|
896
896
|
fonts: px.record(PxGlyphFontSchema).optional()
|
|
@@ -928,7 +928,7 @@ var PixodeskAnimator = (() => {
|
|
|
928
928
|
offset: px.number().optional(),
|
|
929
929
|
distance: px.number().optional()
|
|
930
930
|
}));
|
|
931
|
-
var PxTimelineEngineSchema = px.enum([
|
|
931
|
+
var PxTimelineEngineSchema = px.enum([PxTimelineEngineSetting.auto, PxTimelineEngineSetting.native, PxTimelineEngineSetting.js]).optional();
|
|
932
932
|
var PxTimeTimelineSchema = implementsInterface()(px.object({
|
|
933
933
|
type: px.literal("time").optional(),
|
|
934
934
|
engine: PxTimelineEngineSchema,
|
|
@@ -982,7 +982,7 @@ var PixodeskAnimator = (() => {
|
|
|
982
982
|
// at this level only on the runtime view, like the rest of the playback dynamics.)
|
|
983
983
|
// THE spelling of "what advances progress" — clock / scroll / view (review §2.1).
|
|
984
984
|
timeline: PxTimelineSchema.optional(),
|
|
985
|
-
definitions:
|
|
985
|
+
definitions: PxDefinitionsSchema.optional(),
|
|
986
986
|
bindings: px.array(PxBindingSchema).optional(),
|
|
987
987
|
debugGlobalName: px.string().optional(),
|
|
988
988
|
// Declared HERE because this is a closed object: an undeclared key would be stripped by
|
|
@@ -1071,7 +1071,7 @@ var PixodeskAnimator = (() => {
|
|
|
1071
1071
|
PxPropertyAnimationSchema
|
|
1072
1072
|
]);
|
|
1073
1073
|
var PxFillGradientEffectSchema = implementsInterface()(px.object({
|
|
1074
|
-
// Contextual kind — the `type` convention, see `
|
|
1074
|
+
// Contextual kind — the `type` convention, see `PxNodeBaseSchema.type`.
|
|
1075
1075
|
type: px.enum([PxGradientType.linear, PxGradientType.radial]),
|
|
1076
1076
|
start: PxAnimatableVec2Schema.optional(),
|
|
1077
1077
|
end: PxAnimatableVec2Schema.optional(),
|
|
@@ -1108,7 +1108,7 @@ var PixodeskAnimator = (() => {
|
|
|
1108
1108
|
textPath: PxTextPathEffectSchema.optional(),
|
|
1109
1109
|
text: PxTextEffectSchema.optional()
|
|
1110
1110
|
}));
|
|
1111
|
-
var
|
|
1111
|
+
var PxNodeBaseSchema = px.openObject({
|
|
1112
1112
|
// CONVENTION (SCHEMA-DESIGN R1 / issues N4): `type` is the ONE word for "what
|
|
1113
1113
|
// kind of thing is this", discriminated by its CARRIER — here the node TAG
|
|
1114
1114
|
// (`rect`, `text`), and inside a sub-object that object's kind (`fillGradient.type`,
|
|
@@ -1123,7 +1123,7 @@ var PixodeskAnimator = (() => {
|
|
|
1123
1123
|
// `type` is taken by the tag name, so the attribute travels here and the renderer puts
|
|
1124
1124
|
// it back (`PxAnimatorDOM.renderNode`, `PxRnRender`). Declared here — not merely
|
|
1125
1125
|
// documented — because a wire key that is not in a schema is invisible to the
|
|
1126
|
-
// minifier's reserve list and gets renamed (
|
|
1126
|
+
// minifier's reserve list and gets renamed (dev-docs/plans/minification-boundary.md §1.1).
|
|
1127
1127
|
domType: px.string().optional(),
|
|
1128
1128
|
// Text content of a `<text>` / `<tspan>`. Declared, so a non-string value is a schema error
|
|
1129
1129
|
// and the minifier reserves the key; `text` is NOT an alias for it and is not read anywhere.
|
|
@@ -1131,7 +1131,7 @@ var PixodeskAnimator = (() => {
|
|
|
1131
1131
|
id: px.string().optional(),
|
|
1132
1132
|
meta: px.any().optional(),
|
|
1133
1133
|
// Player-effects bucket emitted by the Editor's lightweight design format.
|
|
1134
|
-
// Consumed and removed by `
|
|
1134
|
+
// Consumed and removed by `materializeNodeEffects` before any other normalization
|
|
1135
1135
|
// (see `createAnimatorImpl`), so downstream code never sees it.
|
|
1136
1136
|
effects: PxEffectsSchema.optional(),
|
|
1137
1137
|
// `PxElementAnimation` (not just `PxAnimationDefinition`) — accepts
|
|
@@ -1140,10 +1140,10 @@ var PixodeskAnimator = (() => {
|
|
|
1140
1140
|
animate: PxElementAnimationSchema.optional(),
|
|
1141
1141
|
style: px.record(px.union([px.string(), px.number()])).optional()
|
|
1142
1142
|
}, PxAttrValueSchema);
|
|
1143
|
-
var PxNodeSchema = px.openObject(__spreadProps(__spreadValues({},
|
|
1143
|
+
var PxNodeSchema = px.openObject(__spreadProps(__spreadValues({}, PxNodeBaseSchema._shape), {
|
|
1144
1144
|
children: px.lazy(() => px.array(PxNodeSchema), []).optional()
|
|
1145
1145
|
}), PxAttrValueSchema);
|
|
1146
|
-
var
|
|
1146
|
+
var PxSvgNodeRootSchema = px.object({
|
|
1147
1147
|
// `"100%"` and other SVG length strings are legal here — a number-only slot rejected
|
|
1148
1148
|
// real documents (e.g. apple-store-look-14-main.json) at the root <svg>.
|
|
1149
1149
|
width: px.union([px.number(), px.string()]).optional(),
|
|
@@ -1151,7 +1151,7 @@ var PixodeskAnimator = (() => {
|
|
|
1151
1151
|
viewBox: px.string().optional(),
|
|
1152
1152
|
animator: PxAnimatorConfigSchema.optional()
|
|
1153
1153
|
});
|
|
1154
|
-
var PxAnimatedSvgDocumentSchema = px.openObject(__spreadProps(__spreadValues(__spreadValues({},
|
|
1154
|
+
var PxAnimatedSvgDocumentSchema = px.openObject(__spreadProps(__spreadValues(__spreadValues({}, PxNodeBaseSchema._shape), PxSvgNodeRootSchema._shape), {
|
|
1155
1155
|
type: px.literal("svg"),
|
|
1156
1156
|
// override string → literal to require 'svg'
|
|
1157
1157
|
children: px.array(PxNodeSchema).optional()
|
|
@@ -1388,9 +1388,9 @@ var PixodeskAnimator = (() => {
|
|
|
1388
1388
|
}
|
|
1389
1389
|
return void 0;
|
|
1390
1390
|
}
|
|
1391
|
-
var
|
|
1392
|
-
var
|
|
1393
|
-
var
|
|
1391
|
+
var PX_COLOR_ATTR_NAMES = /* @__PURE__ */ new Set(["color", "fill", "flood-color", "lighting-color", "stop-color", "stroke"]);
|
|
1392
|
+
var PX_TRANSFORM_FN_NAMES = /* @__PURE__ */ new Set(["translate", "rotate", "scale", "skew"]);
|
|
1393
|
+
var PX_PCT_BASED_ATTR_NAMES = /* @__PURE__ */ new Set(["offset-distance", "offsetDistance"]);
|
|
1394
1394
|
function composeTransformParts(parts, opts) {
|
|
1395
1395
|
var _a;
|
|
1396
1396
|
if (!parts) return "";
|
|
@@ -1588,7 +1588,7 @@ var PixodeskAnimator = (() => {
|
|
|
1588
1588
|
|
|
1589
1589
|
// ../svg-animator-core/src/materialize/PxMotionPath.ts
|
|
1590
1590
|
function getKfTranslate(kf) {
|
|
1591
|
-
const v =
|
|
1591
|
+
const v = keyframeValue(kf);
|
|
1592
1592
|
if (!v) return void 0;
|
|
1593
1593
|
if (Array.isArray(v) && v.length >= 2 && typeof v[0] === "number" && typeof v[1] === "number") {
|
|
1594
1594
|
return [v[0], v[1]];
|
|
@@ -1598,17 +1598,17 @@ var PixodeskAnimator = (() => {
|
|
|
1598
1598
|
return void 0;
|
|
1599
1599
|
}
|
|
1600
1600
|
function getKfTime(kf) {
|
|
1601
|
-
return
|
|
1601
|
+
return keyframeTime(kf);
|
|
1602
1602
|
}
|
|
1603
1603
|
function getKfEasing(kf) {
|
|
1604
|
-
return
|
|
1604
|
+
return keyframeEasing(kf);
|
|
1605
1605
|
}
|
|
1606
1606
|
function propAnimIsMotionPath(anim) {
|
|
1607
1607
|
const kfs = anim.keyframes;
|
|
1608
1608
|
if (!Array.isArray(kfs)) return false;
|
|
1609
1609
|
if (anim.autoOrient) return true;
|
|
1610
1610
|
for (const kf of kfs) {
|
|
1611
|
-
if (
|
|
1611
|
+
if (keyframeTangentIn(kf) || keyframeTangentOut(kf)) return true;
|
|
1612
1612
|
}
|
|
1613
1613
|
return false;
|
|
1614
1614
|
}
|
|
@@ -1617,8 +1617,8 @@ var PixodeskAnimator = (() => {
|
|
|
1617
1617
|
let byNext = _segmentCache.get(prevKf);
|
|
1618
1618
|
const existing = byNext == null ? void 0 : byNext.get(nextKf);
|
|
1619
1619
|
if (existing) return existing;
|
|
1620
|
-
const to =
|
|
1621
|
-
const ti =
|
|
1620
|
+
const to = keyframeTangentOut(prevKf);
|
|
1621
|
+
const ti = keyframeTangentIn(nextKf);
|
|
1622
1622
|
const P1 = [prevPos[0] + (to ? to[0] : 0), prevPos[1] + (to ? to[1] : 0)];
|
|
1623
1623
|
const P2 = [nextPos[0] + (ti ? ti[0] : 0), nextPos[1] + (ti ? ti[1] : 0)];
|
|
1624
1624
|
const lut = bezier2D_arcLengthLUT(prevPos, P1, P2, nextPos);
|
|
@@ -1684,7 +1684,7 @@ var PixodeskAnimator = (() => {
|
|
|
1684
1684
|
function unwrapAutoOrientRotations(kfs) {
|
|
1685
1685
|
let prev;
|
|
1686
1686
|
for (const kf of kfs) {
|
|
1687
|
-
const v =
|
|
1687
|
+
const v = keyframeValue(kf);
|
|
1688
1688
|
if (!v || typeof v.rotate !== "number") continue;
|
|
1689
1689
|
if (prev === void 0) {
|
|
1690
1690
|
prev = v.rotate;
|
|
@@ -1701,7 +1701,7 @@ var PixodeskAnimator = (() => {
|
|
|
1701
1701
|
return { t: time, v: value };
|
|
1702
1702
|
}
|
|
1703
1703
|
function getKfValueParts(kf) {
|
|
1704
|
-
const v =
|
|
1704
|
+
const v = keyframeValue(kf);
|
|
1705
1705
|
if (!v || typeof v !== "object" || Array.isArray(v)) return void 0;
|
|
1706
1706
|
return v;
|
|
1707
1707
|
}
|
|
@@ -1763,7 +1763,7 @@ var PixodeskAnimator = (() => {
|
|
|
1763
1763
|
}
|
|
1764
1764
|
function insertSharpCornerStepKfIfNeeded(out, prevKf, nextKf, prevPos, nextPos, rotationTol) {
|
|
1765
1765
|
const lastKf = out[out.length - 1];
|
|
1766
|
-
const lastV =
|
|
1766
|
+
const lastV = keyframeValue(lastKf);
|
|
1767
1767
|
const prevExit = lastV == null ? void 0 : lastV.rotate;
|
|
1768
1768
|
if (typeof prevExit !== "number") return;
|
|
1769
1769
|
const boundaryV = getKfValueParts(prevKf);
|
|
@@ -1911,7 +1911,7 @@ var PixodeskAnimator = (() => {
|
|
|
1911
1911
|
}
|
|
1912
1912
|
|
|
1913
1913
|
// ../svg-animator-core/src/animation/PxDefinitions.ts
|
|
1914
|
-
var
|
|
1914
|
+
var PX_LOOP_JUMP_SHIFT_MS = 1;
|
|
1915
1915
|
function deepEqualValue(a, b) {
|
|
1916
1916
|
if (a === b) return true;
|
|
1917
1917
|
if (typeof a !== typeof b || a === null || b === null || typeof a !== "object") return false;
|
|
@@ -2087,7 +2087,7 @@ var PixodeskAnimator = (() => {
|
|
|
2087
2087
|
const bPaths = (_b = b == null ? void 0 : b.paths) != null ? _b : Array.isArray(b) ? b : [];
|
|
2088
2088
|
return { paths: interpolateBeziers(aPaths, bPaths, t) };
|
|
2089
2089
|
}
|
|
2090
|
-
if (
|
|
2090
|
+
if (PX_COLOR_ATTR_NAMES.has(propName)) {
|
|
2091
2091
|
return interpolateColor(a || [0, 0, 0, 1], b || [0, 0, 0, 1], t);
|
|
2092
2092
|
}
|
|
2093
2093
|
if (propName === "transform" && typeof a === "object" && a !== null && !Array.isArray(a) && typeof b === "object" && b !== null && !Array.isArray(b)) {
|
|
@@ -2096,7 +2096,7 @@ var PixodeskAnimator = (() => {
|
|
|
2096
2096
|
if (propName === "rotate" && typeof a === "number" && typeof b === "number") {
|
|
2097
2097
|
return interpolateNum(a, b, t);
|
|
2098
2098
|
}
|
|
2099
|
-
if (
|
|
2099
|
+
if (PX_TRANSFORM_FN_NAMES.has(propName) || propName === "stroke-dasharray" || propName === "strokeDasharray") {
|
|
2100
2100
|
return interpolateVec(a || [], b || [], t);
|
|
2101
2101
|
}
|
|
2102
2102
|
return interpolateNum(+(a || 0), +(b || 0), t);
|
|
@@ -2148,8 +2148,8 @@ var PixodeskAnimator = (() => {
|
|
|
2148
2148
|
relT: (kf.t - segStartT) / segDuration,
|
|
2149
2149
|
v: kf.v,
|
|
2150
2150
|
e: kf.e,
|
|
2151
|
-
tangentIn:
|
|
2152
|
-
tangentOut:
|
|
2151
|
+
tangentIn: keyframeTangentIn(kf),
|
|
2152
|
+
tangentOut: keyframeTangentOut(kf)
|
|
2153
2153
|
}));
|
|
2154
2154
|
const fullReps = Math.floor(fillDuration / segDuration);
|
|
2155
2155
|
const remainder = fillDuration - fullReps * segDuration;
|
|
@@ -2215,7 +2215,7 @@ var PixodeskAnimator = (() => {
|
|
|
2215
2215
|
}
|
|
2216
2216
|
}
|
|
2217
2217
|
const pushed = {
|
|
2218
|
-
t: repStart + entry.relT * segDuration + (isBoundary ?
|
|
2218
|
+
t: repStart + entry.relT * segDuration + (isBoundary ? PX_LOOP_JUMP_SHIFT_MS : 0),
|
|
2219
2219
|
v: entry.v,
|
|
2220
2220
|
e: i < entries.length - 1 ? entry.e : void 0
|
|
2221
2221
|
};
|
|
@@ -2302,14 +2302,14 @@ var PixodeskAnimator = (() => {
|
|
|
2302
2302
|
const keyframes = propAnim.keyframes || [];
|
|
2303
2303
|
const normalized = [];
|
|
2304
2304
|
for (const kf of keyframes) {
|
|
2305
|
-
const timePct =
|
|
2306
|
-
let value =
|
|
2307
|
-
const easing =
|
|
2305
|
+
const timePct = keyframeTime(kf);
|
|
2306
|
+
let value = keyframeValue(kf);
|
|
2307
|
+
const easing = keyframeEasing(kf);
|
|
2308
2308
|
if (propName === "d") {
|
|
2309
2309
|
value = normalizePathValue(value);
|
|
2310
2310
|
}
|
|
2311
2311
|
const propNameKebab = isCamelCaseWord(propName) ? camelCaseToKebabWordIfNeeded(propName) : propName;
|
|
2312
|
-
if (
|
|
2312
|
+
if (PX_COLOR_ATTR_NAMES.has(propNameKebab)) {
|
|
2313
2313
|
value = (_a = parseColor(value)) != null ? _a : value;
|
|
2314
2314
|
}
|
|
2315
2315
|
const normKf = {
|
|
@@ -2317,8 +2317,8 @@ var PixodeskAnimator = (() => {
|
|
|
2317
2317
|
v: value,
|
|
2318
2318
|
e: resolveEasing(easing, defs)
|
|
2319
2319
|
};
|
|
2320
|
-
const tIn =
|
|
2321
|
-
const tOut =
|
|
2320
|
+
const tIn = keyframeTangentIn(kf);
|
|
2321
|
+
const tOut = keyframeTangentOut(kf);
|
|
2322
2322
|
if (tIn) normKf.tangentIn = tIn;
|
|
2323
2323
|
if (tOut) normKf.tangentOut = tOut;
|
|
2324
2324
|
normalized.push(normKf);
|
|
@@ -2364,7 +2364,7 @@ var PixodeskAnimator = (() => {
|
|
|
2364
2364
|
}
|
|
2365
2365
|
return animDef;
|
|
2366
2366
|
}
|
|
2367
|
-
const channels = Object.keys(animDef).filter((k) =>
|
|
2367
|
+
const channels = Object.keys(animDef).filter((k) => PX_TRANSFORM_FN_NAMES.has(k));
|
|
2368
2368
|
if (channels.length !== 1) return animDef;
|
|
2369
2369
|
const ch = channels[0];
|
|
2370
2370
|
const chAnim = animDef[ch];
|
|
@@ -2393,9 +2393,9 @@ var PixodeskAnimator = (() => {
|
|
|
2393
2393
|
}
|
|
2394
2394
|
return normalized;
|
|
2395
2395
|
}
|
|
2396
|
-
function
|
|
2396
|
+
function normalizeBindings(doc, engine = PxTimelineEngine.native) {
|
|
2397
2397
|
const animatorConfig = getAnimatorConfig(doc) || {};
|
|
2398
|
-
const defs =
|
|
2398
|
+
const defs = getDefinitions(doc);
|
|
2399
2399
|
const duration = animatorConfig.duration || 1e3;
|
|
2400
2400
|
const bindings = [];
|
|
2401
2401
|
const processAnimation = (id, animDefs, staticTransform) => {
|
|
@@ -2565,13 +2565,13 @@ var PixodeskAnimator = (() => {
|
|
|
2565
2565
|
}
|
|
2566
2566
|
|
|
2567
2567
|
// src/triggers/PxAnimatorTriggers.ts
|
|
2568
|
-
function setupAnimationTriggers(api,
|
|
2568
|
+
function setupAnimationTriggers(api, trigger, diag) {
|
|
2569
2569
|
const report = diag != null ? diag : createDiagnostics(void 0, "[PxAnimator]");
|
|
2570
2570
|
const cleanups = [];
|
|
2571
2571
|
const dispose = () => {
|
|
2572
2572
|
for (const undo of cleanups.splice(0)) undo();
|
|
2573
2573
|
};
|
|
2574
|
-
const { startOn, outAction, scrollIntoViewThreshold } = resolveTrigger(
|
|
2574
|
+
const { startOn, outAction, scrollIntoViewThreshold } = resolveTrigger(trigger);
|
|
2575
2575
|
const root = api.getRootElement();
|
|
2576
2576
|
if (!root) {
|
|
2577
2577
|
report.warn(PxDiagnosticKind.host, "setupAnimationTriggers: No root element found for animation.");
|
|
@@ -2688,20 +2688,20 @@ var PixodeskAnimator = (() => {
|
|
|
2688
2688
|
|
|
2689
2689
|
// src/engines/PxAnimatorWebApi.ts
|
|
2690
2690
|
function createCssKf(kf, t, propName, unsupportedSet) {
|
|
2691
|
-
let value =
|
|
2692
|
-
const e =
|
|
2691
|
+
let value = keyframeValue(kf);
|
|
2692
|
+
const e = keyframeEasing(kf);
|
|
2693
2693
|
const cssKf = {
|
|
2694
2694
|
offset: t,
|
|
2695
2695
|
easing: e && Array.isArray(e) ? "cubic-bezier(" + e.join(",") + ")" : void 0
|
|
2696
2696
|
};
|
|
2697
2697
|
let cssValue;
|
|
2698
2698
|
let cssKey = propName;
|
|
2699
|
-
if (
|
|
2699
|
+
if (PX_COLOR_ATTR_NAMES.has(propName) && Array.isArray(value)) {
|
|
2700
2700
|
cssValue = toRGBA(value);
|
|
2701
2701
|
} else if (propName === "transform" && value !== null && typeof value === "object" && !Array.isArray(value)) {
|
|
2702
2702
|
cssValue = composeTransformParts(value, { withUnits: true });
|
|
2703
2703
|
cssKey = "transform";
|
|
2704
|
-
} else if (
|
|
2704
|
+
} else if (PX_TRANSFORM_FN_NAMES.has(propName)) {
|
|
2705
2705
|
if (Array.isArray(value)) {
|
|
2706
2706
|
if (propName === "translate") value = value.map((v) => v + "px");
|
|
2707
2707
|
value = value.join(",");
|
|
@@ -2712,7 +2712,7 @@ var PixodeskAnimator = (() => {
|
|
|
2712
2712
|
} else if (propName === "d") {
|
|
2713
2713
|
const paths = value && typeof value === "object" && Array.isArray(value.paths) ? value.paths : [];
|
|
2714
2714
|
cssValue = 'path("' + paths.map((bz) => bezierToSvgPath(bz, true)).join("") + '")';
|
|
2715
|
-
} else if (
|
|
2715
|
+
} else if (PX_PCT_BASED_ATTR_NAMES.has(propName) && typeof value === "number") {
|
|
2716
2716
|
cssValue = value * 100 + "%";
|
|
2717
2717
|
} else {
|
|
2718
2718
|
cssValue = "" + value;
|
|
@@ -2795,7 +2795,7 @@ var PixodeskAnimator = (() => {
|
|
|
2795
2795
|
diag.warn(PxDiagnosticKind.host, "createWebApiAnimator: No root element provided");
|
|
2796
2796
|
}
|
|
2797
2797
|
}
|
|
2798
|
-
const bindings =
|
|
2798
|
+
const bindings = normalizeBindings(doc, PxTimelineEngine.native);
|
|
2799
2799
|
const animations = [];
|
|
2800
2800
|
const _iterations = config.iterations;
|
|
2801
2801
|
let iterations;
|