@pixodesk/svg-animator-vue 1.0.21 → 1.0.22
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/dist/index.umd.js +60 -9
- package/dist/index.umd.js.map +1 -1
- package/package.json +2 -2
package/dist/index.umd.js
CHANGED
|
@@ -57369,6 +57369,7 @@ ${codeFrame}` : message);
|
|
|
57369
57369
|
resetOnFinish: px.boolean().optional(),
|
|
57370
57370
|
definitions: PxDefsSchema.optional(),
|
|
57371
57371
|
animate: px.record(PxElementAnimationSchema).optional(),
|
|
57372
|
+
timeline: px.string().optional(),
|
|
57372
57373
|
debug: px.boolean().optional(),
|
|
57373
57374
|
debugInstName: px.string().optional()
|
|
57374
57375
|
}));
|
|
@@ -57451,6 +57452,17 @@ ${codeFrame}` : message);
|
|
|
57451
57452
|
px.object({ value: px.array(PxGradientStopSchema) }),
|
|
57452
57453
|
px.object({ keyframes: px.array(PxKeyframeSchema) })
|
|
57453
57454
|
]);
|
|
57455
|
+
var PxGradientGeometryAnimationSchema = implementsInterface()(px.object({
|
|
57456
|
+
gradientX1: PxPropertyAnimationSchema.optional(),
|
|
57457
|
+
gradientY1: PxPropertyAnimationSchema.optional(),
|
|
57458
|
+
gradientX2: PxPropertyAnimationSchema.optional(),
|
|
57459
|
+
gradientY2: PxPropertyAnimationSchema.optional(),
|
|
57460
|
+
gradientCx: PxPropertyAnimationSchema.optional(),
|
|
57461
|
+
gradientCy: PxPropertyAnimationSchema.optional(),
|
|
57462
|
+
gradientFx: PxPropertyAnimationSchema.optional(),
|
|
57463
|
+
gradientFy: PxPropertyAnimationSchema.optional(),
|
|
57464
|
+
gradientR: PxPropertyAnimationSchema.optional()
|
|
57465
|
+
}));
|
|
57454
57466
|
var PxFillGradientEffectSchema = implementsInterface()(px.object({
|
|
57455
57467
|
type: px.enum([PxGradientType.linear, PxGradientType.radial]),
|
|
57456
57468
|
p1: px.tuple([px.number(), px.number()]).optional(),
|
|
@@ -57461,7 +57473,8 @@ ${codeFrame}` : message);
|
|
|
57461
57473
|
stops: PxAnimatableGradientStopsSchema.optional(),
|
|
57462
57474
|
gradientUnits: px.string().optional(),
|
|
57463
57475
|
spreadMethod: px.string().optional(),
|
|
57464
|
-
gradientTransform: px.string().optional()
|
|
57476
|
+
gradientTransform: px.string().optional(),
|
|
57477
|
+
animate: PxGradientGeometryAnimationSchema.optional()
|
|
57465
57478
|
}));
|
|
57466
57479
|
var PxStrokeGradientEffectSchema = PxFillGradientEffectSchema;
|
|
57467
57480
|
var PxTextPathEffectSchema = implementsInterface()(px.object({
|
|
@@ -59451,6 +59464,7 @@ ${codeFrame}` : message);
|
|
|
59451
59464
|
return rec;
|
|
59452
59465
|
}
|
|
59453
59466
|
function readAnimatable(raw) {
|
|
59467
|
+
var _a, _b;
|
|
59454
59468
|
if (raw === void 0) return {
|
|
59455
59469
|
kind: "absent"
|
|
59456
59470
|
/* Absent */
|
|
@@ -59458,13 +59472,29 @@ ${codeFrame}` : message);
|
|
|
59458
59472
|
if (Array.isArray(raw)) return { kind: "static", value: raw };
|
|
59459
59473
|
if (typeof raw === "object") {
|
|
59460
59474
|
const obj = raw;
|
|
59461
|
-
|
|
59462
|
-
|
|
59475
|
+
const kfs = (_a = obj.keyframes) != null ? _a : obj.kfs;
|
|
59476
|
+
if (kfs) {
|
|
59477
|
+
return { kind: "animated", keyframes: kfs.map(normaliseKeyframe), autoOrient: obj.autoOrient, loop: obj.loop };
|
|
59463
59478
|
}
|
|
59464
|
-
|
|
59479
|
+
const staticValue = (_b = obj.value) != null ? _b : obj.v;
|
|
59480
|
+
if (staticValue !== void 0) return { kind: "static", value: staticValue };
|
|
59465
59481
|
}
|
|
59466
59482
|
return { kind: "static", value: raw };
|
|
59467
59483
|
}
|
|
59484
|
+
function normaliseKeyframe(kf) {
|
|
59485
|
+
if (!kf || typeof kf !== "object") return kf;
|
|
59486
|
+
const k = kf;
|
|
59487
|
+
if (k.t === void 0 && k.v === void 0 && k.e === void 0 && k.to === void 0 && k.ti === void 0) {
|
|
59488
|
+
return kf;
|
|
59489
|
+
}
|
|
59490
|
+
const out = __spreadValues2({}, k);
|
|
59491
|
+
if (out.time === void 0 && k.t !== void 0) out.time = k.t;
|
|
59492
|
+
if (out.value === void 0 && k.v !== void 0) out.value = k.v;
|
|
59493
|
+
if (out.easing === void 0 && k.e !== void 0) out.easing = k.e;
|
|
59494
|
+
if (out.tangentOut === void 0 && k.to !== void 0) out.tangentOut = k.to;
|
|
59495
|
+
if (out.tangentIn === void 0 && k.ti !== void 0) out.tangentIn = k.ti;
|
|
59496
|
+
return out;
|
|
59497
|
+
}
|
|
59468
59498
|
function readStaticOrigin(raw, ctx) {
|
|
59469
59499
|
var _a;
|
|
59470
59500
|
const o = readAnimatable(raw);
|
|
@@ -62075,8 +62105,14 @@ ${codeFrame}` : message);
|
|
|
62075
62105
|
break;
|
|
62076
62106
|
}
|
|
62077
62107
|
case "mouseOver": {
|
|
62078
|
-
|
|
62079
|
-
const
|
|
62108
|
+
let enteredOnce = false;
|
|
62109
|
+
const mouseOverHandler = () => {
|
|
62110
|
+
enteredOnce = true;
|
|
62111
|
+
start();
|
|
62112
|
+
};
|
|
62113
|
+
const mouseOutHandler = () => {
|
|
62114
|
+
if (enteredOnce) handleEndAction();
|
|
62115
|
+
};
|
|
62080
62116
|
root.addEventListener("mouseenter", mouseOverHandler);
|
|
62081
62117
|
root.addEventListener("mouseleave", mouseOutHandler);
|
|
62082
62118
|
break;
|
|
@@ -62093,17 +62129,32 @@ ${codeFrame}` : message);
|
|
|
62093
62129
|
break;
|
|
62094
62130
|
}
|
|
62095
62131
|
case "scrollIntoView": {
|
|
62132
|
+
const effectiveRatio = (entry) => {
|
|
62133
|
+
var _a, _b;
|
|
62134
|
+
const target = entry.boundingClientRect;
|
|
62135
|
+
const visible = entry.intersectionRect;
|
|
62136
|
+
if (!(target == null ? void 0 : target.height) || !visible) return entry.intersectionRatio;
|
|
62137
|
+
const live = typeof window !== "undefined" && window.innerHeight ? window.innerHeight : Infinity;
|
|
62138
|
+
const declared = (_b = (_a = entry.rootBounds) == null ? void 0 : _a.height) != null ? _b : Infinity;
|
|
62139
|
+
const viewport = Math.min(live, declared);
|
|
62140
|
+
const denom = Math.min(target.height, Number.isFinite(viewport) ? viewport : target.height);
|
|
62141
|
+
return denom > 0 ? visible.height / denom : entry.intersectionRatio;
|
|
62142
|
+
};
|
|
62143
|
+
const thresholdSteps = Array.from({ length: 21 }, (_, i) => i / 20);
|
|
62144
|
+
let wasIntersecting = false;
|
|
62096
62145
|
const observer = new IntersectionObserver(
|
|
62097
62146
|
(entries) => {
|
|
62098
62147
|
entries.forEach((entry) => {
|
|
62099
|
-
if (entry.isIntersecting && entry
|
|
62148
|
+
if (entry.isIntersecting && effectiveRatio(entry) >= scrollIntoViewThreshold) {
|
|
62149
|
+
wasIntersecting = true;
|
|
62100
62150
|
start();
|
|
62101
|
-
} else {
|
|
62151
|
+
} else if (wasIntersecting) {
|
|
62152
|
+
wasIntersecting = false;
|
|
62102
62153
|
handleEndAction();
|
|
62103
62154
|
}
|
|
62104
62155
|
});
|
|
62105
62156
|
},
|
|
62106
|
-
{ threshold:
|
|
62157
|
+
{ threshold: thresholdSteps }
|
|
62107
62158
|
);
|
|
62108
62159
|
observer.observe(root);
|
|
62109
62160
|
break;
|