@xtia/timeline 1.0.5 → 1.0.7
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 +410 -6
- package/index.js +8 -1
- package/internal/emitters.d.ts +55 -29
- package/internal/emitters.js +241 -106
- package/internal/point.d.ts +15 -6
- package/internal/point.js +43 -0
- package/internal/range.d.ts +14 -4
- package/internal/range.js +98 -0
- package/internal/timeline.d.ts +3 -3
- package/internal/timeline.js +7 -66
- package/package.json +1 -1
package/internal/timeline.js
CHANGED
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.Timeline = void 0;
|
|
4
4
|
exports.animate = animate;
|
|
5
|
-
const
|
|
5
|
+
const point_1 = require("./point");
|
|
6
|
+
const range_1 = require("./range");
|
|
6
7
|
const utils_1 = require("./utils");
|
|
7
8
|
const default_fps = 60;
|
|
8
9
|
const EndAction = {
|
|
@@ -88,7 +89,7 @@ class Timeline {
|
|
|
88
89
|
handlers,
|
|
89
90
|
position,
|
|
90
91
|
};
|
|
91
|
-
|
|
92
|
+
const addHandler = (handler) => {
|
|
92
93
|
if (this.seeking)
|
|
93
94
|
throw new Error("Can't add a listener while seeking");
|
|
94
95
|
// we're adding and removing points and ranges to the internal registry according to whether any subscriptions are active, to allow obsolete points and ranges to be garbage-collected
|
|
@@ -107,17 +108,8 @@ class Timeline {
|
|
|
107
108
|
this.points.splice(idx, 1);
|
|
108
109
|
}
|
|
109
110
|
};
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
range: duration => this.range(position, duration),
|
|
113
|
-
to: target => {
|
|
114
|
-
const targetPosition = typeof target == "number"
|
|
115
|
-
? target
|
|
116
|
-
: target.position;
|
|
117
|
-
return this.range(position, targetPosition - position);
|
|
118
|
-
},
|
|
119
|
-
position,
|
|
120
|
-
});
|
|
111
|
+
};
|
|
112
|
+
return new point_1.TimelinePoint(addHandler, this, position);
|
|
121
113
|
}
|
|
122
114
|
range(start = 0, optionalDuration) {
|
|
123
115
|
const startPoint = typeof start == "number"
|
|
@@ -153,58 +145,7 @@ class Timeline {
|
|
|
153
145
|
}
|
|
154
146
|
};
|
|
155
147
|
};
|
|
156
|
-
return
|
|
157
|
-
duration,
|
|
158
|
-
start: this.point(startPosition),
|
|
159
|
-
end: this.point(startPosition + duration),
|
|
160
|
-
bisect: (position = duration / 2) => {
|
|
161
|
-
return [
|
|
162
|
-
this.range(startPosition, position),
|
|
163
|
-
this.range(startPosition + position, duration - position),
|
|
164
|
-
];
|
|
165
|
-
},
|
|
166
|
-
spread: (count) => {
|
|
167
|
-
const delta = duration / (count + 1);
|
|
168
|
-
return [
|
|
169
|
-
...Array(count).fill(0).map((_, idx) => this.point(idx * delta + startPosition + delta))
|
|
170
|
-
];
|
|
171
|
-
},
|
|
172
|
-
play: (easer) => {
|
|
173
|
-
this.pause();
|
|
174
|
-
this.currentTime = startPosition;
|
|
175
|
-
return this.seek(startPosition + duration, duration, easer);
|
|
176
|
-
},
|
|
177
|
-
grow: (delta, anchor = 0) => {
|
|
178
|
-
const clampedAnchor = (0, utils_1.clamp)(anchor, 0, 1);
|
|
179
|
-
const leftDelta = -delta * (1 - clampedAnchor);
|
|
180
|
-
const rightDelta = delta * clampedAnchor;
|
|
181
|
-
const newStart = startPosition + leftDelta;
|
|
182
|
-
const newEnd = endPosition + rightDelta;
|
|
183
|
-
if (newEnd < newStart) {
|
|
184
|
-
const mid = (newStart + newEnd) / 2;
|
|
185
|
-
return this.range(mid, 0);
|
|
186
|
-
}
|
|
187
|
-
return this.range(newStart, newEnd - newStart);
|
|
188
|
-
},
|
|
189
|
-
scale: (factor, anchor = 0.5) => {
|
|
190
|
-
if (factor <= 0) {
|
|
191
|
-
throw new RangeError('scale factor must be > 0');
|
|
192
|
-
}
|
|
193
|
-
const clampedAnchor = (0, utils_1.clamp)(anchor, 0, 1);
|
|
194
|
-
const oldLen = endPosition - startPosition;
|
|
195
|
-
const pivot = startPosition + oldLen * clampedAnchor;
|
|
196
|
-
const newStart = pivot - (pivot - startPosition) * factor;
|
|
197
|
-
const newEnd = pivot + (endPosition - pivot) * factor;
|
|
198
|
-
if (newEnd < newStart) {
|
|
199
|
-
const mid = (newStart + newEnd) / 2;
|
|
200
|
-
return this.range(mid, 0);
|
|
201
|
-
}
|
|
202
|
-
return this.range(newStart, newEnd - newStart);
|
|
203
|
-
},
|
|
204
|
-
contains: point => {
|
|
205
|
-
return point.position >= startPosition && point.position < endPosition;
|
|
206
|
-
}
|
|
207
|
-
});
|
|
148
|
+
return new range_1.TimelineRange(addHandler, this, startPosition, duration);
|
|
208
149
|
}
|
|
209
150
|
getWrappedPosition(n) {
|
|
210
151
|
if (this.endAction.type !== EndAction.wrap)
|
|
@@ -385,7 +326,7 @@ class Timeline {
|
|
|
385
326
|
}
|
|
386
327
|
createChainingInterface(position) {
|
|
387
328
|
return {
|
|
388
|
-
thenTween: (duration, apply, from
|
|
329
|
+
thenTween: (duration, apply, from, to, easer) => {
|
|
389
330
|
return this.tween(position, duration, apply, from, to, easer);
|
|
390
331
|
},
|
|
391
332
|
then: (action) => this.at(position, action),
|