@douyinfe/semi-animation 2.36.0-beta.0 → 2.36.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 +9 -60
- package/lib/cjs/src/getEasing.d.ts +1 -1
- package/lib/cjs/src/getEasing.js +12 -79
- package/lib/cjs/src/interpolate.d.ts +3 -3
- package/lib/cjs/src/interpolate.js +0 -7
- package/lib/cjs/src/mapToZero.js +0 -3
- package/lib/cjs/src/presets.js +0 -1
- package/lib/cjs/src/shouldStopAnimation.js +3 -11
- package/lib/cjs/src/shouldUseBezier.js +0 -1
- package/lib/cjs/src/stepper.js +4 -8
- package/lib/cjs/src/stripStyle.js +0 -4
- package/lib/cjs/src/utils/Event.js +4 -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 -1
- package/lib/cjs/src/utils/shallowEqual.js +0 -6
- package/lib/cjs/src/wrapValue.js +0 -11
- package/lib/es/src/Animation.js +8 -51
- package/lib/es/src/getEasing.d.ts +1 -1
- package/lib/es/src/getEasing.js +12 -75
- package/lib/es/src/interpolate.d.ts +3 -3
- package/lib/es/src/interpolate.js +0 -6
- package/lib/es/src/mapToZero.js +0 -2
- package/lib/es/src/shouldStopAnimation.js +2 -7
- package/lib/es/src/stepper.js +4 -7
- package/lib/es/src/stripStyle.js +0 -3
- package/lib/es/src/utils/Event.js +4 -19
- package/lib/es/src/utils/debounce.js +0 -1
- package/lib/es/src/utils/log.js +0 -2
- package/lib/es/src/utils/shallowEqual.js +0 -5
- package/lib/es/src/wrapValue.js +0 -5
- package/package.json +2 -2
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,19 @@ 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
15
|
/* eslint-disable max-depth */
|
|
25
|
-
|
|
26
16
|
/* eslint-disable eqeqeq */
|
|
27
|
-
|
|
28
17
|
/* eslint-disable max-lines-per-function */
|
|
29
|
-
const now = () => Date.now();
|
|
30
18
|
|
|
19
|
+
const now = () => Date.now();
|
|
31
20
|
const msPerFrame = 1000 / 60;
|
|
32
21
|
/**
|
|
33
22
|
* @summary
|
|
@@ -38,7 +27,6 @@ const msPerFrame = 1000 / 60;
|
|
|
38
27
|
* Binding method:
|
|
39
28
|
* const animation = new Animation (); animation.on ('start | frame | rest ', () => {});
|
|
40
29
|
*/
|
|
41
|
-
|
|
42
30
|
class Animation extends _Event.default {
|
|
43
31
|
constructor() {
|
|
44
32
|
let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
@@ -48,18 +36,14 @@ class Animation extends _Event.default {
|
|
|
48
36
|
this._config = Object.assign({}, config);
|
|
49
37
|
this.initStates();
|
|
50
38
|
}
|
|
51
|
-
|
|
52
39
|
_wrapConfig(object, config) {
|
|
53
40
|
config = config && typeof config === 'object' ? config : this._config;
|
|
54
41
|
const ret = {};
|
|
55
|
-
|
|
56
42
|
for (const key of Object.keys(object)) {
|
|
57
43
|
ret[key] = (0, _wrapValue.default)(object[key], config);
|
|
58
44
|
}
|
|
59
|
-
|
|
60
45
|
return ret;
|
|
61
46
|
}
|
|
62
|
-
|
|
63
47
|
initStates(props, config) {
|
|
64
48
|
props = props && typeof props === 'object' ? props : this._props;
|
|
65
49
|
config = config && typeof config === 'object' ? config : this._config;
|
|
@@ -68,13 +52,11 @@ class Animation extends _Event.default {
|
|
|
68
52
|
to
|
|
69
53
|
} = props;
|
|
70
54
|
this._from = {};
|
|
71
|
-
|
|
72
55
|
if (from && typeof from) {
|
|
73
56
|
for (const key of Object.keys(from)) {
|
|
74
57
|
this._from[key] = typeof from[key] === 'object' && from[key].val ? from[key].val : from[key];
|
|
75
58
|
}
|
|
76
59
|
}
|
|
77
|
-
|
|
78
60
|
this._to = this._wrapConfig(to, config);
|
|
79
61
|
this._delay = parseInt(config.delay) || 0;
|
|
80
62
|
const currentStyle = this._from && (0, _stripStyle.default)(this._from) || (0, _stripStyle.default)(this._to);
|
|
@@ -87,15 +69,13 @@ class Animation extends _Event.default {
|
|
|
87
69
|
this._frameCount = 0;
|
|
88
70
|
this._prevTime = 0;
|
|
89
71
|
}
|
|
90
|
-
|
|
91
72
|
animate() {
|
|
92
73
|
if (this._timer != null) {
|
|
93
74
|
return;
|
|
94
75
|
}
|
|
95
|
-
|
|
96
76
|
this._timer = requestAnimationFrame(timestamp => {
|
|
97
|
-
const nowTime = now();
|
|
98
|
-
|
|
77
|
+
const nowTime = now();
|
|
78
|
+
// stop animation and emit onRest event
|
|
99
79
|
if ((0, _shouldStopAnimation.default)(this._currentStyle, this._to, this._currentVelocity, this._startedTime || nowTime, nowTime) || this._ended || this._stopped) {
|
|
100
80
|
if (this._wasAnimating && !this._ended && !this._stopped) {
|
|
101
81
|
// should emit reset in settimeout for delay msPerframe
|
|
@@ -106,45 +86,36 @@ class Animation extends _Event.default {
|
|
|
106
86
|
this.emit('rest', this.getCurrentStates());
|
|
107
87
|
}, msPerFrame);
|
|
108
88
|
}
|
|
109
|
-
|
|
110
89
|
this.resetPlayStates();
|
|
111
90
|
return;
|
|
112
91
|
}
|
|
113
|
-
|
|
114
92
|
if (!this._started) {
|
|
115
93
|
this._started = true;
|
|
116
94
|
this.emit('start', this.getCurrentStates());
|
|
117
95
|
}
|
|
118
|
-
|
|
119
96
|
this._stopped = false;
|
|
120
97
|
this._paused = false;
|
|
121
98
|
this._wasAnimating = true;
|
|
122
|
-
|
|
123
99
|
if (this._startedTime === 0) {
|
|
124
100
|
this._startedTime = nowTime;
|
|
125
101
|
}
|
|
126
|
-
|
|
127
102
|
const currentTime = nowTime;
|
|
128
103
|
const timeDelta = currentTime - this._prevTime;
|
|
129
104
|
this._prevTime = currentTime;
|
|
130
|
-
|
|
131
105
|
if (currentTime - this._startedTime < this._delay) {
|
|
132
106
|
this._timer = null;
|
|
133
107
|
this.animate();
|
|
134
108
|
}
|
|
135
|
-
|
|
136
109
|
const newLastIdealStyle = {};
|
|
137
110
|
const newLastIdealVelocity = {};
|
|
138
111
|
const newCurrentStyle = {};
|
|
139
112
|
const newCurrentVelocity = {};
|
|
140
113
|
const toKeys = this._to && Object.keys(this._to) || [];
|
|
141
|
-
|
|
142
114
|
for (const key of toKeys) {
|
|
143
115
|
const styleValue = this._to[key];
|
|
144
116
|
this._accumulatedTime[key] = typeof this._accumulatedTime[key] !== 'number' ? timeDelta : this._accumulatedTime[key] + timeDelta;
|
|
145
117
|
const from = this._from[key] != null && typeof this._from[key] === 'object' ? this._from[key].val : this._from[key];
|
|
146
118
|
const to = styleValue.val;
|
|
147
|
-
|
|
148
119
|
if (typeof styleValue === 'number') {
|
|
149
120
|
newCurrentStyle[key] = styleValue;
|
|
150
121
|
newCurrentVelocity[key] = 0;
|
|
@@ -153,7 +124,6 @@ class Animation extends _Event.default {
|
|
|
153
124
|
} else {
|
|
154
125
|
let newLastIdealStyleValue = this._lastIdealStyle[key];
|
|
155
126
|
let newLastIdealVelocityValue = this._lastIdealVelocity[key];
|
|
156
|
-
|
|
157
127
|
if ((0, _shouldUseBezier.default)(this._config) || (0, _shouldUseBezier.default)(styleValue)) {
|
|
158
128
|
// easing
|
|
159
129
|
const {
|
|
@@ -161,12 +131,10 @@ class Animation extends _Event.default {
|
|
|
161
131
|
duration
|
|
162
132
|
} = styleValue;
|
|
163
133
|
newLastIdealStyleValue = from + easing((currentTime - this._startedTime) / duration) * (to - from);
|
|
164
|
-
|
|
165
134
|
if (currentTime >= this._startedTime + duration) {
|
|
166
135
|
newLastIdealStyleValue = to;
|
|
167
136
|
styleValue.done = true;
|
|
168
137
|
}
|
|
169
|
-
|
|
170
138
|
newLastIdealStyle[key] = newLastIdealStyleValue;
|
|
171
139
|
newCurrentStyle[key] = newLastIdealStyleValue;
|
|
172
140
|
} else if (to != null && to === this._currentStyle[key]) {
|
|
@@ -178,11 +146,9 @@ class Animation extends _Event.default {
|
|
|
178
146
|
// spring
|
|
179
147
|
const currentFrameCompletion = (this._accumulatedTime[key] - Math.floor(this._accumulatedTime[key] / msPerFrame) * msPerFrame) / msPerFrame;
|
|
180
148
|
const framesToCatchUp = Math.floor(this._accumulatedTime[key] / msPerFrame);
|
|
181
|
-
|
|
182
149
|
for (let i = 0; i < framesToCatchUp; i++) {
|
|
183
150
|
[newLastIdealStyleValue, newLastIdealVelocityValue] = (0, _stepper.default)(msPerFrame / 1000, newLastIdealStyleValue, newLastIdealVelocityValue, styleValue.val, styleValue.tension, styleValue.friction, styleValue.precision);
|
|
184
151
|
}
|
|
185
|
-
|
|
186
152
|
const [nextIdealX, nextIdealV] = (0, _stepper.default)(msPerFrame / 1000, newLastIdealStyleValue, newLastIdealVelocityValue, styleValue.val, styleValue.tension, styleValue.friction, styleValue.precision);
|
|
187
153
|
newCurrentStyle[key] = newLastIdealStyleValue + (nextIdealX - newLastIdealStyleValue) * currentFrameCompletion;
|
|
188
154
|
newCurrentVelocity[key] = newLastIdealVelocityValue + (nextIdealV - newLastIdealVelocityValue) * currentFrameCompletion;
|
|
@@ -192,26 +158,23 @@ class Animation extends _Event.default {
|
|
|
192
158
|
}
|
|
193
159
|
}
|
|
194
160
|
}
|
|
195
|
-
|
|
196
161
|
this._timer = null;
|
|
197
162
|
this._currentStyle = Object.assign({}, newCurrentStyle);
|
|
198
163
|
this._currentVelocity = Object.assign({}, newCurrentVelocity);
|
|
199
164
|
this._lastIdealStyle = Object.assign({}, newLastIdealStyle);
|
|
200
|
-
this._lastIdealVelocity = Object.assign({}, newLastIdealVelocity);
|
|
201
|
-
|
|
165
|
+
this._lastIdealVelocity = Object.assign({}, newLastIdealVelocity);
|
|
166
|
+
// console.log(newCurrentStyle);
|
|
202
167
|
if (!this._destroyed) {
|
|
203
168
|
this.emit('frame', this.getCurrentStates());
|
|
204
169
|
this.animate();
|
|
205
170
|
}
|
|
206
171
|
});
|
|
207
172
|
}
|
|
208
|
-
|
|
209
173
|
start() {
|
|
210
174
|
this._prevTime = now();
|
|
211
175
|
this._startedTime = now();
|
|
212
176
|
this.animate();
|
|
213
177
|
}
|
|
214
|
-
|
|
215
178
|
end() {
|
|
216
179
|
if (!this._ended) {
|
|
217
180
|
this._ended = true;
|
|
@@ -219,10 +182,8 @@ class Animation extends _Event.default {
|
|
|
219
182
|
this.emit('frame', this.getFinalStates());
|
|
220
183
|
this.emit('rest', this.getFinalStates());
|
|
221
184
|
}
|
|
222
|
-
|
|
223
185
|
this.destroy();
|
|
224
186
|
}
|
|
225
|
-
|
|
226
187
|
pause() {
|
|
227
188
|
if (!this._paused) {
|
|
228
189
|
this._pausedTime = now();
|
|
@@ -232,13 +193,12 @@ class Animation extends _Event.default {
|
|
|
232
193
|
this._destroyed = false;
|
|
233
194
|
}
|
|
234
195
|
}
|
|
235
|
-
|
|
236
196
|
resume() {
|
|
237
197
|
if (this._started && this._paused) {
|
|
238
198
|
const nowTime = now();
|
|
239
199
|
const pausedDuration = nowTime - this._pausedTime;
|
|
240
|
-
this._paused = false;
|
|
241
|
-
|
|
200
|
+
this._paused = false;
|
|
201
|
+
// should add with pausedDuration
|
|
242
202
|
this._startedTime += pausedDuration;
|
|
243
203
|
this._prevTime += pausedDuration;
|
|
244
204
|
this._pausedTime = 0;
|
|
@@ -246,25 +206,21 @@ class Animation extends _Event.default {
|
|
|
246
206
|
this.animate();
|
|
247
207
|
}
|
|
248
208
|
}
|
|
249
|
-
|
|
250
209
|
stop() {
|
|
251
210
|
this.destroy();
|
|
252
|
-
|
|
253
211
|
if (!this._stopped) {
|
|
254
|
-
this._stopped = true;
|
|
255
|
-
|
|
212
|
+
this._stopped = true;
|
|
213
|
+
// this.emit('frame', this.getInitialStates());
|
|
256
214
|
this.emit('stop', this.getInitialStates());
|
|
257
215
|
this.initStates();
|
|
258
216
|
}
|
|
259
217
|
}
|
|
260
|
-
|
|
261
218
|
destroy() {
|
|
262
219
|
cancelAnimationFrame(this._timer);
|
|
263
220
|
clearTimeout(this._timer);
|
|
264
221
|
this._timer = null;
|
|
265
222
|
this._destroyed = true;
|
|
266
223
|
}
|
|
267
|
-
|
|
268
224
|
resetPlayStates() {
|
|
269
225
|
this._started = false;
|
|
270
226
|
this._stopped = false;
|
|
@@ -277,12 +233,10 @@ class Animation extends _Event.default {
|
|
|
277
233
|
this._startedTime = 0;
|
|
278
234
|
this._pausedTime = 0;
|
|
279
235
|
}
|
|
280
|
-
|
|
281
236
|
reset() {
|
|
282
237
|
this.destroy();
|
|
283
238
|
this.initStates();
|
|
284
239
|
}
|
|
285
|
-
|
|
286
240
|
reverse() {
|
|
287
241
|
this.destroy();
|
|
288
242
|
const props = Object.assign({}, this._props);
|
|
@@ -292,19 +246,14 @@ class Animation extends _Event.default {
|
|
|
292
246
|
this._props = Object.assign({}, props);
|
|
293
247
|
this.initStates();
|
|
294
248
|
}
|
|
295
|
-
|
|
296
249
|
getCurrentStates() {
|
|
297
250
|
return Object.assign({}, this._currentStyle);
|
|
298
251
|
}
|
|
299
|
-
|
|
300
252
|
getInitialStates() {
|
|
301
253
|
return Object.assign({}, (0, _stripStyle.default)(this._props.from));
|
|
302
254
|
}
|
|
303
|
-
|
|
304
255
|
getFinalStates() {
|
|
305
256
|
return Object.assign({}, (0, _stripStyle.default)(this._props.to));
|
|
306
257
|
}
|
|
307
|
-
|
|
308
258
|
}
|
|
309
|
-
|
|
310
259
|
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,25 +49,19 @@ 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 {
|
|
@@ -134,9 +69,7 @@ function getEasing(easing) {
|
|
|
134
69
|
if (!name || typeof name !== 'string' || typeof name === 'string' && easingMap[name] == null) {
|
|
135
70
|
name = 'linear';
|
|
136
71
|
}
|
|
137
|
-
|
|
138
72
|
ease = easingMap[name];
|
|
139
|
-
|
|
140
73
|
if (typeof ease === 'function') {
|
|
141
74
|
return ease(...args);
|
|
142
75
|
} 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
|
|
@@ -19,22 +18,17 @@ function interpolate(from, to) {
|
|
|
19
18
|
let ratio = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
|
|
20
19
|
let parser = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
|
|
21
20
|
let formatter = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
|
|
22
|
-
|
|
23
21
|
if (typeof parser === 'function') {
|
|
24
22
|
from = parser(from);
|
|
25
23
|
to = parser(to);
|
|
26
24
|
}
|
|
27
|
-
|
|
28
25
|
if (typeof from === 'string' || typeof from === 'number') {
|
|
29
26
|
from = [parseFloat(from)];
|
|
30
27
|
}
|
|
31
|
-
|
|
32
28
|
if (typeof to === 'string' || typeof to === 'number') {
|
|
33
29
|
to = [parseFloat(to)];
|
|
34
30
|
}
|
|
35
|
-
|
|
36
31
|
const result = [];
|
|
37
|
-
|
|
38
32
|
if (Array.isArray(from) && Array.isArray(to)) {
|
|
39
33
|
from.forEach((fromVal, idx) => {
|
|
40
34
|
fromVal = parseFloat(fromVal);
|
|
@@ -42,7 +36,6 @@ function interpolate(from, to) {
|
|
|
42
36
|
result.push((toVal - fromVal) * ratio + fromVal);
|
|
43
37
|
});
|
|
44
38
|
}
|
|
45
|
-
|
|
46
39
|
if (typeof formatter === 'function') {
|
|
47
40
|
return formatter(result);
|
|
48
41
|
} 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)
|
|
@@ -20,31 +17,26 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
20
17
|
* @param {number} nowTime
|
|
21
18
|
*
|
|
22
19
|
* @returns {boolean}
|
|
23
|
-
*/
|
|
24
|
-
// eslint-disable-next-line max-len
|
|
20
|
+
*/ // 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
|
*
|
|
@@ -26,27 +25,24 @@ const reusedTuple = [0, 0];
|
|
|
26
25
|
* @param {number} precision
|
|
27
26
|
*/
|
|
28
27
|
// eslint-disable-next-line max-len
|
|
29
|
-
|
|
30
28
|
function stepper(secondPerFrame, x, v, destX, k, b, precision) {
|
|
31
29
|
// Spring stiffness, in kg / s^2
|
|
32
30
|
// for animations, destX is really spring length (spring at rest). initial
|
|
33
31
|
// position is considered as the stretched/compressed position of a spring
|
|
34
|
-
const Fspring = -k * (x - destX);
|
|
35
|
-
|
|
36
|
-
const Fdamper = -b * v;
|
|
32
|
+
const Fspring = -k * (x - destX);
|
|
33
|
+
// Damping, in kg / s
|
|
34
|
+
const Fdamper = -b * v;
|
|
35
|
+
// usually we put mass here, but for animation purposes, specifying mass is a
|
|
37
36
|
// bit redundant. you could simply adjust k and b accordingly
|
|
38
37
|
// let a = (Fspring + Fdamper) / mass;
|
|
39
|
-
|
|
40
38
|
const a = Fspring + Fdamper;
|
|
41
39
|
const newV = v + a * secondPerFrame;
|
|
42
40
|
const newX = x + newV * secondPerFrame;
|
|
43
|
-
|
|
44
41
|
if (Math.abs(newV) < precision && Math.abs(newX - destX) < precision) {
|
|
45
42
|
reusedTuple[0] = destX;
|
|
46
43
|
reusedTuple[1] = 0;
|
|
47
44
|
return reusedTuple;
|
|
48
45
|
}
|
|
49
|
-
|
|
50
46
|
reusedTuple[0] = newX;
|
|
51
47
|
reusedTuple[1] = newV;
|
|
52
48
|
return reusedTuple;
|
|
@@ -4,18 +4,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = stripStyle;
|
|
7
|
-
|
|
8
7
|
/* eslint-disable no-restricted-syntax */
|
|
9
8
|
function stripStyle(style) {
|
|
10
9
|
const ret = {};
|
|
11
|
-
|
|
12
10
|
for (const key in style) {
|
|
13
11
|
if (!Object.prototype.hasOwnProperty.call(style, key)) {
|
|
14
12
|
continue;
|
|
15
13
|
}
|
|
16
|
-
|
|
17
14
|
ret[key] = typeof style[key] === 'number' ? style[key] : style[key].val;
|
|
18
15
|
}
|
|
19
|
-
|
|
20
16
|
return ret;
|
|
21
17
|
}
|