@douyinfe/semi-animation 2.24.2 → 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
|
@@ -4,71 +4,52 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
class Event {
|
|
9
8
|
constructor() {
|
|
10
9
|
this._eventMap = new Map();
|
|
11
10
|
}
|
|
12
|
-
|
|
13
11
|
on(event, callback) {
|
|
14
12
|
if (event && typeof callback === 'function') {
|
|
15
13
|
this._eventMap.has(event) || this._eventMap.set(event, []);
|
|
16
|
-
|
|
17
14
|
this._eventMap.get(event).push(callback);
|
|
18
15
|
}
|
|
19
|
-
|
|
20
16
|
return this;
|
|
21
17
|
}
|
|
22
|
-
|
|
23
18
|
once(event, callback) {
|
|
24
19
|
var _this = this;
|
|
25
|
-
|
|
26
20
|
if (event && typeof callback === 'function') {
|
|
27
21
|
const fn = function () {
|
|
28
22
|
callback(...arguments);
|
|
29
|
-
|
|
30
23
|
_this.off(event, fn);
|
|
31
24
|
};
|
|
32
|
-
|
|
33
25
|
this.on(event, fn);
|
|
34
26
|
}
|
|
35
27
|
}
|
|
36
|
-
|
|
37
28
|
off(event, callback) {
|
|
38
29
|
if (event) {
|
|
39
30
|
if (typeof callback === 'function') {
|
|
40
31
|
const callbacks = this._eventMap.get(event);
|
|
41
|
-
|
|
42
32
|
if (Array.isArray(callbacks) && callbacks.length) {
|
|
43
|
-
let index = -1;
|
|
44
|
-
|
|
33
|
+
let index = -1;
|
|
45
34
|
while ((index = callbacks.findIndex(cb => cb === callback)) > -1) {
|
|
46
35
|
callbacks.splice(index, 1);
|
|
47
36
|
}
|
|
48
|
-
}
|
|
49
|
-
|
|
37
|
+
}
|
|
50
38
|
} else if (callback == null) {
|
|
51
39
|
this._eventMap.delete(event);
|
|
52
40
|
}
|
|
53
41
|
}
|
|
54
|
-
|
|
55
42
|
return this;
|
|
56
43
|
}
|
|
57
|
-
|
|
58
44
|
emit(event) {
|
|
59
45
|
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
60
46
|
args[_key - 1] = arguments[_key];
|
|
61
47
|
}
|
|
62
|
-
|
|
63
48
|
if (!this._eventMap.has(event)) {
|
|
64
49
|
return false;
|
|
65
50
|
}
|
|
66
|
-
|
|
67
51
|
this._eventMap.get(event).forEach(callback => callback(...args));
|
|
68
|
-
|
|
69
52
|
return true;
|
|
70
53
|
}
|
|
71
|
-
|
|
72
54
|
}
|
|
73
|
-
|
|
74
55
|
exports.default = Event;
|
|
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = debounce;
|
|
7
|
-
|
|
8
7
|
/**
|
|
9
8
|
*
|
|
10
9
|
* @param {Function} func
|
|
@@ -17,7 +16,6 @@ function debounce(func) {
|
|
|
17
16
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
18
17
|
args[_key] = arguments[_key];
|
|
19
18
|
}
|
|
20
|
-
|
|
21
19
|
// eslint-disable-next-line @typescript-eslint/no-this-alias
|
|
22
20
|
const context = this;
|
|
23
21
|
clearTimeout(timeoutId);
|
package/lib/cjs/src/utils/log.js
CHANGED
|
@@ -4,16 +4,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
const log = function (text) {
|
|
9
8
|
if (process.env.NODE_ENV === 'development') {
|
|
10
9
|
for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
11
10
|
rest[_key - 1] = arguments[_key];
|
|
12
11
|
}
|
|
13
|
-
|
|
14
12
|
console.log(text, ...rest);
|
|
15
13
|
}
|
|
16
14
|
};
|
|
17
|
-
|
|
18
15
|
var _default = log;
|
|
19
16
|
exports.default = _default;
|
|
@@ -4,30 +4,23 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = shallowEqual;
|
|
7
|
-
|
|
8
|
-
/* eslint-disable no-restricted-syntax */
|
|
9
7
|
function shallowEqual(a, b) {
|
|
10
8
|
if (typeof a !== typeof b) {
|
|
11
9
|
return false;
|
|
12
10
|
}
|
|
13
|
-
|
|
14
11
|
if (typeof a === 'string' || typeof a === 'number') {
|
|
15
12
|
return a === b;
|
|
16
13
|
}
|
|
17
|
-
|
|
18
14
|
let i;
|
|
19
|
-
|
|
20
15
|
for (i in a) {
|
|
21
16
|
if (!(i in b)) {
|
|
22
17
|
return false;
|
|
23
18
|
}
|
|
24
19
|
}
|
|
25
|
-
|
|
26
20
|
for (i in b) {
|
|
27
21
|
if (a[i] !== b[i]) {
|
|
28
22
|
return false;
|
|
29
23
|
}
|
|
30
24
|
}
|
|
31
|
-
|
|
32
25
|
return i === void 0 ? a === b : true;
|
|
33
26
|
}
|
package/lib/cjs/src/wrapValue.js
CHANGED
|
@@ -4,22 +4,15 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = wrapValue;
|
|
7
|
-
|
|
8
7
|
var _getEasing = _interopRequireDefault(require("./getEasing"));
|
|
9
|
-
|
|
10
8
|
var _presets = _interopRequireDefault(require("./presets"));
|
|
11
|
-
|
|
12
9
|
var _shouldUseBezier = _interopRequireDefault(require("./shouldUseBezier"));
|
|
13
|
-
|
|
14
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
-
|
|
16
11
|
const defaultConfig = Object.assign(Object.assign({}, _presets.default.default), {
|
|
17
12
|
precision: 0.01
|
|
18
13
|
});
|
|
19
|
-
|
|
20
14
|
function wrapValue(val) {
|
|
21
15
|
let config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
22
|
-
|
|
23
16
|
if ((0, _shouldUseBezier.default)(config)) {
|
|
24
17
|
const easing = (0, _getEasing.default)(config.easing);
|
|
25
18
|
const duration = typeof config.duration === 'number' && config.duration > 0 ? config.duration : 1000;
|
|
@@ -28,11 +21,9 @@ function wrapValue(val) {
|
|
|
28
21
|
duration
|
|
29
22
|
});
|
|
30
23
|
}
|
|
31
|
-
|
|
32
24
|
let wrapped = Object.assign(Object.assign(Object.assign({}, defaultConfig), config), {
|
|
33
25
|
done: false
|
|
34
26
|
});
|
|
35
|
-
|
|
36
27
|
if (val && typeof val === 'object' && 'val' in val) {
|
|
37
28
|
if ((0, _shouldUseBezier.default)(val)) {
|
|
38
29
|
const easing = (0, _getEasing.default)(val.easing);
|
|
@@ -42,13 +33,11 @@ function wrapValue(val) {
|
|
|
42
33
|
duration
|
|
43
34
|
});
|
|
44
35
|
}
|
|
45
|
-
|
|
46
36
|
wrapped = Object.assign(Object.assign({}, wrapped), val);
|
|
47
37
|
} else {
|
|
48
38
|
wrapped = Object.assign(Object.assign({}, wrapped), {
|
|
49
39
|
val
|
|
50
40
|
});
|
|
51
41
|
}
|
|
52
|
-
|
|
53
42
|
return wrapped;
|
|
54
43
|
}
|
package/lib/es/src/Animation.js
CHANGED
|
@@ -1,8 +1,3 @@
|
|
|
1
|
-
/* eslint-disable max-depth */
|
|
2
|
-
|
|
3
|
-
/* eslint-disable eqeqeq */
|
|
4
|
-
|
|
5
|
-
/* eslint-disable max-lines-per-function */
|
|
6
1
|
import Event from './utils/Event';
|
|
7
2
|
import shouldStopAnimation from './shouldStopAnimation';
|
|
8
3
|
import shouldUseBezier from './shouldUseBezier';
|
|
@@ -10,9 +5,7 @@ import stripStyle from './stripStyle';
|
|
|
10
5
|
import stepper from './stepper';
|
|
11
6
|
import mapToZero from './mapToZero';
|
|
12
7
|
import wrapValue from './wrapValue';
|
|
13
|
-
|
|
14
8
|
const now = () => Date.now();
|
|
15
|
-
|
|
16
9
|
const msPerFrame = 1000 / 60;
|
|
17
10
|
/**
|
|
18
11
|
* @summary
|
|
@@ -23,7 +16,6 @@ const msPerFrame = 1000 / 60;
|
|
|
23
16
|
* Binding method:
|
|
24
17
|
* const animation = new Animation (); animation.on ('start | frame | rest ', () => {});
|
|
25
18
|
*/
|
|
26
|
-
|
|
27
19
|
export default class Animation extends Event {
|
|
28
20
|
constructor() {
|
|
29
21
|
let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
@@ -33,18 +25,14 @@ export default class Animation extends Event {
|
|
|
33
25
|
this._config = Object.assign({}, config);
|
|
34
26
|
this.initStates();
|
|
35
27
|
}
|
|
36
|
-
|
|
37
28
|
_wrapConfig(object, config) {
|
|
38
29
|
config = config && typeof config === 'object' ? config : this._config;
|
|
39
30
|
const ret = {};
|
|
40
|
-
|
|
41
31
|
for (const key of Object.keys(object)) {
|
|
42
32
|
ret[key] = wrapValue(object[key], config);
|
|
43
33
|
}
|
|
44
|
-
|
|
45
34
|
return ret;
|
|
46
35
|
}
|
|
47
|
-
|
|
48
36
|
initStates(props, config) {
|
|
49
37
|
props = props && typeof props === 'object' ? props : this._props;
|
|
50
38
|
config = config && typeof config === 'object' ? config : this._config;
|
|
@@ -53,13 +41,11 @@ export default class Animation extends Event {
|
|
|
53
41
|
to
|
|
54
42
|
} = props;
|
|
55
43
|
this._from = {};
|
|
56
|
-
|
|
57
44
|
if (from && typeof from) {
|
|
58
45
|
for (const key of Object.keys(from)) {
|
|
59
46
|
this._from[key] = typeof from[key] === 'object' && from[key].val ? from[key].val : from[key];
|
|
60
47
|
}
|
|
61
48
|
}
|
|
62
|
-
|
|
63
49
|
this._to = this._wrapConfig(to, config);
|
|
64
50
|
this._delay = parseInt(config.delay) || 0;
|
|
65
51
|
const currentStyle = this._from && stripStyle(this._from) || stripStyle(this._to);
|
|
@@ -72,15 +58,13 @@ export default class Animation extends Event {
|
|
|
72
58
|
this._frameCount = 0;
|
|
73
59
|
this._prevTime = 0;
|
|
74
60
|
}
|
|
75
|
-
|
|
76
61
|
animate() {
|
|
77
62
|
if (this._timer != null) {
|
|
78
63
|
return;
|
|
79
64
|
}
|
|
80
|
-
|
|
81
65
|
this._timer = requestAnimationFrame(timestamp => {
|
|
82
|
-
const nowTime = now();
|
|
83
|
-
|
|
66
|
+
const nowTime = now();
|
|
67
|
+
// stop animation and emit onRest event
|
|
84
68
|
if (shouldStopAnimation(this._currentStyle, this._to, this._currentVelocity, this._startedTime || nowTime, nowTime) || this._ended || this._stopped) {
|
|
85
69
|
if (this._wasAnimating && !this._ended && !this._stopped) {
|
|
86
70
|
// should emit reset in settimeout for delay msPerframe
|
|
@@ -91,45 +75,36 @@ export default class Animation extends Event {
|
|
|
91
75
|
this.emit('rest', this.getCurrentStates());
|
|
92
76
|
}, msPerFrame);
|
|
93
77
|
}
|
|
94
|
-
|
|
95
78
|
this.resetPlayStates();
|
|
96
79
|
return;
|
|
97
80
|
}
|
|
98
|
-
|
|
99
81
|
if (!this._started) {
|
|
100
82
|
this._started = true;
|
|
101
83
|
this.emit('start', this.getCurrentStates());
|
|
102
84
|
}
|
|
103
|
-
|
|
104
85
|
this._stopped = false;
|
|
105
86
|
this._paused = false;
|
|
106
87
|
this._wasAnimating = true;
|
|
107
|
-
|
|
108
88
|
if (this._startedTime === 0) {
|
|
109
89
|
this._startedTime = nowTime;
|
|
110
90
|
}
|
|
111
|
-
|
|
112
91
|
const currentTime = nowTime;
|
|
113
92
|
const timeDelta = currentTime - this._prevTime;
|
|
114
93
|
this._prevTime = currentTime;
|
|
115
|
-
|
|
116
94
|
if (currentTime - this._startedTime < this._delay) {
|
|
117
95
|
this._timer = null;
|
|
118
96
|
this.animate();
|
|
119
97
|
}
|
|
120
|
-
|
|
121
98
|
const newLastIdealStyle = {};
|
|
122
99
|
const newLastIdealVelocity = {};
|
|
123
100
|
const newCurrentStyle = {};
|
|
124
101
|
const newCurrentVelocity = {};
|
|
125
102
|
const toKeys = this._to && Object.keys(this._to) || [];
|
|
126
|
-
|
|
127
103
|
for (const key of toKeys) {
|
|
128
104
|
const styleValue = this._to[key];
|
|
129
105
|
this._accumulatedTime[key] = typeof this._accumulatedTime[key] !== 'number' ? timeDelta : this._accumulatedTime[key] + timeDelta;
|
|
130
106
|
const from = this._from[key] != null && typeof this._from[key] === 'object' ? this._from[key].val : this._from[key];
|
|
131
107
|
const to = styleValue.val;
|
|
132
|
-
|
|
133
108
|
if (typeof styleValue === 'number') {
|
|
134
109
|
newCurrentStyle[key] = styleValue;
|
|
135
110
|
newCurrentVelocity[key] = 0;
|
|
@@ -138,7 +113,6 @@ export default class Animation extends Event {
|
|
|
138
113
|
} else {
|
|
139
114
|
let newLastIdealStyleValue = this._lastIdealStyle[key];
|
|
140
115
|
let newLastIdealVelocityValue = this._lastIdealVelocity[key];
|
|
141
|
-
|
|
142
116
|
if (shouldUseBezier(this._config) || shouldUseBezier(styleValue)) {
|
|
143
117
|
// easing
|
|
144
118
|
const {
|
|
@@ -146,12 +120,10 @@ export default class Animation extends Event {
|
|
|
146
120
|
duration
|
|
147
121
|
} = styleValue;
|
|
148
122
|
newLastIdealStyleValue = from + easing((currentTime - this._startedTime) / duration) * (to - from);
|
|
149
|
-
|
|
150
123
|
if (currentTime >= this._startedTime + duration) {
|
|
151
124
|
newLastIdealStyleValue = to;
|
|
152
125
|
styleValue.done = true;
|
|
153
126
|
}
|
|
154
|
-
|
|
155
127
|
newLastIdealStyle[key] = newLastIdealStyleValue;
|
|
156
128
|
newCurrentStyle[key] = newLastIdealStyleValue;
|
|
157
129
|
} else if (to != null && to === this._currentStyle[key]) {
|
|
@@ -163,11 +135,9 @@ export default class Animation extends Event {
|
|
|
163
135
|
// spring
|
|
164
136
|
const currentFrameCompletion = (this._accumulatedTime[key] - Math.floor(this._accumulatedTime[key] / msPerFrame) * msPerFrame) / msPerFrame;
|
|
165
137
|
const framesToCatchUp = Math.floor(this._accumulatedTime[key] / msPerFrame);
|
|
166
|
-
|
|
167
138
|
for (let i = 0; i < framesToCatchUp; i++) {
|
|
168
139
|
[newLastIdealStyleValue, newLastIdealVelocityValue] = stepper(msPerFrame / 1000, newLastIdealStyleValue, newLastIdealVelocityValue, styleValue.val, styleValue.tension, styleValue.friction, styleValue.precision);
|
|
169
140
|
}
|
|
170
|
-
|
|
171
141
|
const [nextIdealX, nextIdealV] = stepper(msPerFrame / 1000, newLastIdealStyleValue, newLastIdealVelocityValue, styleValue.val, styleValue.tension, styleValue.friction, styleValue.precision);
|
|
172
142
|
newCurrentStyle[key] = newLastIdealStyleValue + (nextIdealX - newLastIdealStyleValue) * currentFrameCompletion;
|
|
173
143
|
newCurrentVelocity[key] = newLastIdealVelocityValue + (nextIdealV - newLastIdealVelocityValue) * currentFrameCompletion;
|
|
@@ -177,26 +147,23 @@ export default class Animation extends Event {
|
|
|
177
147
|
}
|
|
178
148
|
}
|
|
179
149
|
}
|
|
180
|
-
|
|
181
150
|
this._timer = null;
|
|
182
151
|
this._currentStyle = Object.assign({}, newCurrentStyle);
|
|
183
152
|
this._currentVelocity = Object.assign({}, newCurrentVelocity);
|
|
184
153
|
this._lastIdealStyle = Object.assign({}, newLastIdealStyle);
|
|
185
|
-
this._lastIdealVelocity = Object.assign({}, newLastIdealVelocity);
|
|
186
|
-
|
|
154
|
+
this._lastIdealVelocity = Object.assign({}, newLastIdealVelocity);
|
|
155
|
+
// console.log(newCurrentStyle);
|
|
187
156
|
if (!this._destroyed) {
|
|
188
157
|
this.emit('frame', this.getCurrentStates());
|
|
189
158
|
this.animate();
|
|
190
159
|
}
|
|
191
160
|
});
|
|
192
161
|
}
|
|
193
|
-
|
|
194
162
|
start() {
|
|
195
163
|
this._prevTime = now();
|
|
196
164
|
this._startedTime = now();
|
|
197
165
|
this.animate();
|
|
198
166
|
}
|
|
199
|
-
|
|
200
167
|
end() {
|
|
201
168
|
if (!this._ended) {
|
|
202
169
|
this._ended = true;
|
|
@@ -204,10 +171,8 @@ export default class Animation extends Event {
|
|
|
204
171
|
this.emit('frame', this.getFinalStates());
|
|
205
172
|
this.emit('rest', this.getFinalStates());
|
|
206
173
|
}
|
|
207
|
-
|
|
208
174
|
this.destroy();
|
|
209
175
|
}
|
|
210
|
-
|
|
211
176
|
pause() {
|
|
212
177
|
if (!this._paused) {
|
|
213
178
|
this._pausedTime = now();
|
|
@@ -217,13 +182,12 @@ export default class Animation extends Event {
|
|
|
217
182
|
this._destroyed = false;
|
|
218
183
|
}
|
|
219
184
|
}
|
|
220
|
-
|
|
221
185
|
resume() {
|
|
222
186
|
if (this._started && this._paused) {
|
|
223
187
|
const nowTime = now();
|
|
224
188
|
const pausedDuration = nowTime - this._pausedTime;
|
|
225
|
-
this._paused = false;
|
|
226
|
-
|
|
189
|
+
this._paused = false;
|
|
190
|
+
// should add with pausedDuration
|
|
227
191
|
this._startedTime += pausedDuration;
|
|
228
192
|
this._prevTime += pausedDuration;
|
|
229
193
|
this._pausedTime = 0;
|
|
@@ -231,25 +195,21 @@ export default class Animation extends Event {
|
|
|
231
195
|
this.animate();
|
|
232
196
|
}
|
|
233
197
|
}
|
|
234
|
-
|
|
235
198
|
stop() {
|
|
236
199
|
this.destroy();
|
|
237
|
-
|
|
238
200
|
if (!this._stopped) {
|
|
239
|
-
this._stopped = true;
|
|
240
|
-
|
|
201
|
+
this._stopped = true;
|
|
202
|
+
// this.emit('frame', this.getInitialStates());
|
|
241
203
|
this.emit('stop', this.getInitialStates());
|
|
242
204
|
this.initStates();
|
|
243
205
|
}
|
|
244
206
|
}
|
|
245
|
-
|
|
246
207
|
destroy() {
|
|
247
208
|
cancelAnimationFrame(this._timer);
|
|
248
209
|
clearTimeout(this._timer);
|
|
249
210
|
this._timer = null;
|
|
250
211
|
this._destroyed = true;
|
|
251
212
|
}
|
|
252
|
-
|
|
253
213
|
resetPlayStates() {
|
|
254
214
|
this._started = false;
|
|
255
215
|
this._stopped = false;
|
|
@@ -262,12 +222,10 @@ export default class Animation extends Event {
|
|
|
262
222
|
this._startedTime = 0;
|
|
263
223
|
this._pausedTime = 0;
|
|
264
224
|
}
|
|
265
|
-
|
|
266
225
|
reset() {
|
|
267
226
|
this.destroy();
|
|
268
227
|
this.initStates();
|
|
269
228
|
}
|
|
270
|
-
|
|
271
229
|
reverse() {
|
|
272
230
|
this.destroy();
|
|
273
231
|
const props = Object.assign({}, this._props);
|
|
@@ -277,17 +235,13 @@ export default class Animation extends Event {
|
|
|
277
235
|
this._props = Object.assign({}, props);
|
|
278
236
|
this.initStates();
|
|
279
237
|
}
|
|
280
|
-
|
|
281
238
|
getCurrentStates() {
|
|
282
239
|
return Object.assign({}, this._currentStyle);
|
|
283
240
|
}
|
|
284
|
-
|
|
285
241
|
getInitialStates() {
|
|
286
242
|
return Object.assign({}, stripStyle(this._props.from));
|
|
287
243
|
}
|
|
288
|
-
|
|
289
244
|
getFinalStates() {
|
|
290
245
|
return Object.assign({}, stripStyle(this._props.to));
|
|
291
246
|
}
|
|
292
|
-
|
|
293
247
|
}
|
package/lib/es/src/getEasing.js
CHANGED
|
@@ -1,96 +1,39 @@
|
|
|
1
1
|
import bezier from 'bezier-easing';
|
|
2
|
-
|
|
3
2
|
function minMax(val, min, max) {
|
|
4
3
|
return Math.min(Math.max(val, min), max);
|
|
5
4
|
}
|
|
6
|
-
|
|
7
5
|
function parseEasingParameters(string) {
|
|
8
6
|
const match = /\(([^)]+)\)/.exec(string);
|
|
9
7
|
return match ? match[1].split(',').map(p => parseFloat(p)) : [];
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
|
|
8
|
+
}
|
|
9
|
+
// Elastic easing adapted from jQueryUI http://api.jqueryui.com/easings/
|
|
13
10
|
function elastic() {
|
|
14
11
|
let amplitude = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
|
|
15
12
|
let period = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.5;
|
|
16
13
|
const a = minMax(amplitude, 1, 10);
|
|
17
14
|
const p = minMax(period, 0.1, 2);
|
|
18
15
|
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);
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
|
|
16
|
+
}
|
|
17
|
+
// anime.js/src/index.js
|
|
22
18
|
export const easingMap = (() => {
|
|
23
|
-
const names = ['Quad', 'Cubic', 'Quart', 'Quint', 'Sine', 'Expo', 'Circ', 'Back', 'Elastic'];
|
|
24
|
-
|
|
19
|
+
const names = ['Quad', 'Cubic', 'Quart', 'Quint', 'Sine', 'Expo', 'Circ', 'Back', 'Elastic'];
|
|
20
|
+
// Approximated Penner equations http://matthewlein.com/ceaser/
|
|
25
21
|
const curves = {
|
|
26
|
-
In: [[0.55, 0.085, 0.68, 0.53]
|
|
27
|
-
|
|
28
|
-
, [0.
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
/* inQuart */
|
|
32
|
-
, [0.755, 0.05, 0.855, 0.06]
|
|
33
|
-
/* inQuint */
|
|
34
|
-
, [0.47, 0.0, 0.745, 0.715]
|
|
35
|
-
/* inSine */
|
|
36
|
-
, [0.95, 0.05, 0.795, 0.035]
|
|
37
|
-
/* inExpo */
|
|
38
|
-
, [0.6, 0.04, 0.98, 0.335]
|
|
39
|
-
/* inCirc */
|
|
40
|
-
, [0.6, -0.28, 0.735, 0.045]
|
|
41
|
-
/* inBack */
|
|
42
|
-
, elastic
|
|
43
|
-
/* inElastic */
|
|
44
|
-
],
|
|
45
|
-
Out: [[0.25, 0.46, 0.45, 0.94]
|
|
46
|
-
/* outQuad */
|
|
47
|
-
, [0.215, 0.61, 0.355, 1.0]
|
|
48
|
-
/* outCubic */
|
|
49
|
-
, [0.165, 0.84, 0.44, 1.0]
|
|
50
|
-
/* outQuart */
|
|
51
|
-
, [0.23, 1.0, 0.32, 1.0]
|
|
52
|
-
/* outQuint */
|
|
53
|
-
, [0.39, 0.575, 0.565, 1.0]
|
|
54
|
-
/* outSine */
|
|
55
|
-
, [0.19, 1.0, 0.22, 1.0]
|
|
56
|
-
/* outExpo */
|
|
57
|
-
, [0.075, 0.82, 0.165, 1.0]
|
|
58
|
-
/* outCirc */
|
|
59
|
-
, [0.175, 0.885, 0.32, 1.275]
|
|
60
|
-
/* outBack */
|
|
61
|
-
, (a, p) => t => 1 - elastic(a, p)(1 - t)
|
|
62
|
-
/* outElastic */
|
|
63
|
-
],
|
|
64
|
-
InOut: [[0.455, 0.03, 0.515, 0.955]
|
|
65
|
-
/* inOutQuad */
|
|
66
|
-
, [0.645, 0.045, 0.355, 1.0]
|
|
67
|
-
/* inOutCubic */
|
|
68
|
-
, [0.77, 0.0, 0.175, 1.0]
|
|
69
|
-
/* inOutQuart */
|
|
70
|
-
, [0.86, 0.0, 0.07, 1.0]
|
|
71
|
-
/* inOutQuint */
|
|
72
|
-
, [0.445, 0.05, 0.55, 0.95]
|
|
73
|
-
/* inOutSine */
|
|
74
|
-
, [1.0, 0.0, 0.0, 1.0]
|
|
75
|
-
/* inOutExpo */
|
|
76
|
-
, [0.785, 0.135, 0.15, 0.86]
|
|
77
|
-
/* inOutCirc */
|
|
78
|
-
, [0.68, -0.55, 0.265, 1.55]
|
|
79
|
-
/* inOutBack */
|
|
80
|
-
, (a, p) => t => t < 0.5 ? elastic(a, p)(t * 2) / 2 : 1 - elastic(a, p)(t * -2 + 2) / 2
|
|
81
|
-
/* inOutElastic */
|
|
82
|
-
]
|
|
22
|
+
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 */],
|
|
23
|
+
|
|
24
|
+
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 */],
|
|
25
|
+
|
|
26
|
+
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 */]
|
|
83
27
|
};
|
|
28
|
+
|
|
84
29
|
const eases = {
|
|
85
30
|
linear: [0.25, 0.25, 0.75, 0.75]
|
|
86
31
|
};
|
|
87
|
-
|
|
88
32
|
for (const coords of Object.keys(curves)) {
|
|
89
33
|
curves[coords].forEach((ease, i) => {
|
|
90
34
|
eases['ease' + coords + names[i]] = ease;
|
|
91
35
|
});
|
|
92
36
|
}
|
|
93
|
-
|
|
94
37
|
return eases;
|
|
95
38
|
})();
|
|
96
39
|
/**
|
|
@@ -98,32 +41,25 @@ export const easingMap = (() => {
|
|
|
98
41
|
* @param {string|Function} easing
|
|
99
42
|
* @returns {Function}
|
|
100
43
|
*/
|
|
101
|
-
|
|
102
44
|
export default function getEasing(easing) {
|
|
103
45
|
if (typeof easing === 'function') {
|
|
104
46
|
return easing;
|
|
105
47
|
}
|
|
106
|
-
|
|
107
48
|
if (!easing || typeof easing !== 'string') {
|
|
108
49
|
easing = 'linear';
|
|
109
50
|
} else {
|
|
110
51
|
easing = easing.trim();
|
|
111
52
|
}
|
|
112
|
-
|
|
113
53
|
let name = easing.split('(')[0];
|
|
114
54
|
const args = parseEasingParameters(easing);
|
|
115
55
|
let ease;
|
|
116
|
-
|
|
117
56
|
if (name === 'cubic-bezier' || name === 'cubicBezier') {
|
|
118
57
|
return bezier(...(args.length ? args : easingMap.linear));
|
|
119
58
|
} else {
|
|
120
|
-
// eslint-disable-next-line eqeqeq
|
|
121
59
|
if (!name || typeof name !== 'string' || typeof name === 'string' && easingMap[name] == null) {
|
|
122
60
|
name = 'linear';
|
|
123
61
|
}
|
|
124
|
-
|
|
125
62
|
ease = easingMap[name];
|
|
126
|
-
|
|
127
63
|
if (typeof ease === 'function') {
|
|
128
64
|
return ease(...args);
|
|
129
65
|
} 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;
|
|
@@ -7,27 +7,21 @@
|
|
|
7
7
|
* @param {Function} [formatter]
|
|
8
8
|
* @returns {any}
|
|
9
9
|
*/
|
|
10
|
-
// eslint-disable-next-line max-len
|
|
11
10
|
export default function interpolate(from, to) {
|
|
12
11
|
let ratio = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
|
|
13
12
|
let parser = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
|
|
14
13
|
let formatter = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
|
|
15
|
-
|
|
16
14
|
if (typeof parser === 'function') {
|
|
17
15
|
from = parser(from);
|
|
18
16
|
to = parser(to);
|
|
19
17
|
}
|
|
20
|
-
|
|
21
18
|
if (typeof from === 'string' || typeof from === 'number') {
|
|
22
19
|
from = [parseFloat(from)];
|
|
23
20
|
}
|
|
24
|
-
|
|
25
21
|
if (typeof to === 'string' || typeof to === 'number') {
|
|
26
22
|
to = [parseFloat(to)];
|
|
27
23
|
}
|
|
28
|
-
|
|
29
24
|
const result = [];
|
|
30
|
-
|
|
31
25
|
if (Array.isArray(from) && Array.isArray(to)) {
|
|
32
26
|
from.forEach((fromVal, idx) => {
|
|
33
27
|
fromVal = parseFloat(fromVal);
|
|
@@ -35,7 +29,6 @@ export default function interpolate(from, to) {
|
|
|
35
29
|
result.push((toVal - fromVal) * ratio + fromVal);
|
|
36
30
|
});
|
|
37
31
|
}
|
|
38
|
-
|
|
39
32
|
if (typeof formatter === 'function') {
|
|
40
33
|
return formatter(result);
|
|
41
34
|
} else {
|