@x1a0ma17x/zeppos-fx 2.0.4 → 2.1.1
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/dist/fx.d.ts +163 -0
- package/dist/fx.d.ts.map +1 -0
- package/dist/fx.js +543 -0
- package/dist/fx.js.map +1 -0
- package/dist/fx.test.d.ts +2 -0
- package/dist/fx.test.d.ts.map +1 -0
- package/dist/fx.test.js +427 -0
- package/dist/fx.test.js.map +1 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +8 -0
- package/dist/index.js.map +1 -0
- package/dist/types/index.d.ts +10 -0
- package/dist/types/index.d.ts.map +1 -0
- package/dist/types/index.js +3 -0
- package/dist/types/index.js.map +1 -0
- package/example/package.json +1 -1
- package/example/pnpm-lock.yaml +5 -5
- package/jest.config.js +22 -0
- package/package.json +17 -4
- package/src/fx.test.ts +521 -0
- package/src/fx.ts +701 -0
- package/src/index.ts +2 -0
- package/src/types/index.ts +11 -0
- package/tsconfig.json +34 -0
- package/CHANGELOG.md +0 -33
package/dist/fx.d.ts
ADDED
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* fx.ts
|
|
3
|
+
* @description 一个用于在ZeppOS中提供简单动画的库
|
|
4
|
+
* @author XiaomaiTX
|
|
5
|
+
* @license MIT
|
|
6
|
+
* @repository https://github.com/XiaomaiTX/zeppos-fx
|
|
7
|
+
*/
|
|
8
|
+
/**
|
|
9
|
+
* 动画选项接口
|
|
10
|
+
*/
|
|
11
|
+
export interface FxOptions {
|
|
12
|
+
delay?: number;
|
|
13
|
+
begin?: number;
|
|
14
|
+
end?: number;
|
|
15
|
+
x_start?: number;
|
|
16
|
+
x_end?: number;
|
|
17
|
+
time?: number;
|
|
18
|
+
fx?: (x: number) => number;
|
|
19
|
+
func: (value: number) => void;
|
|
20
|
+
fps?: number;
|
|
21
|
+
enabled?: boolean;
|
|
22
|
+
style?: number;
|
|
23
|
+
onStop?: () => void;
|
|
24
|
+
}
|
|
25
|
+
/**
|
|
26
|
+
*边框 接口
|
|
27
|
+
*/
|
|
28
|
+
export interface Border {
|
|
29
|
+
x?: number;
|
|
30
|
+
y?: number;
|
|
31
|
+
w?: number;
|
|
32
|
+
h?: number;
|
|
33
|
+
radius?: number;
|
|
34
|
+
}
|
|
35
|
+
/**
|
|
36
|
+
* 动画类 (Fx)
|
|
37
|
+
*
|
|
38
|
+
* 一个用于在 ZeppOS 中创建平滑动画的类,支持多种缓动函数和动画样式。
|
|
39
|
+
* 提供开始、停止、暂停、恢复等控制方法,以及颜色混合、边框计算等静态工具函数。
|
|
40
|
+
*
|
|
41
|
+
* @example
|
|
42
|
+
* // 创建动画实例
|
|
43
|
+
* const fx = new Fx({
|
|
44
|
+
* begin: 0,
|
|
45
|
+
* end: 100,
|
|
46
|
+
* time: 1000,
|
|
47
|
+
* func: (value) => console.log(value),
|
|
48
|
+
* style: Fx.Styles.LINEAR
|
|
49
|
+
* });
|
|
50
|
+
* fx.start();
|
|
51
|
+
*
|
|
52
|
+
* @see {@link FxOptions} 配置选项
|
|
53
|
+
* @see {@link Fx.Styles} 动画样式枚举
|
|
54
|
+
* @see {@link Fx.Easing} 缓动函数集合
|
|
55
|
+
*/
|
|
56
|
+
export declare class Fx {
|
|
57
|
+
begin: number;
|
|
58
|
+
end: number;
|
|
59
|
+
fps: number;
|
|
60
|
+
time: number;
|
|
61
|
+
per_clock: number;
|
|
62
|
+
delay: number;
|
|
63
|
+
func: (value: number) => void;
|
|
64
|
+
onStop?: () => void;
|
|
65
|
+
enabled: boolean;
|
|
66
|
+
timer: ZeppTimer | null;
|
|
67
|
+
x_start: number;
|
|
68
|
+
x_end: number;
|
|
69
|
+
fx: (x: number) => number;
|
|
70
|
+
speed: number;
|
|
71
|
+
x_now: number;
|
|
72
|
+
static Styles: {
|
|
73
|
+
[key: string]: number;
|
|
74
|
+
};
|
|
75
|
+
static Easing: {
|
|
76
|
+
[key: string]: (now_x: number, begin: number, end: number, max_x: number) => number;
|
|
77
|
+
};
|
|
78
|
+
/**
|
|
79
|
+
* 创建动画实例
|
|
80
|
+
* @param {FxOptions} options 配置选项
|
|
81
|
+
*/
|
|
82
|
+
constructor({ delay, begin, end, x_start, x_end, time, fx, func, fps, enabled, style, onStop, }: FxOptions);
|
|
83
|
+
/**
|
|
84
|
+
* 获取样式名称
|
|
85
|
+
* @param {number} styleValue 样式枚举值
|
|
86
|
+
* @returns {string} 样式名称
|
|
87
|
+
* @private
|
|
88
|
+
*/
|
|
89
|
+
_getStyleName(styleValue: number): string;
|
|
90
|
+
/**
|
|
91
|
+
* 开始动画
|
|
92
|
+
* 如果动画已经运行,会先停止再重新开始
|
|
93
|
+
*/
|
|
94
|
+
start(): void;
|
|
95
|
+
/**
|
|
96
|
+
* 停止动画
|
|
97
|
+
* 重置动画进度到起始点,并停止计时器
|
|
98
|
+
*/
|
|
99
|
+
stop(): void;
|
|
100
|
+
/**
|
|
101
|
+
* 暂停动画
|
|
102
|
+
* 停止计时器但保持当前进度
|
|
103
|
+
*/
|
|
104
|
+
pause(): void;
|
|
105
|
+
/**
|
|
106
|
+
* 重新开始动画
|
|
107
|
+
*/
|
|
108
|
+
restart(): void;
|
|
109
|
+
/**
|
|
110
|
+
* 设置动画是否启用
|
|
111
|
+
* @param {boolean} enabled 是否启用
|
|
112
|
+
*/
|
|
113
|
+
setEnable(enabled: boolean): void;
|
|
114
|
+
/**
|
|
115
|
+
* 注册定时器
|
|
116
|
+
* @private
|
|
117
|
+
*/
|
|
118
|
+
registerTimer(): void;
|
|
119
|
+
/**
|
|
120
|
+
* 获取两个颜色的混合色
|
|
121
|
+
* @param {number} color1 初始颜色1 (6位十六进制)
|
|
122
|
+
* @param {number} color2 初始颜色2 (6位十六进制)
|
|
123
|
+
* @param {number} percentage 混合百分比 [0,1],越小越接近color1
|
|
124
|
+
* @returns {number} 混合后的颜色
|
|
125
|
+
*/
|
|
126
|
+
static getMixColor(color1: number, color2: number, percentage: number): number;
|
|
127
|
+
static getRainbowColor(percentage: number): number;
|
|
128
|
+
/**
|
|
129
|
+
* 获取两个边框的混合值
|
|
130
|
+
* @param {Border} border1 边框1
|
|
131
|
+
* @param {Border} border2 边框2
|
|
132
|
+
* @param {number} percentage 混合百分比 [0,1]
|
|
133
|
+
* @returns {Border} 混合后的边框
|
|
134
|
+
*/
|
|
135
|
+
static getMixBorder(border1: Border, border2: Border, percentage: number): Border;
|
|
136
|
+
}
|
|
137
|
+
/**
|
|
138
|
+
* zeppos-timer.js
|
|
139
|
+
* @description An accurate timer for ZeppOS. 一个适用于ZeppOS的准确的计时器
|
|
140
|
+
* @version 1.0.0
|
|
141
|
+
* @date 2023/04/07
|
|
142
|
+
* @author XiaomaiTX
|
|
143
|
+
* @license MIT
|
|
144
|
+
* https://github.com/XiaomaiTX/zeppos-timer
|
|
145
|
+
*
|
|
146
|
+
* */
|
|
147
|
+
import { Time } from "@zos/sensor";
|
|
148
|
+
declare class ZeppTimer {
|
|
149
|
+
callback: () => void;
|
|
150
|
+
interval: number;
|
|
151
|
+
timerId: any;
|
|
152
|
+
startTime: number | null;
|
|
153
|
+
nextTick: number | null;
|
|
154
|
+
time: Time;
|
|
155
|
+
stopped: boolean;
|
|
156
|
+
constructor(callback: () => void, interval: number);
|
|
157
|
+
start(delay?: number): void;
|
|
158
|
+
stop(): void;
|
|
159
|
+
scheduleTick(): void;
|
|
160
|
+
tick(): void;
|
|
161
|
+
}
|
|
162
|
+
export {};
|
|
163
|
+
//# sourceMappingURL=fx.d.ts.map
|
package/dist/fx.d.ts.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fx.d.ts","sourceRoot":"","sources":["../src/fx.ts"],"names":[],"mappings":"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"}
|
package/dist/fx.js
ADDED
|
@@ -0,0 +1,543 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
/**
|
|
3
|
+
* fx.ts
|
|
4
|
+
* @description 一个用于在ZeppOS中提供简单动画的库
|
|
5
|
+
* @author XiaomaiTX
|
|
6
|
+
* @license MIT
|
|
7
|
+
* @repository https://github.com/XiaomaiTX/zeppos-fx
|
|
8
|
+
*/
|
|
9
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
+
exports.Fx = void 0;
|
|
11
|
+
/**
|
|
12
|
+
* 弹跳函数辅助计算
|
|
13
|
+
* @param {number} x 输入值 [0,1]
|
|
14
|
+
* @returns {number} 计算结果
|
|
15
|
+
* @private
|
|
16
|
+
*/
|
|
17
|
+
const bounceOut = function (x) {
|
|
18
|
+
const n1 = 7.5625;
|
|
19
|
+
const d1 = 2.75;
|
|
20
|
+
if (x < 1 / d1) {
|
|
21
|
+
return n1 * x * x;
|
|
22
|
+
}
|
|
23
|
+
else if (x < 2 / d1) {
|
|
24
|
+
return n1 * (x -= 1.5 / d1) * x + 0.75;
|
|
25
|
+
}
|
|
26
|
+
else if (x < 2.5 / d1) {
|
|
27
|
+
return n1 * (x -= 2.25 / d1) * x + 0.9375;
|
|
28
|
+
}
|
|
29
|
+
else {
|
|
30
|
+
return n1 * (x -= 2.625 / d1) * x + 0.984375;
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
/**
|
|
34
|
+
* 动画类 (Fx)
|
|
35
|
+
*
|
|
36
|
+
* 一个用于在 ZeppOS 中创建平滑动画的类,支持多种缓动函数和动画样式。
|
|
37
|
+
* 提供开始、停止、暂停、恢复等控制方法,以及颜色混合、边框计算等静态工具函数。
|
|
38
|
+
*
|
|
39
|
+
* @example
|
|
40
|
+
* // 创建动画实例
|
|
41
|
+
* const fx = new Fx({
|
|
42
|
+
* begin: 0,
|
|
43
|
+
* end: 100,
|
|
44
|
+
* time: 1000,
|
|
45
|
+
* func: (value) => console.log(value),
|
|
46
|
+
* style: Fx.Styles.LINEAR
|
|
47
|
+
* });
|
|
48
|
+
* fx.start();
|
|
49
|
+
*
|
|
50
|
+
* @see {@link FxOptions} 配置选项
|
|
51
|
+
* @see {@link Fx.Styles} 动画样式枚举
|
|
52
|
+
* @see {@link Fx.Easing} 缓动函数集合
|
|
53
|
+
*/
|
|
54
|
+
class Fx {
|
|
55
|
+
/**
|
|
56
|
+
* 创建动画实例
|
|
57
|
+
* @param {FxOptions} options 配置选项
|
|
58
|
+
*/
|
|
59
|
+
constructor({ delay = 0, begin = 0, end = 100, x_start, x_end, time = 1000, fx, func, fps = 60, enabled = false, style = 0, onStop, }) {
|
|
60
|
+
this.begin = begin;
|
|
61
|
+
this.end = end;
|
|
62
|
+
this.fps = fps;
|
|
63
|
+
this.time = time;
|
|
64
|
+
this.per_clock = 1000 / fps;
|
|
65
|
+
this.delay = delay;
|
|
66
|
+
this.func = func;
|
|
67
|
+
this.onStop = onStop;
|
|
68
|
+
this.enabled = enabled;
|
|
69
|
+
this.timer = null;
|
|
70
|
+
if (fx) {
|
|
71
|
+
// 使用自定义函数
|
|
72
|
+
this.x_start = x_start != null ? x_start * 1.0 : 0;
|
|
73
|
+
this.x_end = x_end != null ? x_end * 1.0 : 1;
|
|
74
|
+
this.fx = fx;
|
|
75
|
+
this.speed = (this.x_end - this.x_start) / (fps * time / 1000);
|
|
76
|
+
}
|
|
77
|
+
else {
|
|
78
|
+
// 使用预设样式
|
|
79
|
+
const styleName = this._getStyleName(style);
|
|
80
|
+
this.fx = (x) => Fx.Easing[styleName](x, begin, end, fps * time / 1000);
|
|
81
|
+
this.x_start = 0;
|
|
82
|
+
this.x_end = fps * time / 1000;
|
|
83
|
+
this.speed = 1;
|
|
84
|
+
}
|
|
85
|
+
this.x_now = this.x_start;
|
|
86
|
+
if (enabled) {
|
|
87
|
+
this.registerTimer();
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
/**
|
|
91
|
+
* 获取样式名称
|
|
92
|
+
* @param {number} styleValue 样式枚举值
|
|
93
|
+
* @returns {string} 样式名称
|
|
94
|
+
* @private
|
|
95
|
+
*/
|
|
96
|
+
_getStyleName(styleValue) {
|
|
97
|
+
for (const key in Fx.Styles) {
|
|
98
|
+
if (Fx.Styles[key] === styleValue) {
|
|
99
|
+
return key;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
return "LINEAR";
|
|
103
|
+
}
|
|
104
|
+
/**
|
|
105
|
+
* 开始动画
|
|
106
|
+
* 如果动画已经运行,会先停止再重新开始
|
|
107
|
+
*/
|
|
108
|
+
start() {
|
|
109
|
+
if (this.timer) {
|
|
110
|
+
this.timer.stop();
|
|
111
|
+
this.timer = null;
|
|
112
|
+
}
|
|
113
|
+
this.setEnable(true);
|
|
114
|
+
this.registerTimer();
|
|
115
|
+
}
|
|
116
|
+
/**
|
|
117
|
+
* 停止动画
|
|
118
|
+
* 重置动画进度到起始点,并停止计时器
|
|
119
|
+
*/
|
|
120
|
+
stop() {
|
|
121
|
+
this.x_now = this.x_start;
|
|
122
|
+
if (this.timer) {
|
|
123
|
+
this.timer.stop();
|
|
124
|
+
this.timer = null;
|
|
125
|
+
}
|
|
126
|
+
this.setEnable(false);
|
|
127
|
+
}
|
|
128
|
+
/**
|
|
129
|
+
* 暂停动画
|
|
130
|
+
* 停止计时器但保持当前进度
|
|
131
|
+
*/
|
|
132
|
+
pause() {
|
|
133
|
+
if (this.timer) {
|
|
134
|
+
this.timer.stop();
|
|
135
|
+
this.timer = null;
|
|
136
|
+
}
|
|
137
|
+
this.setEnable(false);
|
|
138
|
+
}
|
|
139
|
+
/**
|
|
140
|
+
* 重新开始动画
|
|
141
|
+
*/
|
|
142
|
+
restart() {
|
|
143
|
+
this.x_now = this.x_start;
|
|
144
|
+
if (this.timer) {
|
|
145
|
+
this.timer.stop();
|
|
146
|
+
this.timer = null;
|
|
147
|
+
}
|
|
148
|
+
this.setEnable(true);
|
|
149
|
+
this.registerTimer();
|
|
150
|
+
}
|
|
151
|
+
/**
|
|
152
|
+
* 设置动画是否启用
|
|
153
|
+
* @param {boolean} enabled 是否启用
|
|
154
|
+
*/
|
|
155
|
+
setEnable(enabled) {
|
|
156
|
+
if (this.enabled === enabled)
|
|
157
|
+
return;
|
|
158
|
+
this.enabled = enabled;
|
|
159
|
+
if (enabled) {
|
|
160
|
+
this.registerTimer();
|
|
161
|
+
}
|
|
162
|
+
else if (this.timer) {
|
|
163
|
+
this.timer.stop();
|
|
164
|
+
this.timer = null;
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
/**
|
|
168
|
+
* 注册定时器
|
|
169
|
+
* @private
|
|
170
|
+
*/
|
|
171
|
+
registerTimer() {
|
|
172
|
+
if (this.timer) {
|
|
173
|
+
this.timer.stop();
|
|
174
|
+
}
|
|
175
|
+
this.timer = new ZeppTimer(() => {
|
|
176
|
+
// 更新位置
|
|
177
|
+
this.x_now += this.speed;
|
|
178
|
+
// 检查是否完成
|
|
179
|
+
if (this.x_now >= this.x_end) {
|
|
180
|
+
this.x_now = this.x_end;
|
|
181
|
+
this.func(this.fx(this.x_end));
|
|
182
|
+
this.timer.stop();
|
|
183
|
+
this.timer = null;
|
|
184
|
+
this.enabled = false;
|
|
185
|
+
if (typeof this.onStop === "function") {
|
|
186
|
+
this.onStop();
|
|
187
|
+
}
|
|
188
|
+
return;
|
|
189
|
+
}
|
|
190
|
+
// 执行动画回调
|
|
191
|
+
this.func(this.fx(this.x_now));
|
|
192
|
+
}, this.per_clock);
|
|
193
|
+
this.timer.start(this.delay);
|
|
194
|
+
}
|
|
195
|
+
/**
|
|
196
|
+
* 获取两个颜色的混合色
|
|
197
|
+
* @param {number} color1 初始颜色1 (6位十六进制)
|
|
198
|
+
* @param {number} color2 初始颜色2 (6位十六进制)
|
|
199
|
+
* @param {number} percentage 混合百分比 [0,1],越小越接近color1
|
|
200
|
+
* @returns {number} 混合后的颜色
|
|
201
|
+
*/
|
|
202
|
+
static getMixColor(color1, color2, percentage) {
|
|
203
|
+
// 提取RGB分量
|
|
204
|
+
const r1 = (color1 >> 16) & 0xff;
|
|
205
|
+
const g1 = (color1 >> 8) & 0xff;
|
|
206
|
+
const b1 = color1 & 0xff;
|
|
207
|
+
const r2 = (color2 >> 16) & 0xff;
|
|
208
|
+
const g2 = (color2 >> 8) & 0xff;
|
|
209
|
+
const b2 = color2 & 0xff;
|
|
210
|
+
// 计算混合色
|
|
211
|
+
const r = Math.floor(r1 + (r2 - r1) * percentage);
|
|
212
|
+
const g = Math.floor(g1 + (g2 - g1) * percentage);
|
|
213
|
+
const b = Math.floor(b1 + (b2 - b1) * percentage);
|
|
214
|
+
return (r << 16) | (g << 8) | b;
|
|
215
|
+
}
|
|
216
|
+
static getRainbowColor(percentage) {
|
|
217
|
+
const colors = [
|
|
218
|
+
0xff0000, // 红色
|
|
219
|
+
0xffff00, // 黄色
|
|
220
|
+
0x00ff00, // 绿色
|
|
221
|
+
0x00ffff, // 青色
|
|
222
|
+
0x0000ff, // 蓝色
|
|
223
|
+
0xff00ff, // 紫色
|
|
224
|
+
0xff0000, // 回到红色,形成循环
|
|
225
|
+
];
|
|
226
|
+
// 根据value值计算当前颜色段
|
|
227
|
+
const segment = percentage * (colors.length - 1);
|
|
228
|
+
const colorIndex = Math.floor(segment);
|
|
229
|
+
const blendRatio = segment - colorIndex;
|
|
230
|
+
// 获取当前颜色段的两个颜色并进行混合
|
|
231
|
+
const currentColor = this.getMixColor(colors[colorIndex], colors[colorIndex + 1], blendRatio);
|
|
232
|
+
return currentColor;
|
|
233
|
+
}
|
|
234
|
+
/**
|
|
235
|
+
* 获取两个边框的混合值
|
|
236
|
+
* @param {Border} border1 边框1
|
|
237
|
+
* @param {Border} border2 边框2
|
|
238
|
+
* @param {number} percentage 混合百分比 [0,1]
|
|
239
|
+
* @returns {Border} 混合后的边框
|
|
240
|
+
*/
|
|
241
|
+
static getMixBorder(border1, border2, percentage) {
|
|
242
|
+
return {
|
|
243
|
+
x: border1.x + (border2.x - border1.x) * percentage,
|
|
244
|
+
y: border1.y + (border2.y - border1.y) * percentage,
|
|
245
|
+
w: border1.w + (border2.w - border1.w) * percentage,
|
|
246
|
+
h: border1.h + (border2.h - border1.h) * percentage,
|
|
247
|
+
radius: border1.radius + (border2.radius - border1.radius) * percentage,
|
|
248
|
+
};
|
|
249
|
+
}
|
|
250
|
+
}
|
|
251
|
+
exports.Fx = Fx;
|
|
252
|
+
/**
|
|
253
|
+
* 动画样式预设常量
|
|
254
|
+
* @enum {number}
|
|
255
|
+
*/
|
|
256
|
+
Fx.Styles = {
|
|
257
|
+
LINEAR: 0,
|
|
258
|
+
EASE_IN_SINE: 1,
|
|
259
|
+
EASE_OUT_SINE: 2,
|
|
260
|
+
EASE_IN_OUT_SINE: 3,
|
|
261
|
+
EASE_IN_QUAD: 4,
|
|
262
|
+
EASE_OUT_QUAD: 5,
|
|
263
|
+
EASE_IN_OUT_QUAD: 6,
|
|
264
|
+
EASE_IN_CUBIC: 7,
|
|
265
|
+
EASE_OUT_CUBIC: 8,
|
|
266
|
+
EASE_IN_OUT_CUBIC: 9,
|
|
267
|
+
EASE_IN_QUART: 10,
|
|
268
|
+
EASE_OUT_QUART: 11,
|
|
269
|
+
EASE_IN_OUT_QUART: 12,
|
|
270
|
+
EASE_IN_QUINT: 13,
|
|
271
|
+
EASE_OUT_QUINT: 14,
|
|
272
|
+
EASE_IN_OUT_QUINT: 15,
|
|
273
|
+
EASE_IN_EXPO: 16,
|
|
274
|
+
EASE_OUT_EXPO: 17,
|
|
275
|
+
EASE_IN_OUT_EXPO: 18,
|
|
276
|
+
EASE_IN_CIRC: 19,
|
|
277
|
+
EASE_OUT_CIRC: 20,
|
|
278
|
+
EASE_IN_OUT_CIRC: 21,
|
|
279
|
+
EASE_IN_BACK: 22,
|
|
280
|
+
EASE_OUT_BACK: 23,
|
|
281
|
+
EASE_IN_OUT_BACK: 24,
|
|
282
|
+
EASE_IN_ELASTIC: 25,
|
|
283
|
+
EASE_OUT_ELASTIC: 26,
|
|
284
|
+
EASE_IN_OUT_ELASTIC: 27,
|
|
285
|
+
EASE_IN_BOUNCE: 28,
|
|
286
|
+
EASE_OUT_BOUNCE: 29,
|
|
287
|
+
EASE_IN_OUT_BOUNCE: 31,
|
|
288
|
+
};
|
|
289
|
+
/**
|
|
290
|
+
* 缓动函数集合
|
|
291
|
+
* @see https://easings.net/
|
|
292
|
+
*/
|
|
293
|
+
Fx.Easing = {
|
|
294
|
+
LINEAR: function (now_x, begin, end, max_x) {
|
|
295
|
+
const x = now_x / max_x;
|
|
296
|
+
return begin + (end - begin) * x;
|
|
297
|
+
},
|
|
298
|
+
EASE_IN_SINE: function (now_x, begin, end, max_x) {
|
|
299
|
+
const x = now_x / max_x;
|
|
300
|
+
return begin + (end - begin) * (1 - Math.cos((x * Math.PI) / 2));
|
|
301
|
+
},
|
|
302
|
+
EASE_OUT_SINE: function (now_x, begin, end, max_x) {
|
|
303
|
+
const x = now_x / max_x;
|
|
304
|
+
return begin + (end - begin) * Math.sin((x * Math.PI) / 2);
|
|
305
|
+
},
|
|
306
|
+
EASE_IN_OUT_SINE: function (now_x, begin, end, max_x) {
|
|
307
|
+
const x = now_x / max_x;
|
|
308
|
+
return begin + (end - begin) * (-(Math.cos(Math.PI * x) - 1) / 2);
|
|
309
|
+
},
|
|
310
|
+
EASE_IN_QUAD: function (now_x, begin, end, max_x) {
|
|
311
|
+
const x = now_x / max_x;
|
|
312
|
+
return begin + (end - begin) * (x * x);
|
|
313
|
+
},
|
|
314
|
+
EASE_OUT_QUAD: function (now_x, begin, end, max_x) {
|
|
315
|
+
const x = now_x / max_x;
|
|
316
|
+
return begin + (end - begin) * (1 - (1 - x) * (1 - x));
|
|
317
|
+
},
|
|
318
|
+
EASE_IN_OUT_QUAD: function (now_x, begin, end, max_x) {
|
|
319
|
+
const x = now_x / max_x;
|
|
320
|
+
return (begin +
|
|
321
|
+
(end - begin) *
|
|
322
|
+
(x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2));
|
|
323
|
+
},
|
|
324
|
+
EASE_IN_CUBIC: function (now_x, begin, end, max_x) {
|
|
325
|
+
const x = now_x / max_x;
|
|
326
|
+
return begin + (end - begin) * (x * x * x);
|
|
327
|
+
},
|
|
328
|
+
EASE_OUT_CUBIC: function (now_x, begin, end, max_x) {
|
|
329
|
+
const x = now_x / max_x;
|
|
330
|
+
return begin + (end - begin) * (1 - Math.pow(1 - x, 3));
|
|
331
|
+
},
|
|
332
|
+
EASE_IN_OUT_CUBIC: function (now_x, begin, end, max_x) {
|
|
333
|
+
const x = now_x / max_x;
|
|
334
|
+
return (begin +
|
|
335
|
+
(end - begin) *
|
|
336
|
+
(x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2));
|
|
337
|
+
},
|
|
338
|
+
EASE_IN_QUART: function (now_x, begin, end, max_x) {
|
|
339
|
+
const x = now_x / max_x;
|
|
340
|
+
return begin + (end - begin) * (x * x * x * x);
|
|
341
|
+
},
|
|
342
|
+
EASE_OUT_QUART: function (now_x, begin, end, max_x) {
|
|
343
|
+
const x = now_x / max_x;
|
|
344
|
+
return begin + (end - begin) * (1 - Math.pow(1 - x, 4));
|
|
345
|
+
},
|
|
346
|
+
EASE_IN_OUT_QUART: function (now_x, begin, end, max_x) {
|
|
347
|
+
const x = now_x / max_x;
|
|
348
|
+
return (begin +
|
|
349
|
+
(end - begin) *
|
|
350
|
+
(x < 0.5 ? 8 * x * x * x * x : 1 - Math.pow(-2 * x + 2, 4) / 2));
|
|
351
|
+
},
|
|
352
|
+
EASE_IN_QUINT: function (now_x, begin, end, max_x) {
|
|
353
|
+
const x = now_x / max_x;
|
|
354
|
+
return begin + (end - begin) * (x * x * x * x * x);
|
|
355
|
+
},
|
|
356
|
+
EASE_OUT_QUINT: function (now_x, begin, end, max_x) {
|
|
357
|
+
const x = now_x / max_x;
|
|
358
|
+
return begin + (end - begin) * (1 - Math.pow(1 - x, 5));
|
|
359
|
+
},
|
|
360
|
+
EASE_IN_OUT_QUINT: function (now_x, begin, end, max_x) {
|
|
361
|
+
const x = now_x / max_x;
|
|
362
|
+
return (begin +
|
|
363
|
+
(end - begin) *
|
|
364
|
+
(x < 0.5
|
|
365
|
+
? 16 * x * x * x * x * x
|
|
366
|
+
: 1 - Math.pow(-2 * x + 2, 5) / 2));
|
|
367
|
+
},
|
|
368
|
+
EASE_IN_EXPO: function (now_x, begin, end, max_x) {
|
|
369
|
+
const x = now_x / max_x;
|
|
370
|
+
return begin + (end - begin) * (x === 0 ? 0 : Math.pow(2, 10 * x - 10));
|
|
371
|
+
},
|
|
372
|
+
EASE_OUT_EXPO: function (now_x, begin, end, max_x) {
|
|
373
|
+
const x = now_x / max_x;
|
|
374
|
+
return begin + (end - begin) * (x === 1 ? 1 : 1 - Math.pow(2, -10 * x));
|
|
375
|
+
},
|
|
376
|
+
EASE_IN_OUT_EXPO: function (now_x, begin, end, max_x) {
|
|
377
|
+
const x = now_x / max_x;
|
|
378
|
+
return (begin +
|
|
379
|
+
(end - begin) *
|
|
380
|
+
(x === 0
|
|
381
|
+
? 0
|
|
382
|
+
: x === 1
|
|
383
|
+
? 1
|
|
384
|
+
: x < 0.5
|
|
385
|
+
? Math.pow(2, 20 * x - 10) / 2
|
|
386
|
+
: (2 - Math.pow(2, -20 * x + 10)) / 2));
|
|
387
|
+
},
|
|
388
|
+
EASE_IN_CIRC: function (now_x, begin, end, max_x) {
|
|
389
|
+
const x = now_x / max_x;
|
|
390
|
+
return begin + (end - begin) * (1 - Math.sqrt(1 - Math.pow(x, 2)));
|
|
391
|
+
},
|
|
392
|
+
EASE_OUT_CIRC: function (now_x, begin, end, max_x) {
|
|
393
|
+
const x = now_x / max_x;
|
|
394
|
+
return begin + (end - begin) * Math.sqrt(1 - Math.pow(x - 1, 2));
|
|
395
|
+
},
|
|
396
|
+
EASE_IN_OUT_CIRC: function (now_x, begin, end, max_x) {
|
|
397
|
+
const x = now_x / max_x;
|
|
398
|
+
return (begin +
|
|
399
|
+
(end - begin) *
|
|
400
|
+
(x < 0.5
|
|
401
|
+
? (1 - Math.sqrt(1 - Math.pow(2 * x, 2))) / 2
|
|
402
|
+
: (Math.sqrt(1 - Math.pow(-2 * x + 2, 2)) + 1) / 2));
|
|
403
|
+
},
|
|
404
|
+
EASE_IN_BACK: function (now_x, begin, end, max_x) {
|
|
405
|
+
const x = now_x / max_x;
|
|
406
|
+
const c1 = 1.70158;
|
|
407
|
+
return begin + (end - begin) * (c1 * x * x * x - c1 * x * x);
|
|
408
|
+
},
|
|
409
|
+
EASE_OUT_BACK: function (now_x, begin, end, max_x) {
|
|
410
|
+
const x = now_x / max_x;
|
|
411
|
+
const c1 = 1.70158;
|
|
412
|
+
return (begin +
|
|
413
|
+
(end - begin) *
|
|
414
|
+
(1 + c1 * Math.pow(x - 1, 3) + c1 * Math.pow(x - 1, 2)));
|
|
415
|
+
},
|
|
416
|
+
EASE_IN_OUT_BACK: function (now_x, begin, end, max_x) {
|
|
417
|
+
const x = now_x / max_x;
|
|
418
|
+
const c1 = 1.70158;
|
|
419
|
+
const c2 = c1 * 1.525;
|
|
420
|
+
return (begin +
|
|
421
|
+
(end - begin) *
|
|
422
|
+
(x < 0.5
|
|
423
|
+
? (Math.pow(2 * x, 2) * ((c2 + 1) * 2 * x - c2)) / 2
|
|
424
|
+
: (Math.pow(2 * x - 2, 2) * ((c2 + 1) * (x * 2 - 2) + c2) +
|
|
425
|
+
2) /
|
|
426
|
+
2));
|
|
427
|
+
},
|
|
428
|
+
EASE_IN_ELASTIC: function (now_x, begin, end, max_x) {
|
|
429
|
+
const x = now_x / max_x;
|
|
430
|
+
const c4 = (2 * Math.PI) / 3;
|
|
431
|
+
return (begin +
|
|
432
|
+
(end - begin) *
|
|
433
|
+
(x === 0
|
|
434
|
+
? 0
|
|
435
|
+
: x === 1
|
|
436
|
+
? 1
|
|
437
|
+
: -Math.pow(2, 10 * x - 10) *
|
|
438
|
+
Math.sin((x * 10 - 10.75) * c4)));
|
|
439
|
+
},
|
|
440
|
+
EASE_OUT_ELASTIC: function (now_x, begin, end, max_x) {
|
|
441
|
+
const x = now_x / max_x;
|
|
442
|
+
const c4 = (2 * Math.PI) / 3;
|
|
443
|
+
return (begin +
|
|
444
|
+
(end - begin) *
|
|
445
|
+
(x === 0
|
|
446
|
+
? 0
|
|
447
|
+
: x === 1
|
|
448
|
+
? 1
|
|
449
|
+
: Math.pow(2, -10 * x) * Math.sin((x * 10 - 0.75) * c4) + 1));
|
|
450
|
+
},
|
|
451
|
+
EASE_IN_OUT_ELASTIC: function (now_x, begin, end, max_x) {
|
|
452
|
+
const x = now_x / max_x;
|
|
453
|
+
const c5 = (2 * Math.PI) / 4.5;
|
|
454
|
+
return (begin +
|
|
455
|
+
(end - begin) *
|
|
456
|
+
(x === 0
|
|
457
|
+
? 0
|
|
458
|
+
: x === 1
|
|
459
|
+
? 1
|
|
460
|
+
: x < 0.5
|
|
461
|
+
? -(Math.pow(2, 20 * x - 10) *
|
|
462
|
+
Math.sin((20 * x - 11.125) * c5)) / 2
|
|
463
|
+
: (Math.pow(2, -20 * x + 10) *
|
|
464
|
+
Math.sin((20 * x - 11.125) * c5)) /
|
|
465
|
+
2 +
|
|
466
|
+
1));
|
|
467
|
+
},
|
|
468
|
+
EASE_IN_BOUNCE: function (now_x, begin, end, max_x) {
|
|
469
|
+
const x = now_x / max_x;
|
|
470
|
+
return begin + (end - begin) * (1 - bounceOut(1 - x));
|
|
471
|
+
},
|
|
472
|
+
EASE_OUT_BOUNCE: function (now_x, begin, end, max_x) {
|
|
473
|
+
const x = now_x / max_x;
|
|
474
|
+
return begin + (end - begin) * bounceOut(x);
|
|
475
|
+
},
|
|
476
|
+
EASE_IN_OUT_BOUNCE: function (now_x, begin, end, max_x) {
|
|
477
|
+
const x = now_x / max_x;
|
|
478
|
+
return (begin +
|
|
479
|
+
(end - begin) *
|
|
480
|
+
(x < 0.5
|
|
481
|
+
? (1 - bounceOut(1 - 2 * x)) / 2
|
|
482
|
+
: (1 + bounceOut(2 * x - 1)) / 2));
|
|
483
|
+
},
|
|
484
|
+
};
|
|
485
|
+
/**
|
|
486
|
+
* zeppos-timer.js
|
|
487
|
+
* @description An accurate timer for ZeppOS. 一个适用于ZeppOS的准确的计时器
|
|
488
|
+
* @version 1.0.0
|
|
489
|
+
* @date 2023/04/07
|
|
490
|
+
* @author XiaomaiTX
|
|
491
|
+
* @license MIT
|
|
492
|
+
* https://github.com/XiaomaiTX/zeppos-timer
|
|
493
|
+
*
|
|
494
|
+
* */
|
|
495
|
+
// @ts-ignore
|
|
496
|
+
const sensor_1 = require("@zos/sensor");
|
|
497
|
+
class ZeppTimer {
|
|
498
|
+
constructor(callback, interval) {
|
|
499
|
+
this.callback = callback;
|
|
500
|
+
this.interval = interval;
|
|
501
|
+
this.timerId = null;
|
|
502
|
+
this.startTime = null;
|
|
503
|
+
this.nextTick = null;
|
|
504
|
+
this.time = new sensor_1.Time();
|
|
505
|
+
this.stopped = false;
|
|
506
|
+
}
|
|
507
|
+
start(delay = 0) {
|
|
508
|
+
this.startTime = this.time.getTime() + delay;
|
|
509
|
+
this.nextTick = this.startTime + this.interval;
|
|
510
|
+
this.scheduleTick();
|
|
511
|
+
}
|
|
512
|
+
stop() {
|
|
513
|
+
this.stopped = true;
|
|
514
|
+
this.timerId && clearTimeout(this.timerId);
|
|
515
|
+
}
|
|
516
|
+
scheduleTick() {
|
|
517
|
+
if (this.stopped)
|
|
518
|
+
return;
|
|
519
|
+
const currentTime = this.time.getTime();
|
|
520
|
+
const delay = Math.max(0, this.nextTick - currentTime);
|
|
521
|
+
this.timerId = setTimeout(() => {
|
|
522
|
+
this.tick();
|
|
523
|
+
}, delay);
|
|
524
|
+
}
|
|
525
|
+
tick() {
|
|
526
|
+
const currentTime = this.time.getTime();
|
|
527
|
+
// 计算误差,确保计时器的准确性
|
|
528
|
+
const error = currentTime - this.nextTick;
|
|
529
|
+
if (error > this.interval) {
|
|
530
|
+
// 如果误差大于一个间隔时间,则将 nextTick 更新为当前时间
|
|
531
|
+
this.nextTick = currentTime;
|
|
532
|
+
}
|
|
533
|
+
else {
|
|
534
|
+
// 否则将 nextTick 加上一个间隔时间
|
|
535
|
+
this.nextTick += this.interval;
|
|
536
|
+
}
|
|
537
|
+
// 调用回调函数
|
|
538
|
+
this.callback();
|
|
539
|
+
// 继续调度下一个
|
|
540
|
+
this.scheduleTick();
|
|
541
|
+
}
|
|
542
|
+
}
|
|
543
|
+
//# sourceMappingURL=fx.js.map
|