@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 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.56-beta.5",
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.56-beta.5",
33
- "@ray-js/framework-shared": "1.7.56-beta.5",
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.56-beta.5"
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": "504d74785b7f6ed42a0e20d929a77e9df4971bf8"
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
- }
@@ -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';
@@ -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,5 +0,0 @@
1
- import * as React from 'react';
2
- declare const TyAnimated: React.ComponentType<any>;
3
- export default TyAnimated;
4
-
5
-
@@ -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,4 +0,0 @@
1
- {
2
- "component": true,
3
- "usingComponents": {}
4
- }
@@ -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
-
@@ -1,3 +0,0 @@
1
- .container { display: block; }
2
-
3
-
@@ -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 {};
@@ -1 +0,0 @@
1
- export {};