@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
|
@@ -11,31 +11,25 @@ import shouldUseBezier from './shouldUseBezier';
|
|
|
11
11
|
*
|
|
12
12
|
* @returns {boolean}
|
|
13
13
|
*/
|
|
14
|
-
// eslint-disable-next-line max-len
|
|
15
|
-
|
|
16
14
|
export default function shouldStopAnimation(currentStyle, style, currentVelocity, startTime, nowTime) {
|
|
17
15
|
for (const key of Object.keys(style)) {
|
|
18
16
|
const styleValue = style[key];
|
|
19
17
|
const value = typeof styleValue === 'number' ? styleValue : styleValue.val;
|
|
20
|
-
|
|
21
18
|
if (typeof styleValue === 'object' && styleValue.done) {
|
|
22
19
|
continue;
|
|
23
20
|
}
|
|
24
|
-
|
|
25
21
|
if (shouldUseBezier(styleValue) && startTime && nowTime && styleValue.duration) {
|
|
26
22
|
if (styleValue.duration + startTime <= nowTime || value !== currentStyle[key]) {
|
|
27
23
|
return false;
|
|
28
24
|
}
|
|
29
25
|
} else if (typeof currentVelocity[key] === 'number' && currentVelocity[key] !== 0) {
|
|
30
26
|
return false;
|
|
31
|
-
}
|
|
27
|
+
}
|
|
28
|
+
// stepper will have already taken care of rounding precision errors, so
|
|
32
29
|
// won't have such thing as 0.9999 !=== 1
|
|
33
|
-
|
|
34
|
-
|
|
35
30
|
if (currentStyle[key] !== value) {
|
|
36
31
|
return false;
|
|
37
32
|
}
|
|
38
33
|
}
|
|
39
|
-
|
|
40
34
|
return true;
|
|
41
35
|
}
|
package/lib/es/src/stepper.js
CHANGED
|
@@ -18,28 +18,24 @@ const reusedTuple = [0, 0];
|
|
|
18
18
|
* @param {number} b
|
|
19
19
|
* @param {number} precision
|
|
20
20
|
*/
|
|
21
|
-
// eslint-disable-next-line max-len
|
|
22
|
-
|
|
23
21
|
export default function stepper(secondPerFrame, x, v, destX, k, b, precision) {
|
|
24
22
|
// Spring stiffness, in kg / s^2
|
|
25
23
|
// for animations, destX is really spring length (spring at rest). initial
|
|
26
24
|
// position is considered as the stretched/compressed position of a spring
|
|
27
|
-
const Fspring = -k * (x - destX);
|
|
28
|
-
|
|
29
|
-
const Fdamper = -b * v;
|
|
25
|
+
const Fspring = -k * (x - destX);
|
|
26
|
+
// Damping, in kg / s
|
|
27
|
+
const Fdamper = -b * v;
|
|
28
|
+
// usually we put mass here, but for animation purposes, specifying mass is a
|
|
30
29
|
// bit redundant. you could simply adjust k and b accordingly
|
|
31
30
|
// let a = (Fspring + Fdamper) / mass;
|
|
32
|
-
|
|
33
31
|
const a = Fspring + Fdamper;
|
|
34
32
|
const newV = v + a * secondPerFrame;
|
|
35
33
|
const newX = x + newV * secondPerFrame;
|
|
36
|
-
|
|
37
34
|
if (Math.abs(newV) < precision && Math.abs(newX - destX) < precision) {
|
|
38
35
|
reusedTuple[0] = destX;
|
|
39
36
|
reusedTuple[1] = 0;
|
|
40
37
|
return reusedTuple;
|
|
41
38
|
}
|
|
42
|
-
|
|
43
39
|
reusedTuple[0] = newX;
|
|
44
40
|
reusedTuple[1] = newV;
|
|
45
41
|
return reusedTuple;
|
package/lib/es/src/stripStyle.js
CHANGED
|
@@ -1,14 +1,10 @@
|
|
|
1
|
-
/* eslint-disable no-restricted-syntax */
|
|
2
1
|
export default function stripStyle(style) {
|
|
3
2
|
const ret = {};
|
|
4
|
-
|
|
5
3
|
for (const key in style) {
|
|
6
4
|
if (!Object.prototype.hasOwnProperty.call(style, key)) {
|
|
7
5
|
continue;
|
|
8
6
|
}
|
|
9
|
-
|
|
10
7
|
ret[key] = typeof style[key] === 'number' ? style[key] : style[key].val;
|
|
11
8
|
}
|
|
12
|
-
|
|
13
9
|
return ret;
|
|
14
10
|
}
|
|
@@ -2,64 +2,47 @@ export default class Event {
|
|
|
2
2
|
constructor() {
|
|
3
3
|
this._eventMap = new Map();
|
|
4
4
|
}
|
|
5
|
-
|
|
6
5
|
on(event, callback) {
|
|
7
6
|
if (event && typeof callback === 'function') {
|
|
8
7
|
this._eventMap.has(event) || this._eventMap.set(event, []);
|
|
9
|
-
|
|
10
8
|
this._eventMap.get(event).push(callback);
|
|
11
9
|
}
|
|
12
|
-
|
|
13
10
|
return this;
|
|
14
11
|
}
|
|
15
|
-
|
|
16
12
|
once(event, callback) {
|
|
17
13
|
var _this = this;
|
|
18
|
-
|
|
19
14
|
if (event && typeof callback === 'function') {
|
|
20
15
|
const fn = function () {
|
|
21
16
|
callback(...arguments);
|
|
22
|
-
|
|
23
17
|
_this.off(event, fn);
|
|
24
18
|
};
|
|
25
|
-
|
|
26
19
|
this.on(event, fn);
|
|
27
20
|
}
|
|
28
21
|
}
|
|
29
|
-
|
|
30
22
|
off(event, callback) {
|
|
31
23
|
if (event) {
|
|
32
24
|
if (typeof callback === 'function') {
|
|
33
25
|
const callbacks = this._eventMap.get(event);
|
|
34
|
-
|
|
35
26
|
if (Array.isArray(callbacks) && callbacks.length) {
|
|
36
|
-
let index = -1;
|
|
37
|
-
|
|
27
|
+
let index = -1;
|
|
38
28
|
while ((index = callbacks.findIndex(cb => cb === callback)) > -1) {
|
|
39
29
|
callbacks.splice(index, 1);
|
|
40
30
|
}
|
|
41
|
-
}
|
|
42
|
-
|
|
31
|
+
}
|
|
43
32
|
} else if (callback == null) {
|
|
44
33
|
this._eventMap.delete(event);
|
|
45
34
|
}
|
|
46
35
|
}
|
|
47
|
-
|
|
48
36
|
return this;
|
|
49
37
|
}
|
|
50
|
-
|
|
51
38
|
emit(event) {
|
|
52
39
|
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
53
40
|
args[_key - 1] = arguments[_key];
|
|
54
41
|
}
|
|
55
|
-
|
|
56
42
|
if (!this._eventMap.has(event)) {
|
|
57
43
|
return false;
|
|
58
44
|
}
|
|
59
|
-
|
|
60
45
|
this._eventMap.get(event).forEach(callback => callback(...args));
|
|
61
|
-
|
|
62
46
|
return true;
|
|
63
47
|
}
|
|
64
|
-
|
|
65
48
|
}
|
|
@@ -10,7 +10,6 @@ export default function debounce(func) {
|
|
|
10
10
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
11
11
|
args[_key] = arguments[_key];
|
|
12
12
|
}
|
|
13
|
-
|
|
14
13
|
// eslint-disable-next-line @typescript-eslint/no-this-alias
|
|
15
14
|
const context = this;
|
|
16
15
|
clearTimeout(timeoutId);
|
package/lib/es/src/utils/log.js
CHANGED
package/lib/es/src/utils/noop.js
CHANGED
|
@@ -1,26 +1,20 @@
|
|
|
1
|
-
/* eslint-disable no-restricted-syntax */
|
|
2
1
|
export default function shallowEqual(a, b) {
|
|
3
2
|
if (typeof a !== typeof b) {
|
|
4
3
|
return false;
|
|
5
4
|
}
|
|
6
|
-
|
|
7
5
|
if (typeof a === 'string' || typeof a === 'number') {
|
|
8
6
|
return a === b;
|
|
9
7
|
}
|
|
10
|
-
|
|
11
8
|
let i;
|
|
12
|
-
|
|
13
9
|
for (i in a) {
|
|
14
10
|
if (!(i in b)) {
|
|
15
11
|
return false;
|
|
16
12
|
}
|
|
17
13
|
}
|
|
18
|
-
|
|
19
14
|
for (i in b) {
|
|
20
15
|
if (a[i] !== b[i]) {
|
|
21
16
|
return false;
|
|
22
17
|
}
|
|
23
18
|
}
|
|
24
|
-
|
|
25
19
|
return i === void 0 ? a === b : true;
|
|
26
20
|
}
|
package/lib/es/src/wrapValue.js
CHANGED
|
@@ -6,7 +6,6 @@ const defaultConfig = Object.assign(Object.assign({}, presets.default), {
|
|
|
6
6
|
});
|
|
7
7
|
export default function wrapValue(val) {
|
|
8
8
|
let config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
9
|
-
|
|
10
9
|
if (shouldUseBezier(config)) {
|
|
11
10
|
const easing = getEasing(config.easing);
|
|
12
11
|
const duration = typeof config.duration === 'number' && config.duration > 0 ? config.duration : 1000;
|
|
@@ -15,11 +14,9 @@ export default function wrapValue(val) {
|
|
|
15
14
|
duration
|
|
16
15
|
});
|
|
17
16
|
}
|
|
18
|
-
|
|
19
17
|
let wrapped = Object.assign(Object.assign(Object.assign({}, defaultConfig), config), {
|
|
20
18
|
done: false
|
|
21
19
|
});
|
|
22
|
-
|
|
23
20
|
if (val && typeof val === 'object' && 'val' in val) {
|
|
24
21
|
if (shouldUseBezier(val)) {
|
|
25
22
|
const easing = getEasing(val.easing);
|
|
@@ -29,13 +26,11 @@ export default function wrapValue(val) {
|
|
|
29
26
|
duration
|
|
30
27
|
});
|
|
31
28
|
}
|
|
32
|
-
|
|
33
29
|
wrapped = Object.assign(Object.assign({}, wrapped), val);
|
|
34
30
|
} else {
|
|
35
31
|
wrapped = Object.assign(Object.assign({}, wrapped), {
|
|
36
32
|
val
|
|
37
33
|
});
|
|
38
34
|
}
|
|
39
|
-
|
|
40
35
|
return wrapped;
|
|
41
36
|
}
|
package/package.json
CHANGED
|
@@ -1,46 +1,46 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
2
|
+
"name": "@douyinfe/semi-animation",
|
|
3
|
+
"version": "2.25.0-alpha.0",
|
|
4
|
+
"description": "animation base library for semi-ui",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"animation",
|
|
7
|
+
"semi"
|
|
8
|
+
],
|
|
9
|
+
"homepage": "",
|
|
10
|
+
"license": "MIT",
|
|
11
|
+
"main": "lib/cjs/index.js",
|
|
12
|
+
"module": "lib/es/index.js",
|
|
13
|
+
"typings": "lib/es/index.d.ts",
|
|
14
|
+
"directories": {
|
|
15
|
+
"lib": "lib",
|
|
16
|
+
"test": "__tests__"
|
|
17
|
+
},
|
|
18
|
+
"files": [
|
|
19
|
+
"lib",
|
|
20
|
+
"docs",
|
|
21
|
+
"README.md"
|
|
22
|
+
],
|
|
23
|
+
"repository": {
|
|
24
|
+
"type": "git",
|
|
25
|
+
"url": "https://github.com/DouyinFE/semi-design"
|
|
26
|
+
},
|
|
27
|
+
"scripts": {
|
|
28
|
+
"test": "echo \"Error: run tests from root\" && exit 1",
|
|
29
|
+
"build:lib": "node scripts/compileLib",
|
|
30
|
+
"prepublishOnly": "npm run build:lib"
|
|
31
|
+
},
|
|
32
|
+
"dependencies": {
|
|
33
|
+
"bezier-easing": "^2.1.0"
|
|
34
|
+
},
|
|
35
|
+
"devDependencies": {
|
|
36
|
+
"@babel/plugin-transform-runtime": "^7.15.8",
|
|
37
|
+
"@babel/preset-env": "^7.15.8",
|
|
38
|
+
"del": "^6.0.0",
|
|
39
|
+
"gulp": "^4.0.2",
|
|
40
|
+
"gulp-babel": "^8.0.0",
|
|
41
|
+
"gulp-typescript": "^6.0.0-alpha.1",
|
|
42
|
+
"merge2": "^1.4.1",
|
|
43
|
+
"react-storybook-addon-props-combinations": "^1.1.0"
|
|
44
|
+
},
|
|
45
|
+
"gitHead": "a2d9b9c6d2bf2464f8bccdbfa56e2e07429013cf"
|
|
46
46
|
}
|