@pixodesk/svg-animator-core 1.0.30 โ 1.0.35
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 +9 -7
- package/dist/index.cjs +1317 -476
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +6718 -18471
- package/dist/index.d.ts +6718 -18471
- package/dist/index.js +1271 -473
- package/dist/index.js.map +1 -1
- package/dist/index.min.cjs +1 -1
- package/dist/index.min.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# animator-core
|
|
2
2
|
|
|
3
|
+
> ๐ Full user guide: [docs/format/core-library.md](../../docs/format/README.md#core-library--pixodesksvg-animator-core) ยท [all docs](../../README.md#documentation)
|
|
4
|
+
|
|
3
5
|
[](https://github.com/pixodesk/pixodesk-svg-animator/actions/workflows/ci.yml)
|
|
4
6
|
[](https://opensource.org/licenses/MIT)
|
|
5
7
|
|
|
@@ -49,14 +51,14 @@ runtime crash on a non-browser platform.
|
|
|
49
51
|
| Area | Exports |
|
|
50
52
|
|---|---|
|
|
51
53
|
| **Schema & types** | `PxAnimatedSvgDocumentSchema`, `PxNodeSchema`, `PxEffectsSchema`, โฆ plus every `Px*` TypeScript type and the `px` schema builder |
|
|
52
|
-
| **Validation** | `isPxElementFileFormat`, `isPxElementFileFormatDeep`, `validateNodeEffects` |
|
|
54
|
+
| **Validation** | `validateDocument` (the whole document, strict), `isPxElementFileFormat`, `isPxElementFileFormatDeep`, `validateNodeEffects` |
|
|
53
55
|
| **Materialisers** | `materialiseAllInTree`, `applyPlayerEffects`, `materialiseInternalLoopsInTree`, `materialiseMotionPathsInTree`, `materialiseAnimatedUseInstances` |
|
|
54
56
|
| **Interpolation** | `calcAnimationValues`, `interpolateValue`, `getNormalisedBindings` |
|
|
55
57
|
| **Sampling / geometry** | `createPathSampler`, `evaluateMotionPathSegment`, bezier helpers, `cubicBezier`, `splitEasing` |
|
|
56
58
|
| **Text** | `materialiseGlyphText`, `layoutGlyphTextChars`, `extendedPathForBrowser` |
|
|
57
59
|
| **Node helpers** | `getNormalizedProps`, `sanitiseAttributeValue`, `resolveStyle`, `generateNewIds` |
|
|
58
60
|
| **Playback engine** | `createBasicFrameLoopAnimator` + the `PxPlatformAdapter` interface |
|
|
59
|
-
| **Wire enums** | `PxAnimatorMode`, `
|
|
61
|
+
| **Wire enums** | `PxAnimatorMode`, `PxTimelineEngine`, `PxLoopExtend`, `PxStrokeTrimSubPaths`, `PxMaskType`, `PxCloneType`, `PxUnits`, `PxGradientType`, `PxGradientUnits`, `PxGradientSpreadMethod`, `PxPathOverflow`, `PxLengthAdjust`, `PxTextPathMethod`, `PxTextPathSpacing` โ every two-or-more-way wire selector is a named enum, not a bare string |
|
|
60
62
|
|
|
61
63
|
### Validating a document
|
|
62
64
|
|
|
@@ -97,21 +99,21 @@ lightweight editor document into a flat tree any renderer can walk:
|
|
|
97
99
|
sampled into plain `{translate, rotate}` keyframes.
|
|
98
100
|
4. **Animated `<use>`** โ replaced by `<g>` + a deep clone with fresh ids.
|
|
99
101
|
|
|
100
|
-
Steps 3 and 4 run when `engine` is `
|
|
102
|
+
Steps 3 and 4 run when `engine` is `native`. Pass `native` for **any renderer
|
|
101
103
|
without live `<use>` propagation** โ that includes `react-native-svg` โ and
|
|
102
|
-
`
|
|
104
|
+
`js` only for the DOM, which resolves `<use>` references natively.
|
|
103
105
|
|
|
104
106
|
```ts
|
|
105
107
|
import {
|
|
106
108
|
materialiseAllInTree, generateNewIds, calcAnimationValues,
|
|
107
|
-
getNormalisedBindings,
|
|
109
|
+
getNormalisedBindings, PxTimelineEngine,
|
|
108
110
|
} from '@pixodesk/svg-animator-core';
|
|
109
111
|
|
|
110
112
|
// Flatten once โฆ
|
|
111
|
-
const flat = generateNewIds(materialiseAllInTree(doc,
|
|
113
|
+
const flat = generateNewIds(materialiseAllInTree(doc, PxTimelineEngine.native));
|
|
112
114
|
|
|
113
115
|
// โฆ then ask for values at any time, with no renderer involved.
|
|
114
|
-
for (const binding of getNormalisedBindings(flat,
|
|
116
|
+
for (const binding of getNormalisedBindings(flat, PxTimelineEngine.js) ?? []) {
|
|
115
117
|
const values = calcAnimationValues(binding.animate, 500); // t = 500 ms
|
|
116
118
|
console.log(binding.id, values); // โ { opacity: '0.5', transform: 'translate(โฆ)' }
|
|
117
119
|
}
|