@ray-js/components 1.7.56-beta.5 → 1.7.57
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/index.d.ts +0 -2
- package/lib/index.js +1 -2
- package/package.json +5 -5
- package/LICENSE.md +0 -9
- package/lib/Animated/animation.d.ts +0 -47
- package/lib/Animated/index.d.ts +0 -21
- package/lib/Animated/index.js +0 -359
- package/lib/Animated/native/ty-animated/index.d.ts +0 -5
- package/lib/Animated/native/ty-animated/index.js +0 -228
- package/lib/Animated/native/ty-animated/index.json +0 -4
- package/lib/Animated/native/ty-animated/index.tyml +0 -26
- package/lib/Animated/native/ty-animated/index.tyss +0 -3
- package/lib/Animated/types.d.ts +0 -312
- package/lib/Animated/types.js +0 -1
package/lib/index.d.ts
CHANGED
|
@@ -33,5 +33,3 @@ export { default as Iframe } from './Iframe';
|
|
|
33
33
|
export { default as Modal } from './Modal';
|
|
34
34
|
export { default as Video } from './Video';
|
|
35
35
|
export { default as SvgRender } from './SvgRender';
|
|
36
|
-
export { default as Animated } from './Animated';
|
|
37
|
-
export type { AnimatedViewRef, AnimatedTextRef, AnimatedProps } from './Animated';
|
package/lib/index.js
CHANGED
|
@@ -32,5 +32,4 @@ export { default as Progress } from './Progress';
|
|
|
32
32
|
export { default as Iframe } from './Iframe';
|
|
33
33
|
export { default as Modal } from './Modal';
|
|
34
34
|
export { default as Video } from './Video';
|
|
35
|
-
export { default as SvgRender } from './SvgRender';
|
|
36
|
-
export { default as Animated } from './Animated';
|
|
35
|
+
export { default as SvgRender } from './SvgRender';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ray-js/components",
|
|
3
|
-
"version": "1.7.
|
|
3
|
+
"version": "1.7.57",
|
|
4
4
|
"description": "Ray basic components",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ray"
|
|
@@ -29,8 +29,8 @@
|
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"@ray-core/macro": "^0.4.9",
|
|
31
31
|
"@ray-core/wechat": "^0.4.9",
|
|
32
|
-
"@ray-js/adapter": "1.7.
|
|
33
|
-
"@ray-js/framework-shared": "1.7.
|
|
32
|
+
"@ray-js/adapter": "1.7.57",
|
|
33
|
+
"@ray-js/framework-shared": "1.7.57",
|
|
34
34
|
"ahooks": "^3.8.5",
|
|
35
35
|
"clsx": "^1.2.1",
|
|
36
36
|
"core-js": "^3.43.0",
|
|
@@ -40,11 +40,11 @@
|
|
|
40
40
|
"style-to-object": "^0.3.0"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
|
-
"@ray-js/cli": "1.7.
|
|
43
|
+
"@ray-js/cli": "1.7.57"
|
|
44
44
|
},
|
|
45
45
|
"publishConfig": {
|
|
46
46
|
"access": "public",
|
|
47
47
|
"registry": "https://registry.npmjs.org"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "511cd3f8d57c2888411700526781e65959037c5b"
|
|
50
50
|
}
|
package/LICENSE.md
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
Copyright © 2014-2022 Tuya.inc
|
|
2
|
-
|
|
3
|
-
MIT License
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
|
6
|
-
|
|
7
|
-
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
8
|
-
|
|
9
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
interface IAnimation {
|
|
2
|
-
// transform
|
|
3
|
-
translate(x?: number, y?: number): this
|
|
4
|
-
translateX(x?: number): this
|
|
5
|
-
translateY(y?: number): this
|
|
6
|
-
translateZ(z?: number): this
|
|
7
|
-
|
|
8
|
-
rotate(angle: number): this
|
|
9
|
-
rotateX(angle: number): this
|
|
10
|
-
rotateY(angle: number): this
|
|
11
|
-
rotateZ(angle: number): this
|
|
12
|
-
rotate3d(x: number, y: number, z: number, angle: number): this
|
|
13
|
-
|
|
14
|
-
scale(x?: number, y?: number): this
|
|
15
|
-
scaleX(x?: number): this
|
|
16
|
-
scaleY(y?: number): this
|
|
17
|
-
scaleZ(z?: number): this
|
|
18
|
-
scale3d(x?: number, y?: number, z?: number): this
|
|
19
|
-
|
|
20
|
-
skew(x?: number, y?: number): this
|
|
21
|
-
skewX(x?: number): this
|
|
22
|
-
skewY(y?: number): this
|
|
23
|
-
|
|
24
|
-
matrix(...args: number[]): this
|
|
25
|
-
matrix3d(...args: number[]): this
|
|
26
|
-
|
|
27
|
-
// style
|
|
28
|
-
opacity(opacity: number): this
|
|
29
|
-
width(value: number | string): this
|
|
30
|
-
height(value: number | string): this
|
|
31
|
-
top(value: number | string): this
|
|
32
|
-
left(value: number | string): this
|
|
33
|
-
right(value: number | string): this
|
|
34
|
-
bottom(value: number | string): this
|
|
35
|
-
backgroundColor(value: string): this
|
|
36
|
-
|
|
37
|
-
// step / export
|
|
38
|
-
step(
|
|
39
|
-
options?: Partial<{
|
|
40
|
-
transformOrigin: string
|
|
41
|
-
duration: number
|
|
42
|
-
timingFunction: string
|
|
43
|
-
delay: number
|
|
44
|
-
}>
|
|
45
|
-
): this
|
|
46
|
-
export(): { actions: any[] }
|
|
47
|
-
}
|
package/lib/Animated/index.d.ts
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Animated - 纯净底层动画组件
|
|
3
|
-
*
|
|
4
|
-
* 只提供三个核心方法:
|
|
5
|
-
* - setProperty(property, value): 设置动画属性
|
|
6
|
-
* - setStyle(style): 设置样式
|
|
7
|
-
* - setText(text): 设置文本内容
|
|
8
|
-
*
|
|
9
|
-
* 可以配合任何动画库使用(GSAP、Anime.js、Framer Motion 等)
|
|
10
|
-
*/
|
|
11
|
-
import React from 'react';
|
|
12
|
-
import type { AnimatedViewRef, AnimatedTextRef, AnimatedProps } from './types';
|
|
13
|
-
/**
|
|
14
|
-
* 默认导出
|
|
15
|
-
*/
|
|
16
|
-
declare const Animated: {
|
|
17
|
-
View: React.ForwardRefExoticComponent<Omit<AnimatedProps, "mode"> & React.RefAttributes<AnimatedViewRef>>;
|
|
18
|
-
Text: React.ForwardRefExoticComponent<Omit<AnimatedProps, "mode"> & React.RefAttributes<AnimatedTextRef>>;
|
|
19
|
-
};
|
|
20
|
-
export default Animated;
|
|
21
|
-
export type { AnimatedViewRef, AnimatedTextRef, AnimatedProps } from './types';
|
package/lib/Animated/index.js
DELETED
|
@@ -1,359 +0,0 @@
|
|
|
1
|
-
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
-
import "core-js/modules/es.regexp.exec.js";
|
|
3
|
-
import "core-js/modules/es.string.replace.js";
|
|
4
|
-
import "core-js/modules/esnext.iterator.constructor.js";
|
|
5
|
-
import "core-js/modules/esnext.iterator.for-each.js";
|
|
6
|
-
import "core-js/modules/esnext.iterator.map.js";
|
|
7
|
-
import "core-js/modules/web.dom-collections.iterator.js";
|
|
8
|
-
/**
|
|
9
|
-
* Animated - 纯净底层动画组件
|
|
10
|
-
*
|
|
11
|
-
* 只提供三个核心方法:
|
|
12
|
-
* - setProperty(property, value): 设置动画属性
|
|
13
|
-
* - setStyle(style): 设置样式
|
|
14
|
-
* - setText(text): 设置文本内容
|
|
15
|
-
*
|
|
16
|
-
* 可以配合任何动画库使用(GSAP、Anime.js、Framer Motion 等)
|
|
17
|
-
*/
|
|
18
|
-
import React, { forwardRef, useImperativeHandle, useRef, useMemo, useCallback } from 'react';
|
|
19
|
-
import TyAnimatedComponent from './native/ty-animated';
|
|
20
|
-
|
|
21
|
-
// 小程序 API 声明
|
|
22
|
-
|
|
23
|
-
/**
|
|
24
|
-
* 样式对象转 CSS 字符串
|
|
25
|
-
*/
|
|
26
|
-
function styleToString(style) {
|
|
27
|
-
return Object.entries(style).map(_ref => {
|
|
28
|
-
let [key, value] = _ref;
|
|
29
|
-
const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
|
|
30
|
-
return "".concat(cssKey, ":").concat(value);
|
|
31
|
-
}).join(';');
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
/**
|
|
35
|
-
* 基础 Animated 组件
|
|
36
|
-
*/
|
|
37
|
-
const AnimatedBase = /*#__PURE__*/forwardRef((props, ref) => {
|
|
38
|
-
const {
|
|
39
|
-
children,
|
|
40
|
-
className,
|
|
41
|
-
style,
|
|
42
|
-
id,
|
|
43
|
-
mode = 'view',
|
|
44
|
-
onAnimationStart,
|
|
45
|
-
onAnimationEnd,
|
|
46
|
-
// 核心触摸事件(只保留最常用的三个)
|
|
47
|
-
onClick,
|
|
48
|
-
onTouchStart,
|
|
49
|
-
onTouchEnd
|
|
50
|
-
} = props;
|
|
51
|
-
const callbackRef = useRef(onAnimationEnd);
|
|
52
|
-
const componentIdRef = useRef(id || "animated-".concat(Math.random().toString(36).slice(2, 11)));
|
|
53
|
-
|
|
54
|
-
// 提取文本内容(当 mode='text' 时)
|
|
55
|
-
const textContent = useMemo(() => {
|
|
56
|
-
if (mode !== 'text' || !children) return undefined;
|
|
57
|
-
if (typeof children === 'string' || typeof children === 'number') {
|
|
58
|
-
return String(children);
|
|
59
|
-
}
|
|
60
|
-
return undefined;
|
|
61
|
-
}, [mode, children]);
|
|
62
|
-
useImperativeHandle(ref, () => {
|
|
63
|
-
/**
|
|
64
|
-
* 获取 DOM 实例
|
|
65
|
-
*/
|
|
66
|
-
const getDomInstance = () => {
|
|
67
|
-
try {
|
|
68
|
-
var _getCurrentPages;
|
|
69
|
-
const pages = (_getCurrentPages = getCurrentPages) === null || _getCurrentPages === void 0 ? void 0 : _getCurrentPages();
|
|
70
|
-
if (!pages || pages.length === 0) return null;
|
|
71
|
-
const currentPage = pages[pages.length - 1];
|
|
72
|
-
if (!(currentPage !== null && currentPage !== void 0 && currentPage.selectComponent)) return null;
|
|
73
|
-
return currentPage.selectComponent("#".concat(componentIdRef.current));
|
|
74
|
-
} catch (error) {
|
|
75
|
-
console.error('[Animated] 获取组件实例失败:', error);
|
|
76
|
-
return null;
|
|
77
|
-
}
|
|
78
|
-
};
|
|
79
|
-
return {
|
|
80
|
-
/**
|
|
81
|
-
* 设置样式(直通通道)
|
|
82
|
-
* 用途:设置静态样式,绕过 React/Ray 层,提升性能
|
|
83
|
-
* @example
|
|
84
|
-
* ref.current.setStyle({ color: 'red', fontSize: '16px', border: '1px solid #ccc' })
|
|
85
|
-
*/
|
|
86
|
-
setStyle(styleValue, callback) {
|
|
87
|
-
return new Promise(resolve => {
|
|
88
|
-
var _inst$setCustomStyle;
|
|
89
|
-
const inst = getDomInstance();
|
|
90
|
-
if (!inst) {
|
|
91
|
-
console.warn('No DOM instance found');
|
|
92
|
-
resolve();
|
|
93
|
-
if (callback) callback();
|
|
94
|
-
return;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
// 防止传入 undefined 或空值
|
|
98
|
-
if (styleValue === undefined || styleValue === null) {
|
|
99
|
-
console.warn('styleValue is undefined or null');
|
|
100
|
-
resolve();
|
|
101
|
-
if (callback) callback();
|
|
102
|
-
return;
|
|
103
|
-
}
|
|
104
|
-
const styleString = typeof styleValue === 'string' ? styleValue : styleToString(styleValue);
|
|
105
|
-
if (!styleString) {
|
|
106
|
-
console.warn('styleString is empty');
|
|
107
|
-
resolve();
|
|
108
|
-
if (callback) callback();
|
|
109
|
-
return;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
// setData 完成后的回调
|
|
113
|
-
(_inst$setCustomStyle = inst.setCustomStyle) === null || _inst$setCustomStyle === void 0 || _inst$setCustomStyle.call(inst, styleString, () => {
|
|
114
|
-
// 调用用户回调
|
|
115
|
-
if (callback && typeof callback === 'function') {
|
|
116
|
-
try {
|
|
117
|
-
callback();
|
|
118
|
-
} catch (error) {
|
|
119
|
-
console.error('[Animated] setStyle callback error:', error);
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
// resolve Promise
|
|
123
|
-
resolve();
|
|
124
|
-
});
|
|
125
|
-
});
|
|
126
|
-
},
|
|
127
|
-
/**
|
|
128
|
-
* 设置文本内容(仅 mode='text' 时可用)
|
|
129
|
-
* 不触发 React 重渲染
|
|
130
|
-
*/
|
|
131
|
-
setText(text) {
|
|
132
|
-
var _inst$__applyText;
|
|
133
|
-
// 运行时检查:只有 Text 组件才能调用 setText
|
|
134
|
-
if (mode !== 'text') {
|
|
135
|
-
console.error('[Animated] setText 只能在 Animated.Text 组件上使用');
|
|
136
|
-
return;
|
|
137
|
-
}
|
|
138
|
-
const inst = getDomInstance();
|
|
139
|
-
if (!inst) {
|
|
140
|
-
console.warn('[Animated] setText: 无法获取组件实例');
|
|
141
|
-
return;
|
|
142
|
-
}
|
|
143
|
-
(_inst$__applyText = inst.__applyText) === null || _inst$__applyText === void 0 || _inst$__applyText.call(inst, text);
|
|
144
|
-
},
|
|
145
|
-
/**
|
|
146
|
-
* 创建动画对象
|
|
147
|
-
* 使用小程序原生动画 API,这是性能最优的动画方式
|
|
148
|
-
*
|
|
149
|
-
* @param options - 动画配置(duration, timingFunction, delay, transformOrigin)
|
|
150
|
-
* @returns Animation 实例,包含 play() 方法
|
|
151
|
-
*
|
|
152
|
-
* @example
|
|
153
|
-
* // 创建并执行动画
|
|
154
|
-
* const animation = ref.current.animate()
|
|
155
|
-
* animation.translateX(100).scale(1.2).step({ duration: 300 })
|
|
156
|
-
* animation.translateY(50).step({ duration: 200 })
|
|
157
|
-
* await animation.play()
|
|
158
|
-
* console.log('动画完成!')
|
|
159
|
-
*
|
|
160
|
-
* // 链式调用
|
|
161
|
-
* const animation = ref.current
|
|
162
|
-
* .animate({ transformOrigin: '50% 50%' })
|
|
163
|
-
* .translateX(100)
|
|
164
|
-
* .scale(1.2)
|
|
165
|
-
* .step({ duration: 300 })
|
|
166
|
-
* await animation.play()
|
|
167
|
-
*
|
|
168
|
-
* // 复用动画
|
|
169
|
-
* const slideIn = ref.current.animate().translateX(100).step({ duration: 300 })
|
|
170
|
-
* await slideIn.play() // 第一次
|
|
171
|
-
* await slideIn.play() // 第二次
|
|
172
|
-
*/
|
|
173
|
-
animate(options) {
|
|
174
|
-
var _inst$_getCreateAnima;
|
|
175
|
-
const inst = getDomInstance();
|
|
176
|
-
if (!inst) {
|
|
177
|
-
console.warn('[Animated] No DOM instance found');
|
|
178
|
-
return null;
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
// 获取 createAnimation 函数
|
|
182
|
-
const createAnimation = (_inst$_getCreateAnima = inst._getCreateAnimation) === null || _inst$_getCreateAnima === void 0 ? void 0 : _inst$_getCreateAnima.call(inst);
|
|
183
|
-
if (!createAnimation) {
|
|
184
|
-
console.error('[Animated] createAnimation 不可用');
|
|
185
|
-
return null;
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
// 创建小程序原生 Animation 实例
|
|
189
|
-
const animation = createAnimation(options);
|
|
190
|
-
|
|
191
|
-
// 扩展 play 方法
|
|
192
|
-
animation.play = () => {
|
|
193
|
-
return new Promise(resolve => {
|
|
194
|
-
var _inst$__applyAnimData;
|
|
195
|
-
// 导出动画数据
|
|
196
|
-
const animationData = animation.export();
|
|
197
|
-
|
|
198
|
-
// 包装完成回调
|
|
199
|
-
|
|
200
|
-
callbackRef.current = event => {
|
|
201
|
-
resolve(event);
|
|
202
|
-
};
|
|
203
|
-
(_inst$__applyAnimData = inst.__applyAnimData) === null || _inst$__applyAnimData === void 0 || _inst$__applyAnimData.call(inst, animationData);
|
|
204
|
-
});
|
|
205
|
-
};
|
|
206
|
-
return animation;
|
|
207
|
-
},
|
|
208
|
-
/**
|
|
209
|
-
* 获取元素的布局位置和尺寸信息
|
|
210
|
-
* 基于小程序 SelectorQuery.boundingClientRect API
|
|
211
|
-
*/
|
|
212
|
-
getBoundingClientRect() {
|
|
213
|
-
return new Promise(resolve => {
|
|
214
|
-
try {
|
|
215
|
-
// 检查小程序 API 是否存在
|
|
216
|
-
if (typeof ty === 'undefined' || !ty.createSelectorQuery) {
|
|
217
|
-
console.error('[Animated] getBoundingClientRect: ty.createSelectorQuery 不存在');
|
|
218
|
-
resolve(null);
|
|
219
|
-
return;
|
|
220
|
-
}
|
|
221
|
-
const query = ty.createSelectorQuery();
|
|
222
|
-
query.select("#".concat(componentIdRef.current)).boundingClientRect(rect => {
|
|
223
|
-
resolve(rect || null);
|
|
224
|
-
}).exec();
|
|
225
|
-
} catch (error) {
|
|
226
|
-
console.error('[Animated] getBoundingClientRect 执行失败:', error);
|
|
227
|
-
resolve(null);
|
|
228
|
-
}
|
|
229
|
-
});
|
|
230
|
-
},
|
|
231
|
-
/**
|
|
232
|
-
* 获取元素的详细信息(包括样式、属性等)
|
|
233
|
-
* 基于小程序 SelectorQuery.fields API
|
|
234
|
-
*/
|
|
235
|
-
getFields(fields) {
|
|
236
|
-
return new Promise(resolve => {
|
|
237
|
-
try {
|
|
238
|
-
// 检查小程序 API 是否存在
|
|
239
|
-
if (typeof ty === 'undefined' || !ty.createSelectorQuery) {
|
|
240
|
-
console.error('[Animated] getFields: ty.createSelectorQuery 不存在');
|
|
241
|
-
resolve(null);
|
|
242
|
-
return;
|
|
243
|
-
}
|
|
244
|
-
const query = ty.createSelectorQuery();
|
|
245
|
-
query.select("#".concat(componentIdRef.current)).fields(fields, res => {
|
|
246
|
-
resolve(res || null);
|
|
247
|
-
}).exec();
|
|
248
|
-
} catch (error) {
|
|
249
|
-
console.error('[Animated] getFields 执行失败:', error);
|
|
250
|
-
resolve(null);
|
|
251
|
-
}
|
|
252
|
-
});
|
|
253
|
-
},
|
|
254
|
-
/**
|
|
255
|
-
* 获取元素的计算后样式
|
|
256
|
-
* 便捷方法,专门用于查询样式
|
|
257
|
-
*/
|
|
258
|
-
getComputedStyle(styleNames) {
|
|
259
|
-
return new Promise(resolve => {
|
|
260
|
-
try {
|
|
261
|
-
// 检查小程序 API 是否存在
|
|
262
|
-
if (typeof ty === 'undefined' || !ty.createSelectorQuery) {
|
|
263
|
-
console.error('[Animated] getComputedStyle: ty.createSelectorQuery 不存在');
|
|
264
|
-
resolve(null);
|
|
265
|
-
return;
|
|
266
|
-
}
|
|
267
|
-
const query = ty.createSelectorQuery();
|
|
268
|
-
query.select("#".concat(componentIdRef.current)).fields({
|
|
269
|
-
computedStyle: styleNames
|
|
270
|
-
}, res => {
|
|
271
|
-
if (!res) {
|
|
272
|
-
resolve(null);
|
|
273
|
-
return;
|
|
274
|
-
}
|
|
275
|
-
|
|
276
|
-
// 提取样式信息,过滤掉非样式字段
|
|
277
|
-
const styles = {};
|
|
278
|
-
styleNames.forEach(styleName => {
|
|
279
|
-
if (res[styleName] !== undefined) {
|
|
280
|
-
styles[styleName] = res[styleName];
|
|
281
|
-
}
|
|
282
|
-
});
|
|
283
|
-
resolve(Object.keys(styles).length > 0 ? styles : null);
|
|
284
|
-
}).exec();
|
|
285
|
-
} catch (error) {
|
|
286
|
-
console.error('[Animated] getComputedStyle 执行失败:', error);
|
|
287
|
-
resolve(null);
|
|
288
|
-
}
|
|
289
|
-
});
|
|
290
|
-
}
|
|
291
|
-
};
|
|
292
|
-
}, []);
|
|
293
|
-
|
|
294
|
-
// 处理 customStyle,避免传入 undefined
|
|
295
|
-
const customStyleValue = useMemo(() => {
|
|
296
|
-
if (!style) return undefined;
|
|
297
|
-
return typeof style === 'object' ? styleToString(style) : style;
|
|
298
|
-
}, []);
|
|
299
|
-
const handleAnimationEnd = useCallback(event => {
|
|
300
|
-
if (callbackRef.current && typeof callbackRef.current === 'function') {
|
|
301
|
-
const temp = callbackRef.current;
|
|
302
|
-
callbackRef.current = null;
|
|
303
|
-
temp(event);
|
|
304
|
-
}
|
|
305
|
-
if (onAnimationEnd) {
|
|
306
|
-
onAnimationEnd();
|
|
307
|
-
}
|
|
308
|
-
}, [onAnimationEnd, callbackRef.current]);
|
|
309
|
-
const eventBindings = {};
|
|
310
|
-
if (onClick) eventBindings['bind:click'] = onClick;
|
|
311
|
-
if (onTouchStart) eventBindings['bind:touchstart'] = onTouchStart;
|
|
312
|
-
if (onTouchEnd) eventBindings['bind:touchend'] = onTouchEnd;
|
|
313
|
-
if (onAnimationStart) eventBindings['bind:animationbegin'] = onAnimationStart;
|
|
314
|
-
eventBindings['bind:animationfinish'] = handleAnimationEnd;
|
|
315
|
-
return (
|
|
316
|
-
/*#__PURE__*/
|
|
317
|
-
// @ts-ignore - 小程序自定义组件
|
|
318
|
-
React.createElement(TyAnimatedComponent, _extends({
|
|
319
|
-
id: componentIdRef.current,
|
|
320
|
-
__mode: mode
|
|
321
|
-
}, className ? {
|
|
322
|
-
customClass: className
|
|
323
|
-
} : {}, customStyleValue ? {
|
|
324
|
-
customStyle: customStyleValue
|
|
325
|
-
} : {}, mode === 'text' && textContent !== undefined ? {
|
|
326
|
-
__text: textContent
|
|
327
|
-
} : {}, eventBindings), mode === 'view' ? children : null)
|
|
328
|
-
);
|
|
329
|
-
});
|
|
330
|
-
AnimatedBase.displayName = 'AnimatedBase';
|
|
331
|
-
|
|
332
|
-
/**
|
|
333
|
-
* Animated.View 组件(不包含 setText)
|
|
334
|
-
*/
|
|
335
|
-
const AnimatedView = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement(AnimatedBase, _extends({}, props, {
|
|
336
|
-
mode: "view",
|
|
337
|
-
ref: ref
|
|
338
|
-
})));
|
|
339
|
-
AnimatedView.displayName = 'Animated.View';
|
|
340
|
-
|
|
341
|
-
/**
|
|
342
|
-
* Animated.Text 组件(包含 setText)
|
|
343
|
-
*/
|
|
344
|
-
const AnimatedText = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement(AnimatedBase, _extends({}, props, {
|
|
345
|
-
mode: "text",
|
|
346
|
-
ref: ref
|
|
347
|
-
})));
|
|
348
|
-
AnimatedText.displayName = 'Animated.Text';
|
|
349
|
-
|
|
350
|
-
/**
|
|
351
|
-
* 默认导出
|
|
352
|
-
*/
|
|
353
|
-
const Animated = {
|
|
354
|
-
View: AnimatedView,
|
|
355
|
-
Text: AnimatedText
|
|
356
|
-
};
|
|
357
|
-
export default Animated;
|
|
358
|
-
|
|
359
|
-
// 导出类型
|
|
@@ -1,228 +0,0 @@
|
|
|
1
|
-
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
2
|
-
import "core-js/modules/es.string.trim.js";
|
|
3
|
-
import "core-js/modules/esnext.iterator.constructor.js";
|
|
4
|
-
import "core-js/modules/esnext.iterator.filter.js";
|
|
5
|
-
import "core-js/modules/esnext.iterator.map.js";
|
|
6
|
-
import "core-js/modules/web.dom-collections.iterator.js";
|
|
7
|
-
// @ts-nocheck
|
|
8
|
-
/**
|
|
9
|
-
* TyAnimated - 高性能动画组件(小程序原生层)
|
|
10
|
-
*/
|
|
11
|
-
|
|
12
|
-
// 小程序原生组件注册
|
|
13
|
-
Component({
|
|
14
|
-
properties: {
|
|
15
|
-
__mode: {
|
|
16
|
-
type: String,
|
|
17
|
-
value: 'view'
|
|
18
|
-
},
|
|
19
|
-
__text: {
|
|
20
|
-
type: String,
|
|
21
|
-
value: ''
|
|
22
|
-
},
|
|
23
|
-
__style: {
|
|
24
|
-
type: String,
|
|
25
|
-
value: ''
|
|
26
|
-
},
|
|
27
|
-
__className: {
|
|
28
|
-
type: String,
|
|
29
|
-
value: ''
|
|
30
|
-
},
|
|
31
|
-
// 兼容 FastView 接口
|
|
32
|
-
customStyle: {
|
|
33
|
-
type: String,
|
|
34
|
-
value: ''
|
|
35
|
-
},
|
|
36
|
-
customClass: {
|
|
37
|
-
type: String,
|
|
38
|
-
value: '',
|
|
39
|
-
observer: function (v) {
|
|
40
|
-
this.setData({
|
|
41
|
-
__className: v
|
|
42
|
-
});
|
|
43
|
-
}
|
|
44
|
-
},
|
|
45
|
-
onAnimationStart: {
|
|
46
|
-
type: null,
|
|
47
|
-
value: null
|
|
48
|
-
},
|
|
49
|
-
// 动画结束回调函数
|
|
50
|
-
onAnimationEnd: {
|
|
51
|
-
type: null,
|
|
52
|
-
value: null
|
|
53
|
-
}
|
|
54
|
-
},
|
|
55
|
-
// 定义外部事件
|
|
56
|
-
externalClasses: [],
|
|
57
|
-
data: {
|
|
58
|
-
__text: '',
|
|
59
|
-
__style: '',
|
|
60
|
-
__className: '',
|
|
61
|
-
__animData: null // 动画数据
|
|
62
|
-
},
|
|
63
|
-
lifetimes: {
|
|
64
|
-
attached() {
|
|
65
|
-
// 组件初始化:将 customStyle 的初始值复制到 __style
|
|
66
|
-
const initialStyle = this.properties.customStyle || '';
|
|
67
|
-
if (initialStyle) {
|
|
68
|
-
this.setData({
|
|
69
|
-
__style: initialStyle
|
|
70
|
-
});
|
|
71
|
-
}
|
|
72
|
-
},
|
|
73
|
-
detached() {
|
|
74
|
-
// 清理工作
|
|
75
|
-
}
|
|
76
|
-
},
|
|
77
|
-
methods: {
|
|
78
|
-
/**
|
|
79
|
-
* 事件处理器
|
|
80
|
-
*/
|
|
81
|
-
__handleTiggerEvent(eventName, e) {
|
|
82
|
-
// 触发自定义事件,让外部可以监听
|
|
83
|
-
this.triggerEvent(eventName, e, {
|
|
84
|
-
// bubbles: true,
|
|
85
|
-
composed: true
|
|
86
|
-
});
|
|
87
|
-
},
|
|
88
|
-
/**
|
|
89
|
-
* 创建 IntersectionObserver
|
|
90
|
-
*/
|
|
91
|
-
createIntersectionObserver(options) {
|
|
92
|
-
try {
|
|
93
|
-
// @ts-ignore
|
|
94
|
-
if (typeof ty !== 'undefined' && ty.createIntersectionObserver) {
|
|
95
|
-
return ty.createIntersectionObserver(this, options);
|
|
96
|
-
}
|
|
97
|
-
} catch (e) {
|
|
98
|
-
console.error('createIntersectionObserver error:', e);
|
|
99
|
-
}
|
|
100
|
-
return null;
|
|
101
|
-
},
|
|
102
|
-
/**
|
|
103
|
-
* 获取小程序的 createAnimation 方法
|
|
104
|
-
*/
|
|
105
|
-
_getCreateAnimation() {
|
|
106
|
-
try {
|
|
107
|
-
// @ts-ignore
|
|
108
|
-
if (typeof ty !== 'undefined' && ty.createAnimation) {
|
|
109
|
-
return ty.createAnimation;
|
|
110
|
-
}
|
|
111
|
-
} catch (e) {
|
|
112
|
-
// ignore
|
|
113
|
-
}
|
|
114
|
-
return null;
|
|
115
|
-
},
|
|
116
|
-
/**
|
|
117
|
-
* 解析样式字符串为对象
|
|
118
|
-
*/
|
|
119
|
-
_parseStyle(styleString) {
|
|
120
|
-
if (!styleString) return {};
|
|
121
|
-
const result = {};
|
|
122
|
-
const styles = styleString.split(';').filter(Boolean);
|
|
123
|
-
for (const style of styles) {
|
|
124
|
-
const colonIndex = style.indexOf(':');
|
|
125
|
-
if (colonIndex > 0) {
|
|
126
|
-
const key = style.substring(0, colonIndex).trim();
|
|
127
|
-
const value = style.substring(colonIndex + 1).trim();
|
|
128
|
-
if (key && value) {
|
|
129
|
-
result[key] = value;
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
return result;
|
|
134
|
-
},
|
|
135
|
-
/**
|
|
136
|
-
* 样式对象转字符串
|
|
137
|
-
*/
|
|
138
|
-
_styleToString(styleObj) {
|
|
139
|
-
return Object.entries(styleObj).map(_ref => {
|
|
140
|
-
let [key, value] = _ref;
|
|
141
|
-
return "".concat(key, ":").concat(value);
|
|
142
|
-
}).join(';');
|
|
143
|
-
},
|
|
144
|
-
setCustomStyle(value, callback) {
|
|
145
|
-
// 防止传入 undefined 或 null 导致小程序报错
|
|
146
|
-
if (value === undefined || value === null) {
|
|
147
|
-
console.warn('[TyAnimatedComponent] setCustomStyle: value is undefined or null, ignored');
|
|
148
|
-
if (callback) callback();
|
|
149
|
-
return;
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
// 合并样式
|
|
153
|
-
const currentStyle = this._parseStyle(this.data.__style || '');
|
|
154
|
-
const newStyle = this._parseStyle(value);
|
|
155
|
-
const mergedStyle = _objectSpread(_objectSpread({}, currentStyle), newStyle);
|
|
156
|
-
let mergedStyleString = this._styleToString(mergedStyle);
|
|
157
|
-
if (mergedStyleString === this.data.__style && this.data.__animData !== null) {
|
|
158
|
-
console.log('[TyAnimated] 样式值相同但有动画数据,添加时间戳强制更新');
|
|
159
|
-
// 添加一个不影响渲染的注释,使样式字符串不同
|
|
160
|
-
mergedStyleString = "".concat(mergedStyleString, ";/* ").concat(Date.now(), " */");
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
// 一次性 setData,不嵌套
|
|
164
|
-
this.setData({
|
|
165
|
-
__style: mergedStyleString,
|
|
166
|
-
__animData: null // 总是清空动画数据
|
|
167
|
-
}, callback);
|
|
168
|
-
},
|
|
169
|
-
/**
|
|
170
|
-
* 设置文本内容(__mode='text' 时使用)
|
|
171
|
-
*/
|
|
172
|
-
__applyText(text) {
|
|
173
|
-
if (typeof text === 'string') {
|
|
174
|
-
this.setData({
|
|
175
|
-
__text: text
|
|
176
|
-
});
|
|
177
|
-
}
|
|
178
|
-
},
|
|
179
|
-
__applyAnimData(animData) {
|
|
180
|
-
if (!animData) {
|
|
181
|
-
console.warn('[TyAnimatedComponent] __applyAnimData: animData is null or undefined');
|
|
182
|
-
return;
|
|
183
|
-
}
|
|
184
|
-
this.setData({
|
|
185
|
-
__animData: animData
|
|
186
|
-
});
|
|
187
|
-
},
|
|
188
|
-
/**
|
|
189
|
-
* 核心方法:直接应用 Animation 对象
|
|
190
|
-
* @param {Function} fn - 接收 Animation 实例的回调函数
|
|
191
|
-
* @param {Object} options - 动画选项,包括 transformOrigin
|
|
192
|
-
*
|
|
193
|
-
* 使用示例:
|
|
194
|
-
* comp.__apply((anim) => {
|
|
195
|
-
* anim.opacity(0.5).scale(0.8).step();
|
|
196
|
-
* return anim.export();
|
|
197
|
-
* }, { transformOrigin: 'top left' });
|
|
198
|
-
*/
|
|
199
|
-
__apply(fn) {
|
|
200
|
-
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
201
|
-
const createAnimation = this._getCreateAnimation();
|
|
202
|
-
if (!createAnimation) {
|
|
203
|
-
return;
|
|
204
|
-
}
|
|
205
|
-
const anim = createAnimation(options);
|
|
206
|
-
|
|
207
|
-
// 执行用户的动画配置
|
|
208
|
-
const exported = fn(anim);
|
|
209
|
-
|
|
210
|
-
// 应用动画数据
|
|
211
|
-
const animData = exported || anim.export();
|
|
212
|
-
this.setData({
|
|
213
|
-
__animData: animData
|
|
214
|
-
});
|
|
215
|
-
},
|
|
216
|
-
// 核心触摸事件处理(只保留最常用的)
|
|
217
|
-
__onClick(e) {
|
|
218
|
-
this.__handleTiggerEvent('click', e);
|
|
219
|
-
},
|
|
220
|
-
__onTouchStart(e) {
|
|
221
|
-
this.__handleTiggerEvent('touchstart', e);
|
|
222
|
-
},
|
|
223
|
-
__onTouchEnd(e) {
|
|
224
|
-
this.__handleTiggerEvent('touchend', e);
|
|
225
|
-
}
|
|
226
|
-
}
|
|
227
|
-
});
|
|
228
|
-
export default 'ty-animated-component';
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
<block>
|
|
2
|
-
<view
|
|
3
|
-
wx:if="{{__mode==='view'}}"
|
|
4
|
-
id="root"
|
|
5
|
-
class="{{__className}}"
|
|
6
|
-
style="{{__style}}"
|
|
7
|
-
animation="{{__animData}}"
|
|
8
|
-
bindtap="__onClick"
|
|
9
|
-
bindtouchstart="__onTouchStart"
|
|
10
|
-
bindtouchend="__onTouchEnd"
|
|
11
|
-
>
|
|
12
|
-
<slot></slot>
|
|
13
|
-
</view>
|
|
14
|
-
<text
|
|
15
|
-
wx:else
|
|
16
|
-
id="rootText"
|
|
17
|
-
class="{{__className}}"
|
|
18
|
-
style="{{__style}}"
|
|
19
|
-
animation="{{__animData}}"
|
|
20
|
-
bindtap="__onClick"
|
|
21
|
-
bindtouchstart="__onTouchStart"
|
|
22
|
-
bindtouchend="__onTouchEnd"
|
|
23
|
-
>{{__text}}</text>
|
|
24
|
-
</block>
|
|
25
|
-
|
|
26
|
-
|
package/lib/Animated/types.d.ts
DELETED
|
@@ -1,312 +0,0 @@
|
|
|
1
|
-
import type React from 'react';
|
|
2
|
-
/**
|
|
3
|
-
* 触摸事件处理器(只保留核心事件)
|
|
4
|
-
*
|
|
5
|
-
* 注:只提供最常用的三个事件(onClick, onTouchStart, onTouchEnd)
|
|
6
|
-
* 如需其他事件(如 onLongPress, onTouchMove 等),请在 Animated 的子元素上直接绑定
|
|
7
|
-
*/
|
|
8
|
-
export interface TouchEventHandler {
|
|
9
|
-
onClick?: (e: TouchEvent) => any;
|
|
10
|
-
onTouchStart?: (e: TouchEvent) => any;
|
|
11
|
-
onTouchEnd?: (e: TouchEvent) => any;
|
|
12
|
-
}
|
|
13
|
-
interface TargetType {
|
|
14
|
-
id: string;
|
|
15
|
-
offsetLeft: number;
|
|
16
|
-
offsetTop: number;
|
|
17
|
-
paths: any;
|
|
18
|
-
uid: any;
|
|
19
|
-
dataset: {
|
|
20
|
-
[key: string]: any;
|
|
21
|
-
};
|
|
22
|
-
}
|
|
23
|
-
export interface EventType {
|
|
24
|
-
type: string;
|
|
25
|
-
target: TargetType;
|
|
26
|
-
currentTarget: TargetType;
|
|
27
|
-
timestamp: number;
|
|
28
|
-
stopPropagation: () => void;
|
|
29
|
-
detail: any;
|
|
30
|
-
}
|
|
31
|
-
export type timing = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'step-start' | 'step-end';
|
|
32
|
-
export type TOptions = {
|
|
33
|
-
duration?: number;
|
|
34
|
-
timingFunction?: timing;
|
|
35
|
-
delay?: number;
|
|
36
|
-
transformOrigin?: string;
|
|
37
|
-
};
|
|
38
|
-
/**
|
|
39
|
-
* 元素边界信息
|
|
40
|
-
*/
|
|
41
|
-
export interface BoundingClientRect {
|
|
42
|
-
/** 元素的 ID */
|
|
43
|
-
id: string;
|
|
44
|
-
/** dataset 数据 */
|
|
45
|
-
dataset: Record<string, any>;
|
|
46
|
-
/** 左边界坐标 */
|
|
47
|
-
left: number;
|
|
48
|
-
/** 右边界坐标 */
|
|
49
|
-
right: number;
|
|
50
|
-
/** 上边界坐标 */
|
|
51
|
-
top: number;
|
|
52
|
-
/** 下边界坐标 */
|
|
53
|
-
bottom: number;
|
|
54
|
-
/** 元素宽度 */
|
|
55
|
-
width: number;
|
|
56
|
-
/** 元素高度 */
|
|
57
|
-
height: number;
|
|
58
|
-
}
|
|
59
|
-
/**
|
|
60
|
-
* 元素查询字段配置
|
|
61
|
-
*/
|
|
62
|
-
export interface NodeFields {
|
|
63
|
-
/** 是否返回节点 id */
|
|
64
|
-
id?: boolean;
|
|
65
|
-
/** 是否返回节点 dataset */
|
|
66
|
-
dataset?: boolean;
|
|
67
|
-
/** 是否返回节点布局位置(left right top bottom) */
|
|
68
|
-
rect?: boolean;
|
|
69
|
-
/** 是否返回节点尺寸(width height) */
|
|
70
|
-
size?: boolean;
|
|
71
|
-
/** 是否返回节点的 scrollLeft scrollTop */
|
|
72
|
-
scrollOffset?: boolean;
|
|
73
|
-
/** 指定属性名列表,返回节点对应属性名的当前属性值 */
|
|
74
|
-
properties?: string[];
|
|
75
|
-
/** 指定样式名列表,返回节点对应样式名的当前值 */
|
|
76
|
-
computedStyle?: string[];
|
|
77
|
-
/** 是否返回节点对应的 Node 实例 */
|
|
78
|
-
node?: boolean;
|
|
79
|
-
}
|
|
80
|
-
/**
|
|
81
|
-
* Animated.View 组件的 Ref 类型(不包含 setText)
|
|
82
|
-
*
|
|
83
|
-
* @example
|
|
84
|
-
* ```tsx
|
|
85
|
-
* import { useRef } from 'react'
|
|
86
|
-
* import Animated, { type AnimatedViewRef } from '@/components/animated'
|
|
87
|
-
*
|
|
88
|
-
* const boxRef = useRef<AnimatedViewRef>(null)
|
|
89
|
-
* boxRef.current?.setStyle({ opacity: 0.5 })
|
|
90
|
-
* boxRef.current?.animate((anim) => {
|
|
91
|
-
* anim.translateX(100).step({ duration: 300 })
|
|
92
|
-
* })
|
|
93
|
-
* ```
|
|
94
|
-
*/
|
|
95
|
-
export interface AnimatedViewRef {
|
|
96
|
-
/**
|
|
97
|
-
* 直接设置样式(无动画)
|
|
98
|
-
*
|
|
99
|
-
* 优势:不受 React 重渲染影响,可以在动画过程中随时调用 setState
|
|
100
|
-
* 而不用担心样式被覆盖或闪烁问题
|
|
101
|
-
*
|
|
102
|
-
* 注意:
|
|
103
|
-
* - 会清除动画数据并设置样式
|
|
104
|
-
* - 如果动画正在执行,会中断动画
|
|
105
|
-
* - 返回 Promise,可以等待样式应用完成
|
|
106
|
-
*
|
|
107
|
-
* @param style - 样式对象或 CSS 字符串
|
|
108
|
-
* @param callback - 可选的回调函数,样式应用完成后调用
|
|
109
|
-
* @returns Promise<void> - 样式应用完成后 resolve
|
|
110
|
-
*
|
|
111
|
-
* @example
|
|
112
|
-
* ```tsx
|
|
113
|
-
* // 基本使用
|
|
114
|
-
* ref.current?.setStyle({ opacity: 0.5, color: 'red' })
|
|
115
|
-
*
|
|
116
|
-
* // 等待样式应用完成
|
|
117
|
-
* await ref.current?.setStyle({ opacity: 0 })
|
|
118
|
-
*
|
|
119
|
-
* // 如果需要获取 rect,单独调用
|
|
120
|
-
* await ref.current?.setStyle({ opacity: 0 })
|
|
121
|
-
* const rect = await ref.current?.getBoundingClientRect()
|
|
122
|
-
*
|
|
123
|
-
* // 使用回调
|
|
124
|
-
* ref.current?.setStyle({ color: 'red' }, () => {
|
|
125
|
-
* console.log('样式已应用')
|
|
126
|
-
* })
|
|
127
|
-
* ```
|
|
128
|
-
*/
|
|
129
|
-
setStyle: (style: React.CSSProperties | string, callback?: () => void) => Promise<void>;
|
|
130
|
-
/**
|
|
131
|
-
* 创建动画对象
|
|
132
|
-
* 使用小程序原生动画 API,这是性能最优的动画方式
|
|
133
|
-
*
|
|
134
|
-
* @param options - 动画配置(可选)
|
|
135
|
-
* @param options.duration - 动画持续时间(毫秒),默认 400
|
|
136
|
-
* @param options.timingFunction - 缓动函数,默认 'linear'
|
|
137
|
-
* @param options.delay - 动画延迟时间(毫秒),默认 0
|
|
138
|
-
* @param options.transformOrigin - 变换原点,默认 '50% 50% 0'
|
|
139
|
-
* @returns Animation 实例,包含所有动画方法和 play() 方法
|
|
140
|
-
*
|
|
141
|
-
* @example
|
|
142
|
-
* ```tsx
|
|
143
|
-
* // 基本使用
|
|
144
|
-
* const animation = ref.current.animate()
|
|
145
|
-
* animation.translateX(100).step({ duration: 300 })
|
|
146
|
-
* await animation.play()
|
|
147
|
-
* console.log('动画完成!')
|
|
148
|
-
*
|
|
149
|
-
* // 链式调用
|
|
150
|
-
* const animation = ref.current
|
|
151
|
-
* .animate({ transformOrigin: '50% 50%' })
|
|
152
|
-
* .translateX(100)
|
|
153
|
-
* .scale(1.2)
|
|
154
|
-
* .step({ duration: 300 })
|
|
155
|
-
* await animation.play()
|
|
156
|
-
*
|
|
157
|
-
* // 多段动画
|
|
158
|
-
* const animation = ref.current.animate()
|
|
159
|
-
* animation.translateX(100).step({ duration: 300 })
|
|
160
|
-
* animation.translateY(100).step({ duration: 300 })
|
|
161
|
-
* animation.scale(1.5).step({ duration: 300 })
|
|
162
|
-
* await animation.play()
|
|
163
|
-
*
|
|
164
|
-
* // 复用动画
|
|
165
|
-
* const slideIn = ref.current.animate().translateX(100).step({ duration: 300 })
|
|
166
|
-
* await slideIn.play() // 第一次
|
|
167
|
-
* await slideIn.play() // 第二次
|
|
168
|
-
* ```
|
|
169
|
-
*/
|
|
170
|
-
animate: (options?: TOptions) => IAnimation & {
|
|
171
|
-
play(): Promise<void>;
|
|
172
|
-
};
|
|
173
|
-
/**
|
|
174
|
-
* 获取元素的布局位置和尺寸信息
|
|
175
|
-
* 基于小程序 SelectorQuery.boundingClientRect API
|
|
176
|
-
*
|
|
177
|
-
* @returns Promise<BoundingClientRect | null>
|
|
178
|
-
*
|
|
179
|
-
* @example
|
|
180
|
-
* ```tsx
|
|
181
|
-
* const rect = await boxRef.current?.getBoundingClientRect()
|
|
182
|
-
* console.log(rect?.left, rect?.top, rect?.width, rect?.height)
|
|
183
|
-
*
|
|
184
|
-
* // 使用位置信息实现动画
|
|
185
|
-
* if (rect) {
|
|
186
|
-
* const centerX = window.innerWidth / 2 - rect.left - rect.width / 2
|
|
187
|
-
* const centerY = window.innerHeight / 2 - rect.top - rect.height / 2
|
|
188
|
-
* boxRef.current?.animate((anim) => {
|
|
189
|
-
* anim.translateX(centerX).translateY(centerY).scale(2).step({ duration: 300 })
|
|
190
|
-
* })
|
|
191
|
-
* }
|
|
192
|
-
* ```
|
|
193
|
-
*/
|
|
194
|
-
getBoundingClientRect: () => Promise<BoundingClientRect | null>;
|
|
195
|
-
/**
|
|
196
|
-
* 获取元素的详细信息(包括样式、属性等)
|
|
197
|
-
* 基于小程序 SelectorQuery.fields API
|
|
198
|
-
*
|
|
199
|
-
* @param fields - 查询字段配置
|
|
200
|
-
* @returns Promise<any>
|
|
201
|
-
*
|
|
202
|
-
* @example
|
|
203
|
-
* ```tsx
|
|
204
|
-
* // 获取元素的位置和计算后的样式
|
|
205
|
-
* const info = await boxRef.current?.getFields({
|
|
206
|
-
* rect: true,
|
|
207
|
-
* size: true,
|
|
208
|
-
* computedStyle: ['backgroundColor', 'transform']
|
|
209
|
-
* })
|
|
210
|
-
* console.log(info?.backgroundColor, info?.transform)
|
|
211
|
-
* ```
|
|
212
|
-
*/
|
|
213
|
-
getFields: (fields: NodeFields) => Promise<any>;
|
|
214
|
-
/**
|
|
215
|
-
* 获取元素的计算后样式(computed style)
|
|
216
|
-
* 这是一个便捷方法,内部调用 getFields
|
|
217
|
-
*
|
|
218
|
-
* 使用注意事项:
|
|
219
|
-
* 1. width/height 限制:通过 CSS 自动布局的元素,width/height 通常返回 'auto'
|
|
220
|
-
* - 错误用法:用 getComputedStyle 获取实际像素尺寸
|
|
221
|
-
* - 正确用法:使用 getBoundingClientRect() 获取实际尺寸
|
|
222
|
-
*
|
|
223
|
-
* 2. 内联样式限制:通过 React style 属性设置的样式可能无法查询
|
|
224
|
-
* - 原因:小程序查询的是最终渲染的 CSS,不是 JS 设置的内联样式
|
|
225
|
-
*
|
|
226
|
-
* 3. 适用场景:
|
|
227
|
-
* - 查询 transform 动画状态(动画执行中)
|
|
228
|
-
* - 查询 opacity 等动画属性
|
|
229
|
-
* - 查询通过 CSS 类设置的样式
|
|
230
|
-
* - 查询元素实际尺寸(用 getBoundingClientRect)
|
|
231
|
-
* - 查询通过 style={{ }} 设置的背景色等
|
|
232
|
-
*
|
|
233
|
-
* @param styleNames - 样式名称数组
|
|
234
|
-
* @returns Promise<Record<string, any> | null> - 返回样式对象
|
|
235
|
-
*
|
|
236
|
-
* @example
|
|
237
|
-
* ```tsx
|
|
238
|
-
* // 正确示例:查询动画相关样式
|
|
239
|
-
* const styles = await boxRef.current?.getComputedStyle([
|
|
240
|
-
* 'transform',
|
|
241
|
-
* 'opacity'
|
|
242
|
-
* ])
|
|
243
|
-
*
|
|
244
|
-
* console.log(styles?.transform) // 'matrix(1.5, 0, 0, 1.5, 100, 50)'
|
|
245
|
-
* console.log(styles?.opacity) // '0.8'
|
|
246
|
-
*
|
|
247
|
-
* // 根据当前 transform 决定下一步动画
|
|
248
|
-
* if (styles?.transform !== 'none') {
|
|
249
|
-
* // 当前有 transform,恢复原位
|
|
250
|
-
* boxRef.current?.animate((anim) => {
|
|
251
|
-
* anim.translateX(0).translateY(0).scale(1).step({ duration: 300 })
|
|
252
|
-
* })
|
|
253
|
-
* }
|
|
254
|
-
*
|
|
255
|
-
* // 错误示例:查询尺寸
|
|
256
|
-
* const styles = await boxRef.current?.getComputedStyle(['width', 'height'])
|
|
257
|
-
* console.log(styles?.width) // 可能返回 'auto',不是实际像素值
|
|
258
|
-
*
|
|
259
|
-
* // 正确做法:使用 getBoundingClientRect
|
|
260
|
-
* const rect = await boxRef.current?.getBoundingClientRect()
|
|
261
|
-
* console.log(rect?.width) // 335 (实际像素值)
|
|
262
|
-
* ```
|
|
263
|
-
*/
|
|
264
|
-
getComputedStyle: (styleNames: string[]) => Promise<Record<string, any> | null>;
|
|
265
|
-
}
|
|
266
|
-
/**
|
|
267
|
-
* Animated.Text 组件的 Ref 类型(包含 setText)
|
|
268
|
-
*
|
|
269
|
-
* @example
|
|
270
|
-
* ```tsx
|
|
271
|
-
* import { useRef } from 'react'
|
|
272
|
-
* import Animated, { type AnimatedTextRef } from '@/components/animated'
|
|
273
|
-
*
|
|
274
|
-
* const textRef = useRef<AnimatedTextRef>(null)
|
|
275
|
-
* textRef.current?.setText('新文本')
|
|
276
|
-
* textRef.current?.animate((anim) => {
|
|
277
|
-
* anim.opacity(0.5).step({ duration: 300 })
|
|
278
|
-
* })
|
|
279
|
-
* ```
|
|
280
|
-
*/
|
|
281
|
-
export interface AnimatedTextRef extends AnimatedViewRef {
|
|
282
|
-
/**
|
|
283
|
-
* 直接设置文本内容(仅 Animated.Text 可用)
|
|
284
|
-
* 直接操作底层组件,不触发 React 重渲染
|
|
285
|
-
*
|
|
286
|
-
* @param text - 文本内容
|
|
287
|
-
*
|
|
288
|
-
* @example
|
|
289
|
-
* ```tsx
|
|
290
|
-
* <Animated.Text ref={textRef}>0</Animated.Text>
|
|
291
|
-
* // 更新文本
|
|
292
|
-
* textRef.current?.setText('100')
|
|
293
|
-
* ```
|
|
294
|
-
*/
|
|
295
|
-
setText: (text: string) => void;
|
|
296
|
-
}
|
|
297
|
-
/**
|
|
298
|
-
* Animated 组件 Props
|
|
299
|
-
*/
|
|
300
|
-
export interface AnimatedProps extends TouchEventHandler {
|
|
301
|
-
children?: React.ReactNode;
|
|
302
|
-
className?: string;
|
|
303
|
-
style?: React.CSSProperties;
|
|
304
|
-
id?: string;
|
|
305
|
-
/** 组件模式:'view' 为容器模式(默认),'text' 为文本模式 */
|
|
306
|
-
mode?: 'view' | 'text';
|
|
307
|
-
/** 动画开始回调 */
|
|
308
|
-
onAnimationStart?: () => void;
|
|
309
|
-
/** 动画结束回调 */
|
|
310
|
-
onAnimationEnd?: () => void;
|
|
311
|
-
}
|
|
312
|
-
export {};
|
package/lib/Animated/types.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|