@douyinfe/semi-animation 2.24.3 → 2.25.0-alpha.0
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/lib/cjs/index.js +0 -8
- package/lib/cjs/src/Animation.js +8 -63
- package/lib/cjs/src/getEasing.d.ts +1 -1
- package/lib/cjs/src/getEasing.js +12 -80
- package/lib/cjs/src/interpolate.d.ts +3 -3
- package/lib/cjs/src/interpolate.js +0 -8
- package/lib/cjs/src/mapToZero.js +0 -3
- package/lib/cjs/src/presets.js +0 -1
- package/lib/cjs/src/shouldStopAnimation.js +2 -10
- package/lib/cjs/src/shouldUseBezier.js +0 -1
- package/lib/cjs/src/stepper.js +4 -9
- package/lib/cjs/src/stripStyle.js +0 -5
- package/lib/cjs/src/utils/Event.js +2 -21
- package/lib/cjs/src/utils/debounce.js +0 -2
- package/lib/cjs/src/utils/log.js +0 -3
- package/lib/cjs/src/utils/noop.js +0 -2
- package/lib/cjs/src/utils/shallowEqual.js +0 -7
- package/lib/cjs/src/wrapValue.js +0 -11
- package/lib/es/src/Animation.js +8 -54
- package/lib/es/src/getEasing.d.ts +1 -1
- package/lib/es/src/getEasing.js +12 -76
- package/lib/es/src/interpolate.d.ts +3 -3
- package/lib/es/src/interpolate.js +0 -7
- package/lib/es/src/mapToZero.js +0 -2
- package/lib/es/src/shouldStopAnimation.js +2 -8
- package/lib/es/src/stepper.js +4 -8
- package/lib/es/src/stripStyle.js +0 -4
- package/lib/es/src/utils/Event.js +2 -19
- package/lib/es/src/utils/debounce.js +0 -1
- package/lib/es/src/utils/log.js +0 -2
- package/lib/es/src/utils/noop.js +0 -1
- package/lib/es/src/utils/shallowEqual.js +0 -6
- package/lib/es/src/wrapValue.js +0 -5
- package/package.json +44 -44
package/lib/cjs/index.js
CHANGED
|
@@ -39,19 +39,11 @@ Object.defineProperty(exports, "presets", {
|
|
|
39
39
|
return _presets.default;
|
|
40
40
|
}
|
|
41
41
|
});
|
|
42
|
-
|
|
43
42
|
var _getEasing = _interopRequireWildcard(require("./src/getEasing"));
|
|
44
|
-
|
|
45
43
|
var _constants = require("./src/constants");
|
|
46
|
-
|
|
47
44
|
var _Animation = _interopRequireDefault(require("./src/Animation"));
|
|
48
|
-
|
|
49
45
|
var _interpolate = _interopRequireDefault(require("./src/interpolate"));
|
|
50
|
-
|
|
51
46
|
var _presets = _interopRequireDefault(require("./src/presets"));
|
|
52
|
-
|
|
53
47
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
54
|
-
|
|
55
48
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
56
|
-
|
|
57
49
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
package/lib/cjs/src/Animation.js
CHANGED
|
@@ -4,30 +4,15 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _Event = _interopRequireDefault(require("./utils/Event"));
|
|
9
|
-
|
|
10
8
|
var _shouldStopAnimation = _interopRequireDefault(require("./shouldStopAnimation"));
|
|
11
|
-
|
|
12
9
|
var _shouldUseBezier = _interopRequireDefault(require("./shouldUseBezier"));
|
|
13
|
-
|
|
14
10
|
var _stripStyle = _interopRequireDefault(require("./stripStyle"));
|
|
15
|
-
|
|
16
11
|
var _stepper = _interopRequireDefault(require("./stepper"));
|
|
17
|
-
|
|
18
12
|
var _mapToZero = _interopRequireDefault(require("./mapToZero"));
|
|
19
|
-
|
|
20
13
|
var _wrapValue = _interopRequireDefault(require("./wrapValue"));
|
|
21
|
-
|
|
22
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
23
|
-
|
|
24
|
-
/* eslint-disable max-depth */
|
|
25
|
-
|
|
26
|
-
/* eslint-disable eqeqeq */
|
|
27
|
-
|
|
28
|
-
/* eslint-disable max-lines-per-function */
|
|
29
15
|
const now = () => Date.now();
|
|
30
|
-
|
|
31
16
|
const msPerFrame = 1000 / 60;
|
|
32
17
|
/**
|
|
33
18
|
* @summary
|
|
@@ -38,7 +23,6 @@ const msPerFrame = 1000 / 60;
|
|
|
38
23
|
* Binding method:
|
|
39
24
|
* const animation = new Animation (); animation.on ('start | frame | rest ', () => {});
|
|
40
25
|
*/
|
|
41
|
-
|
|
42
26
|
class Animation extends _Event.default {
|
|
43
27
|
constructor() {
|
|
44
28
|
let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
@@ -48,18 +32,14 @@ class Animation extends _Event.default {
|
|
|
48
32
|
this._config = Object.assign({}, config);
|
|
49
33
|
this.initStates();
|
|
50
34
|
}
|
|
51
|
-
|
|
52
35
|
_wrapConfig(object, config) {
|
|
53
36
|
config = config && typeof config === 'object' ? config : this._config;
|
|
54
37
|
const ret = {};
|
|
55
|
-
|
|
56
38
|
for (const key of Object.keys(object)) {
|
|
57
39
|
ret[key] = (0, _wrapValue.default)(object[key], config);
|
|
58
40
|
}
|
|
59
|
-
|
|
60
41
|
return ret;
|
|
61
42
|
}
|
|
62
|
-
|
|
63
43
|
initStates(props, config) {
|
|
64
44
|
props = props && typeof props === 'object' ? props : this._props;
|
|
65
45
|
config = config && typeof config === 'object' ? config : this._config;
|
|
@@ -68,13 +48,11 @@ class Animation extends _Event.default {
|
|
|
68
48
|
to
|
|
69
49
|
} = props;
|
|
70
50
|
this._from = {};
|
|
71
|
-
|
|
72
51
|
if (from && typeof from) {
|
|
73
52
|
for (const key of Object.keys(from)) {
|
|
74
53
|
this._from[key] = typeof from[key] === 'object' && from[key].val ? from[key].val : from[key];
|
|
75
54
|
}
|
|
76
55
|
}
|
|
77
|
-
|
|
78
56
|
this._to = this._wrapConfig(to, config);
|
|
79
57
|
this._delay = parseInt(config.delay) || 0;
|
|
80
58
|
const currentStyle = this._from && (0, _stripStyle.default)(this._from) || (0, _stripStyle.default)(this._to);
|
|
@@ -87,15 +65,13 @@ class Animation extends _Event.default {
|
|
|
87
65
|
this._frameCount = 0;
|
|
88
66
|
this._prevTime = 0;
|
|
89
67
|
}
|
|
90
|
-
|
|
91
68
|
animate() {
|
|
92
69
|
if (this._timer != null) {
|
|
93
70
|
return;
|
|
94
71
|
}
|
|
95
|
-
|
|
96
72
|
this._timer = requestAnimationFrame(timestamp => {
|
|
97
|
-
const nowTime = now();
|
|
98
|
-
|
|
73
|
+
const nowTime = now();
|
|
74
|
+
// stop animation and emit onRest event
|
|
99
75
|
if ((0, _shouldStopAnimation.default)(this._currentStyle, this._to, this._currentVelocity, this._startedTime || nowTime, nowTime) || this._ended || this._stopped) {
|
|
100
76
|
if (this._wasAnimating && !this._ended && !this._stopped) {
|
|
101
77
|
// should emit reset in settimeout for delay msPerframe
|
|
@@ -106,45 +82,36 @@ class Animation extends _Event.default {
|
|
|
106
82
|
this.emit('rest', this.getCurrentStates());
|
|
107
83
|
}, msPerFrame);
|
|
108
84
|
}
|
|
109
|
-
|
|
110
85
|
this.resetPlayStates();
|
|
111
86
|
return;
|
|
112
87
|
}
|
|
113
|
-
|
|
114
88
|
if (!this._started) {
|
|
115
89
|
this._started = true;
|
|
116
90
|
this.emit('start', this.getCurrentStates());
|
|
117
91
|
}
|
|
118
|
-
|
|
119
92
|
this._stopped = false;
|
|
120
93
|
this._paused = false;
|
|
121
94
|
this._wasAnimating = true;
|
|
122
|
-
|
|
123
95
|
if (this._startedTime === 0) {
|
|
124
96
|
this._startedTime = nowTime;
|
|
125
97
|
}
|
|
126
|
-
|
|
127
98
|
const currentTime = nowTime;
|
|
128
99
|
const timeDelta = currentTime - this._prevTime;
|
|
129
100
|
this._prevTime = currentTime;
|
|
130
|
-
|
|
131
101
|
if (currentTime - this._startedTime < this._delay) {
|
|
132
102
|
this._timer = null;
|
|
133
103
|
this.animate();
|
|
134
104
|
}
|
|
135
|
-
|
|
136
105
|
const newLastIdealStyle = {};
|
|
137
106
|
const newLastIdealVelocity = {};
|
|
138
107
|
const newCurrentStyle = {};
|
|
139
108
|
const newCurrentVelocity = {};
|
|
140
109
|
const toKeys = this._to && Object.keys(this._to) || [];
|
|
141
|
-
|
|
142
110
|
for (const key of toKeys) {
|
|
143
111
|
const styleValue = this._to[key];
|
|
144
112
|
this._accumulatedTime[key] = typeof this._accumulatedTime[key] !== 'number' ? timeDelta : this._accumulatedTime[key] + timeDelta;
|
|
145
113
|
const from = this._from[key] != null && typeof this._from[key] === 'object' ? this._from[key].val : this._from[key];
|
|
146
114
|
const to = styleValue.val;
|
|
147
|
-
|
|
148
115
|
if (typeof styleValue === 'number') {
|
|
149
116
|
newCurrentStyle[key] = styleValue;
|
|
150
117
|
newCurrentVelocity[key] = 0;
|
|
@@ -153,7 +120,6 @@ class Animation extends _Event.default {
|
|
|
153
120
|
} else {
|
|
154
121
|
let newLastIdealStyleValue = this._lastIdealStyle[key];
|
|
155
122
|
let newLastIdealVelocityValue = this._lastIdealVelocity[key];
|
|
156
|
-
|
|
157
123
|
if ((0, _shouldUseBezier.default)(this._config) || (0, _shouldUseBezier.default)(styleValue)) {
|
|
158
124
|
// easing
|
|
159
125
|
const {
|
|
@@ -161,12 +127,10 @@ class Animation extends _Event.default {
|
|
|
161
127
|
duration
|
|
162
128
|
} = styleValue;
|
|
163
129
|
newLastIdealStyleValue = from + easing((currentTime - this._startedTime) / duration) * (to - from);
|
|
164
|
-
|
|
165
130
|
if (currentTime >= this._startedTime + duration) {
|
|
166
131
|
newLastIdealStyleValue = to;
|
|
167
132
|
styleValue.done = true;
|
|
168
133
|
}
|
|
169
|
-
|
|
170
134
|
newLastIdealStyle[key] = newLastIdealStyleValue;
|
|
171
135
|
newCurrentStyle[key] = newLastIdealStyleValue;
|
|
172
136
|
} else if (to != null && to === this._currentStyle[key]) {
|
|
@@ -178,11 +142,9 @@ class Animation extends _Event.default {
|
|
|
178
142
|
// spring
|
|
179
143
|
const currentFrameCompletion = (this._accumulatedTime[key] - Math.floor(this._accumulatedTime[key] / msPerFrame) * msPerFrame) / msPerFrame;
|
|
180
144
|
const framesToCatchUp = Math.floor(this._accumulatedTime[key] / msPerFrame);
|
|
181
|
-
|
|
182
145
|
for (let i = 0; i < framesToCatchUp; i++) {
|
|
183
146
|
[newLastIdealStyleValue, newLastIdealVelocityValue] = (0, _stepper.default)(msPerFrame / 1000, newLastIdealStyleValue, newLastIdealVelocityValue, styleValue.val, styleValue.tension, styleValue.friction, styleValue.precision);
|
|
184
147
|
}
|
|
185
|
-
|
|
186
148
|
const [nextIdealX, nextIdealV] = (0, _stepper.default)(msPerFrame / 1000, newLastIdealStyleValue, newLastIdealVelocityValue, styleValue.val, styleValue.tension, styleValue.friction, styleValue.precision);
|
|
187
149
|
newCurrentStyle[key] = newLastIdealStyleValue + (nextIdealX - newLastIdealStyleValue) * currentFrameCompletion;
|
|
188
150
|
newCurrentVelocity[key] = newLastIdealVelocityValue + (nextIdealV - newLastIdealVelocityValue) * currentFrameCompletion;
|
|
@@ -192,26 +154,23 @@ class Animation extends _Event.default {
|
|
|
192
154
|
}
|
|
193
155
|
}
|
|
194
156
|
}
|
|
195
|
-
|
|
196
157
|
this._timer = null;
|
|
197
158
|
this._currentStyle = Object.assign({}, newCurrentStyle);
|
|
198
159
|
this._currentVelocity = Object.assign({}, newCurrentVelocity);
|
|
199
160
|
this._lastIdealStyle = Object.assign({}, newLastIdealStyle);
|
|
200
|
-
this._lastIdealVelocity = Object.assign({}, newLastIdealVelocity);
|
|
201
|
-
|
|
161
|
+
this._lastIdealVelocity = Object.assign({}, newLastIdealVelocity);
|
|
162
|
+
// console.log(newCurrentStyle);
|
|
202
163
|
if (!this._destroyed) {
|
|
203
164
|
this.emit('frame', this.getCurrentStates());
|
|
204
165
|
this.animate();
|
|
205
166
|
}
|
|
206
167
|
});
|
|
207
168
|
}
|
|
208
|
-
|
|
209
169
|
start() {
|
|
210
170
|
this._prevTime = now();
|
|
211
171
|
this._startedTime = now();
|
|
212
172
|
this.animate();
|
|
213
173
|
}
|
|
214
|
-
|
|
215
174
|
end() {
|
|
216
175
|
if (!this._ended) {
|
|
217
176
|
this._ended = true;
|
|
@@ -219,10 +178,8 @@ class Animation extends _Event.default {
|
|
|
219
178
|
this.emit('frame', this.getFinalStates());
|
|
220
179
|
this.emit('rest', this.getFinalStates());
|
|
221
180
|
}
|
|
222
|
-
|
|
223
181
|
this.destroy();
|
|
224
182
|
}
|
|
225
|
-
|
|
226
183
|
pause() {
|
|
227
184
|
if (!this._paused) {
|
|
228
185
|
this._pausedTime = now();
|
|
@@ -232,13 +189,12 @@ class Animation extends _Event.default {
|
|
|
232
189
|
this._destroyed = false;
|
|
233
190
|
}
|
|
234
191
|
}
|
|
235
|
-
|
|
236
192
|
resume() {
|
|
237
193
|
if (this._started && this._paused) {
|
|
238
194
|
const nowTime = now();
|
|
239
195
|
const pausedDuration = nowTime - this._pausedTime;
|
|
240
|
-
this._paused = false;
|
|
241
|
-
|
|
196
|
+
this._paused = false;
|
|
197
|
+
// should add with pausedDuration
|
|
242
198
|
this._startedTime += pausedDuration;
|
|
243
199
|
this._prevTime += pausedDuration;
|
|
244
200
|
this._pausedTime = 0;
|
|
@@ -246,25 +202,21 @@ class Animation extends _Event.default {
|
|
|
246
202
|
this.animate();
|
|
247
203
|
}
|
|
248
204
|
}
|
|
249
|
-
|
|
250
205
|
stop() {
|
|
251
206
|
this.destroy();
|
|
252
|
-
|
|
253
207
|
if (!this._stopped) {
|
|
254
|
-
this._stopped = true;
|
|
255
|
-
|
|
208
|
+
this._stopped = true;
|
|
209
|
+
// this.emit('frame', this.getInitialStates());
|
|
256
210
|
this.emit('stop', this.getInitialStates());
|
|
257
211
|
this.initStates();
|
|
258
212
|
}
|
|
259
213
|
}
|
|
260
|
-
|
|
261
214
|
destroy() {
|
|
262
215
|
cancelAnimationFrame(this._timer);
|
|
263
216
|
clearTimeout(this._timer);
|
|
264
217
|
this._timer = null;
|
|
265
218
|
this._destroyed = true;
|
|
266
219
|
}
|
|
267
|
-
|
|
268
220
|
resetPlayStates() {
|
|
269
221
|
this._started = false;
|
|
270
222
|
this._stopped = false;
|
|
@@ -277,12 +229,10 @@ class Animation extends _Event.default {
|
|
|
277
229
|
this._startedTime = 0;
|
|
278
230
|
this._pausedTime = 0;
|
|
279
231
|
}
|
|
280
|
-
|
|
281
232
|
reset() {
|
|
282
233
|
this.destroy();
|
|
283
234
|
this.initStates();
|
|
284
235
|
}
|
|
285
|
-
|
|
286
236
|
reverse() {
|
|
287
237
|
this.destroy();
|
|
288
238
|
const props = Object.assign({}, this._props);
|
|
@@ -292,19 +242,14 @@ class Animation extends _Event.default {
|
|
|
292
242
|
this._props = Object.assign({}, props);
|
|
293
243
|
this.initStates();
|
|
294
244
|
}
|
|
295
|
-
|
|
296
245
|
getCurrentStates() {
|
|
297
246
|
return Object.assign({}, this._currentStyle);
|
|
298
247
|
}
|
|
299
|
-
|
|
300
248
|
getInitialStates() {
|
|
301
249
|
return Object.assign({}, (0, _stripStyle.default)(this._props.from));
|
|
302
250
|
}
|
|
303
|
-
|
|
304
251
|
getFinalStates() {
|
|
305
252
|
return Object.assign({}, (0, _stripStyle.default)(this._props.to));
|
|
306
253
|
}
|
|
307
|
-
|
|
308
254
|
}
|
|
309
|
-
|
|
310
255
|
exports.default = Animation;
|
package/lib/cjs/src/getEasing.js
CHANGED
|
@@ -5,102 +5,43 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = getEasing;
|
|
7
7
|
exports.easingMap = void 0;
|
|
8
|
-
|
|
9
8
|
var _bezierEasing = _interopRequireDefault(require("bezier-easing"));
|
|
10
|
-
|
|
11
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
|
-
|
|
13
10
|
function minMax(val, min, max) {
|
|
14
11
|
return Math.min(Math.max(val, min), max);
|
|
15
12
|
}
|
|
16
|
-
|
|
17
13
|
function parseEasingParameters(string) {
|
|
18
14
|
const match = /\(([^)]+)\)/.exec(string);
|
|
19
15
|
return match ? match[1].split(',').map(p => parseFloat(p)) : [];
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
|
|
16
|
+
}
|
|
17
|
+
// Elastic easing adapted from jQueryUI http://api.jqueryui.com/easings/
|
|
23
18
|
function elastic() {
|
|
24
19
|
let amplitude = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
|
|
25
20
|
let period = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.5;
|
|
26
21
|
const a = minMax(amplitude, 1, 10);
|
|
27
22
|
const p = minMax(period, 0.1, 2);
|
|
28
23
|
return t => t === 0 || t === 1 ? t : -a * Math.pow(2, 10 * (t - 1)) * Math.sin((t - 1 - p / (Math.PI * 2) * Math.asin(1 / a)) * (Math.PI * 2) / p);
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
|
|
24
|
+
}
|
|
25
|
+
// anime.js/src/index.js
|
|
32
26
|
const easingMap = (() => {
|
|
33
|
-
const names = ['Quad', 'Cubic', 'Quart', 'Quint', 'Sine', 'Expo', 'Circ', 'Back', 'Elastic'];
|
|
34
|
-
|
|
27
|
+
const names = ['Quad', 'Cubic', 'Quart', 'Quint', 'Sine', 'Expo', 'Circ', 'Back', 'Elastic'];
|
|
28
|
+
// Approximated Penner equations http://matthewlein.com/ceaser/
|
|
35
29
|
const curves = {
|
|
36
|
-
In: [[0.55, 0.085, 0.68, 0.53]
|
|
37
|
-
|
|
38
|
-
, [0.
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
/* inQuart */
|
|
42
|
-
, [0.755, 0.05, 0.855, 0.06]
|
|
43
|
-
/* inQuint */
|
|
44
|
-
, [0.47, 0.0, 0.745, 0.715]
|
|
45
|
-
/* inSine */
|
|
46
|
-
, [0.95, 0.05, 0.795, 0.035]
|
|
47
|
-
/* inExpo */
|
|
48
|
-
, [0.6, 0.04, 0.98, 0.335]
|
|
49
|
-
/* inCirc */
|
|
50
|
-
, [0.6, -0.28, 0.735, 0.045]
|
|
51
|
-
/* inBack */
|
|
52
|
-
, elastic
|
|
53
|
-
/* inElastic */
|
|
54
|
-
],
|
|
55
|
-
Out: [[0.25, 0.46, 0.45, 0.94]
|
|
56
|
-
/* outQuad */
|
|
57
|
-
, [0.215, 0.61, 0.355, 1.0]
|
|
58
|
-
/* outCubic */
|
|
59
|
-
, [0.165, 0.84, 0.44, 1.0]
|
|
60
|
-
/* outQuart */
|
|
61
|
-
, [0.23, 1.0, 0.32, 1.0]
|
|
62
|
-
/* outQuint */
|
|
63
|
-
, [0.39, 0.575, 0.565, 1.0]
|
|
64
|
-
/* outSine */
|
|
65
|
-
, [0.19, 1.0, 0.22, 1.0]
|
|
66
|
-
/* outExpo */
|
|
67
|
-
, [0.075, 0.82, 0.165, 1.0]
|
|
68
|
-
/* outCirc */
|
|
69
|
-
, [0.175, 0.885, 0.32, 1.275]
|
|
70
|
-
/* outBack */
|
|
71
|
-
, (a, p) => t => 1 - elastic(a, p)(1 - t)
|
|
72
|
-
/* outElastic */
|
|
73
|
-
],
|
|
74
|
-
InOut: [[0.455, 0.03, 0.515, 0.955]
|
|
75
|
-
/* inOutQuad */
|
|
76
|
-
, [0.645, 0.045, 0.355, 1.0]
|
|
77
|
-
/* inOutCubic */
|
|
78
|
-
, [0.77, 0.0, 0.175, 1.0]
|
|
79
|
-
/* inOutQuart */
|
|
80
|
-
, [0.86, 0.0, 0.07, 1.0]
|
|
81
|
-
/* inOutQuint */
|
|
82
|
-
, [0.445, 0.05, 0.55, 0.95]
|
|
83
|
-
/* inOutSine */
|
|
84
|
-
, [1.0, 0.0, 0.0, 1.0]
|
|
85
|
-
/* inOutExpo */
|
|
86
|
-
, [0.785, 0.135, 0.15, 0.86]
|
|
87
|
-
/* inOutCirc */
|
|
88
|
-
, [0.68, -0.55, 0.265, 1.55]
|
|
89
|
-
/* inOutBack */
|
|
90
|
-
, (a, p) => t => t < 0.5 ? elastic(a, p)(t * 2) / 2 : 1 - elastic(a, p)(t * -2 + 2) / 2
|
|
91
|
-
/* inOutElastic */
|
|
92
|
-
]
|
|
30
|
+
In: [[0.55, 0.085, 0.68, 0.53] /* inQuad */, [0.55, 0.055, 0.675, 0.19] /* inCubic */, [0.895, 0.03, 0.685, 0.22] /* inQuart */, [0.755, 0.05, 0.855, 0.06] /* inQuint */, [0.47, 0.0, 0.745, 0.715] /* inSine */, [0.95, 0.05, 0.795, 0.035] /* inExpo */, [0.6, 0.04, 0.98, 0.335] /* inCirc */, [0.6, -0.28, 0.735, 0.045] /* inBack */, elastic /* inElastic */],
|
|
31
|
+
|
|
32
|
+
Out: [[0.25, 0.46, 0.45, 0.94] /* outQuad */, [0.215, 0.61, 0.355, 1.0] /* outCubic */, [0.165, 0.84, 0.44, 1.0] /* outQuart */, [0.23, 1.0, 0.32, 1.0] /* outQuint */, [0.39, 0.575, 0.565, 1.0] /* outSine */, [0.19, 1.0, 0.22, 1.0] /* outExpo */, [0.075, 0.82, 0.165, 1.0] /* outCirc */, [0.175, 0.885, 0.32, 1.275] /* outBack */, (a, p) => t => 1 - elastic(a, p)(1 - t) /* outElastic */],
|
|
33
|
+
|
|
34
|
+
InOut: [[0.455, 0.03, 0.515, 0.955] /* inOutQuad */, [0.645, 0.045, 0.355, 1.0] /* inOutCubic */, [0.77, 0.0, 0.175, 1.0] /* inOutQuart */, [0.86, 0.0, 0.07, 1.0] /* inOutQuint */, [0.445, 0.05, 0.55, 0.95] /* inOutSine */, [1.0, 0.0, 0.0, 1.0] /* inOutExpo */, [0.785, 0.135, 0.15, 0.86] /* inOutCirc */, [0.68, -0.55, 0.265, 1.55] /* inOutBack */, (a, p) => t => t < 0.5 ? elastic(a, p)(t * 2) / 2 : 1 - elastic(a, p)(t * -2 + 2) / 2 /* inOutElastic */]
|
|
93
35
|
};
|
|
36
|
+
|
|
94
37
|
const eases = {
|
|
95
38
|
linear: [0.25, 0.25, 0.75, 0.75]
|
|
96
39
|
};
|
|
97
|
-
|
|
98
40
|
for (const coords of Object.keys(curves)) {
|
|
99
41
|
curves[coords].forEach((ease, i) => {
|
|
100
42
|
eases['ease' + coords + names[i]] = ease;
|
|
101
43
|
});
|
|
102
44
|
}
|
|
103
|
-
|
|
104
45
|
return eases;
|
|
105
46
|
})();
|
|
106
47
|
/**
|
|
@@ -108,35 +49,26 @@ const easingMap = (() => {
|
|
|
108
49
|
* @param {string|Function} easing
|
|
109
50
|
* @returns {Function}
|
|
110
51
|
*/
|
|
111
|
-
|
|
112
|
-
|
|
113
52
|
exports.easingMap = easingMap;
|
|
114
|
-
|
|
115
53
|
function getEasing(easing) {
|
|
116
54
|
if (typeof easing === 'function') {
|
|
117
55
|
return easing;
|
|
118
56
|
}
|
|
119
|
-
|
|
120
57
|
if (!easing || typeof easing !== 'string') {
|
|
121
58
|
easing = 'linear';
|
|
122
59
|
} else {
|
|
123
60
|
easing = easing.trim();
|
|
124
61
|
}
|
|
125
|
-
|
|
126
62
|
let name = easing.split('(')[0];
|
|
127
63
|
const args = parseEasingParameters(easing);
|
|
128
64
|
let ease;
|
|
129
|
-
|
|
130
65
|
if (name === 'cubic-bezier' || name === 'cubicBezier') {
|
|
131
66
|
return (0, _bezierEasing.default)(...(args.length ? args : easingMap.linear));
|
|
132
67
|
} else {
|
|
133
|
-
// eslint-disable-next-line eqeqeq
|
|
134
68
|
if (!name || typeof name !== 'string' || typeof name === 'string' && easingMap[name] == null) {
|
|
135
69
|
name = 'linear';
|
|
136
70
|
}
|
|
137
|
-
|
|
138
71
|
ease = easingMap[name];
|
|
139
|
-
|
|
140
72
|
if (typeof ease === 'function') {
|
|
141
73
|
return ease(...args);
|
|
142
74
|
} else if (args.length) {
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
* @param {Function} [formatter]
|
|
8
8
|
* @returns {any}
|
|
9
9
|
*/
|
|
10
|
-
export
|
|
11
|
-
export
|
|
12
|
-
export
|
|
10
|
+
export type FromTo = string | number | (string | number)[];
|
|
11
|
+
export type Parser = (value: FromTo) => any;
|
|
12
|
+
export type Formatter = (value: any[]) => any;
|
|
13
13
|
export default function interpolate(from: FromTo, to: FromTo, ratio?: number, parser?: Parser, formatter?: Formatter): any;
|
|
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = interpolate;
|
|
7
|
-
|
|
8
7
|
/**
|
|
9
8
|
*
|
|
10
9
|
* @param {number|number[]|string|string[]} from
|
|
@@ -14,27 +13,21 @@ exports.default = interpolate;
|
|
|
14
13
|
* @param {Function} [formatter]
|
|
15
14
|
* @returns {any}
|
|
16
15
|
*/
|
|
17
|
-
// eslint-disable-next-line max-len
|
|
18
16
|
function interpolate(from, to) {
|
|
19
17
|
let ratio = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
|
|
20
18
|
let parser = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
|
|
21
19
|
let formatter = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
|
|
22
|
-
|
|
23
20
|
if (typeof parser === 'function') {
|
|
24
21
|
from = parser(from);
|
|
25
22
|
to = parser(to);
|
|
26
23
|
}
|
|
27
|
-
|
|
28
24
|
if (typeof from === 'string' || typeof from === 'number') {
|
|
29
25
|
from = [parseFloat(from)];
|
|
30
26
|
}
|
|
31
|
-
|
|
32
27
|
if (typeof to === 'string' || typeof to === 'number') {
|
|
33
28
|
to = [parseFloat(to)];
|
|
34
29
|
}
|
|
35
|
-
|
|
36
30
|
const result = [];
|
|
37
|
-
|
|
38
31
|
if (Array.isArray(from) && Array.isArray(to)) {
|
|
39
32
|
from.forEach((fromVal, idx) => {
|
|
40
33
|
fromVal = parseFloat(fromVal);
|
|
@@ -42,7 +35,6 @@ function interpolate(from, to) {
|
|
|
42
35
|
result.push((toVal - fromVal) * ratio + fromVal);
|
|
43
36
|
});
|
|
44
37
|
}
|
|
45
|
-
|
|
46
38
|
if (typeof formatter === 'function') {
|
|
47
39
|
return formatter(result);
|
|
48
40
|
} else {
|
package/lib/cjs/src/mapToZero.js
CHANGED
|
@@ -4,15 +4,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = mapToZero;
|
|
7
|
-
|
|
8
7
|
// currently used to initiate the velocity style object to 0
|
|
9
8
|
function mapToZero(obj) {
|
|
10
9
|
const ret = {};
|
|
11
10
|
const objKeys = obj && Object.keys(obj) || [];
|
|
12
|
-
|
|
13
11
|
for (const key of objKeys) {
|
|
14
12
|
ret[key] = 0;
|
|
15
13
|
}
|
|
16
|
-
|
|
17
14
|
return ret;
|
|
18
15
|
}
|
package/lib/cjs/src/presets.js
CHANGED
|
@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = shouldStopAnimation;
|
|
7
|
-
|
|
8
7
|
var _shouldUseBezier = _interopRequireDefault(require("./shouldUseBezier"));
|
|
9
|
-
|
|
10
8
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
-
|
|
12
9
|
/**
|
|
13
10
|
* usage assumption: currentStyle values have already been rendered but it says
|
|
14
11
|
* nothing of whether currentStyle is stale (see unreadPropStyle)
|
|
@@ -21,30 +18,25 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
21
18
|
*
|
|
22
19
|
* @returns {boolean}
|
|
23
20
|
*/
|
|
24
|
-
// eslint-disable-next-line max-len
|
|
25
21
|
function shouldStopAnimation(currentStyle, style, currentVelocity, startTime, nowTime) {
|
|
26
22
|
for (const key of Object.keys(style)) {
|
|
27
23
|
const styleValue = style[key];
|
|
28
24
|
const value = typeof styleValue === 'number' ? styleValue : styleValue.val;
|
|
29
|
-
|
|
30
25
|
if (typeof styleValue === 'object' && styleValue.done) {
|
|
31
26
|
continue;
|
|
32
27
|
}
|
|
33
|
-
|
|
34
28
|
if ((0, _shouldUseBezier.default)(styleValue) && startTime && nowTime && styleValue.duration) {
|
|
35
29
|
if (styleValue.duration + startTime <= nowTime || value !== currentStyle[key]) {
|
|
36
30
|
return false;
|
|
37
31
|
}
|
|
38
32
|
} else if (typeof currentVelocity[key] === 'number' && currentVelocity[key] !== 0) {
|
|
39
33
|
return false;
|
|
40
|
-
}
|
|
34
|
+
}
|
|
35
|
+
// stepper will have already taken care of rounding precision errors, so
|
|
41
36
|
// won't have such thing as 0.9999 !=== 1
|
|
42
|
-
|
|
43
|
-
|
|
44
37
|
if (currentStyle[key] !== value) {
|
|
45
38
|
return false;
|
|
46
39
|
}
|
|
47
40
|
}
|
|
48
|
-
|
|
49
41
|
return true;
|
|
50
42
|
}
|
|
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = shouldUseBezier;
|
|
7
|
-
|
|
8
7
|
function shouldUseBezier(config) {
|
|
9
8
|
return Boolean(config && typeof config === 'object' && (config.duration > 0 || typeof config.easing === 'string' || typeof config.easing === 'function'));
|
|
10
9
|
}
|
package/lib/cjs/src/stepper.js
CHANGED
|
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = stepper;
|
|
7
|
-
|
|
8
7
|
/**
|
|
9
8
|
* @file
|
|
10
9
|
*
|
|
@@ -25,28 +24,24 @@ const reusedTuple = [0, 0];
|
|
|
25
24
|
* @param {number} b
|
|
26
25
|
* @param {number} precision
|
|
27
26
|
*/
|
|
28
|
-
// eslint-disable-next-line max-len
|
|
29
|
-
|
|
30
27
|
function stepper(secondPerFrame, x, v, destX, k, b, precision) {
|
|
31
28
|
// Spring stiffness, in kg / s^2
|
|
32
29
|
// for animations, destX is really spring length (spring at rest). initial
|
|
33
30
|
// position is considered as the stretched/compressed position of a spring
|
|
34
|
-
const Fspring = -k * (x - destX);
|
|
35
|
-
|
|
36
|
-
const Fdamper = -b * v;
|
|
31
|
+
const Fspring = -k * (x - destX);
|
|
32
|
+
// Damping, in kg / s
|
|
33
|
+
const Fdamper = -b * v;
|
|
34
|
+
// usually we put mass here, but for animation purposes, specifying mass is a
|
|
37
35
|
// bit redundant. you could simply adjust k and b accordingly
|
|
38
36
|
// let a = (Fspring + Fdamper) / mass;
|
|
39
|
-
|
|
40
37
|
const a = Fspring + Fdamper;
|
|
41
38
|
const newV = v + a * secondPerFrame;
|
|
42
39
|
const newX = x + newV * secondPerFrame;
|
|
43
|
-
|
|
44
40
|
if (Math.abs(newV) < precision && Math.abs(newX - destX) < precision) {
|
|
45
41
|
reusedTuple[0] = destX;
|
|
46
42
|
reusedTuple[1] = 0;
|
|
47
43
|
return reusedTuple;
|
|
48
44
|
}
|
|
49
|
-
|
|
50
45
|
reusedTuple[0] = newX;
|
|
51
46
|
reusedTuple[1] = newV;
|
|
52
47
|
return reusedTuple;
|
|
@@ -4,18 +4,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = stripStyle;
|
|
7
|
-
|
|
8
|
-
/* eslint-disable no-restricted-syntax */
|
|
9
7
|
function stripStyle(style) {
|
|
10
8
|
const ret = {};
|
|
11
|
-
|
|
12
9
|
for (const key in style) {
|
|
13
10
|
if (!Object.prototype.hasOwnProperty.call(style, key)) {
|
|
14
11
|
continue;
|
|
15
12
|
}
|
|
16
|
-
|
|
17
13
|
ret[key] = typeof style[key] === 'number' ? style[key] : style[key].val;
|
|
18
14
|
}
|
|
19
|
-
|
|
20
15
|
return ret;
|
|
21
16
|
}
|