@ray-js/components 1.7.56-beta.3 → 1.7.56-beta.4

package/lib/Animated/index.js

@@ -1,6 +1,4 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["finish"];
 import "core-js/modules/es.regexp.exec.js";
 import "core-js/modules/es.string.replace.js";
 import "core-js/modules/esnext.iterator.constructor.js";
@@ -85,16 +83,46 @@ const AnimatedBase = /*#__PURE__*/forwardRef((props, ref) => {
        * @example
        * ref.current.setStyle({ color: 'red', fontSize: '16px', border: '1px solid #ccc' })
        */
-      setStyle(styleValue) {
-        var _inst$setCustomStyle;
-        const inst = getDomInstance();
-        if (!inst) return;
+      setStyle(styleValue, callback) {
+        return new Promise(resolve => {
+          var _inst$setCustomStyle;
+          const inst = getDomInstance();
+          if (!inst) {
+            console.warn('No DOM instance found');
+            resolve();
+            if (callback) callback();
+            return;
+          }
 
-        // 防止传入 undefined 或空值
-        if (styleValue === undefined || styleValue === null) return;
-        const styleString = typeof styleValue === 'string' ? styleValue : styleToString(styleValue);
-        if (!styleString) return;
-        (_inst$setCustomStyle = inst.setCustomStyle) === null || _inst$setCustomStyle === void 0 || _inst$setCustomStyle.call(inst, styleString);
+          // 防止传入 undefined 或空值
+          if (styleValue === undefined || styleValue === null) {
+            console.warn('styleValue is undefined or null');
+            resolve();
+            if (callback) callback();
+            return;
+          }
+          const styleString = typeof styleValue === 'string' ? styleValue : styleToString(styleValue);
+          if (!styleString) {
+            console.warn('styleString is empty');
+            resolve();
+            if (callback) callback();
+            return;
+          }
+
+          // setData 完成后的回调
+          (_inst$setCustomStyle = inst.setCustomStyle) === null || _inst$setCustomStyle === void 0 || _inst$setCustomStyle.call(inst, styleString, () => {
+            // 调用用户回调
+            if (callback && typeof callback === 'function') {
+              try {
+                callback();
+              } catch (error) {
+                console.error('[Animated] setStyle callback error:', error);
+              }
+            }
+            // resolve Promise
+            resolve();
+          });
+        });
       },
       /**
        * 设置文本内容（仅 mode='text' 时可用）
@@ -115,34 +143,67 @@ const AnimatedBase = /*#__PURE__*/forwardRef((props, ref) => {
         (_inst$__applyText = inst.__applyText) === null || _inst$__applyText === void 0 || _inst$__applyText.call(inst, text);
       },
       /**
-       * 使用小程序原生动画 API
-       * 这是性能最优的动画方式
+       * 创建动画对象
+       * 使用小程序原生动画 API，这是性能最优的动画方式
+       *
+       * @param options - 动画配置（duration, timingFunction, delay, transformOrigin）
+       * @returns Animation 实例，包含 play() 方法
        *
        * @example
-       * ref.current?.animate((anim) => {
-       *   anim.translateX(100).scale(1.2).step({ duration: 300 })
-       * }, { transformOrigin: 'center center' })
+       * // 创建并执行动画
+       * const animation = ref.current.animate()
+       * animation.translateX(100).scale(1.2).step({ duration: 300 })
+       * animation.translateY(50).step({ duration: 200 })
+       * await animation.play()
+       * console.log('动画完成！')
+       *
+       * // 链式调用
+       * const animation = ref.current
+       *   .animate({ transformOrigin: '50% 50%' })
+       *   .translateX(100)
+       *   .scale(1.2)
+       *   .step({ duration: 300 })
+       * await animation.play()
+       *
+       * // 复用动画
+       * const slideIn = ref.current.animate().translateX(100).step({ duration: 300 })
+       * await slideIn.play() // 第一次
+       * await slideIn.play() // 第二次
        */
-      animate(callback, options) {
-        var _inst$__apply;
+      animate(options) {
+        var _inst$_getCreateAnima;
         const inst = getDomInstance();
         if (!inst) {
-          console.warn('[Animated] animate: 无法获取组件实例');
-          return;
+          console.warn('[Animated] No DOM instance found');
+          return null;
         }
-        const _ref2 = options || {},
-          {
-            finish
-          } = _ref2,
-          option = _objectWithoutProperties(_ref2, _excluded);
-        if (finish && typeof finish === 'function') {
-          callbackRef.current = finish;
-        } else {
-          // 如果没有传 finish 参数，清空之前的回调
-          // 避免 duration: 0 的重置动画再次触发之前的 finish
-          callbackRef.current = null;
+
+        // 获取 createAnimation 函数
+        const createAnimation = (_inst$_getCreateAnima = inst._getCreateAnimation) === null || _inst$_getCreateAnima === void 0 ? void 0 : _inst$_getCreateAnima.call(inst);
+        if (!createAnimation) {
+          console.error('[Animated] createAnimation 不可用');
+          return null;
         }
-        (_inst$__apply = inst.__apply) === null || _inst$__apply === void 0 || _inst$__apply.call(inst, callback, option);
+
+        // 创建小程序原生 Animation 实例
+        const animation = createAnimation(options);
+
+        // 扩展 play 方法
+        animation.play = () => {
+          return new Promise(resolve => {
+            var _inst$__applyAnimData;
+            // 导出动画数据
+            const animationData = animation.export();
+
+            // 包装完成回调
+
+            callbackRef.current = event => {
+              resolve(event);
+            };
+            (_inst$__applyAnimData = inst.__applyAnimData) === null || _inst$__applyAnimData === void 0 || _inst$__applyAnimData.call(inst, animationData);
+          });
+        };
+        return animation;
       },
       /**
        * 获取元素的布局位置和尺寸信息

package/lib/Animated/native/ty-animated/index.js

@@ -141,37 +141,30 @@ Component({
         return "".concat(key, ":").concat(value);
       }).join(';');
     },
-    setCustomStyle(value) {
+    setCustomStyle(value, callback) {
       // 防止传入 undefined 或 null 导致小程序报错
       if (value === undefined || value === null) {
         console.warn('[TyAnimatedComponent] setCustomStyle: value is undefined or null, ignored');
+        if (callback) callback();
         return;
       }
 
-      // 1. 合并样式
+      // 合并样式
       const currentStyle = this._parseStyle(this.data.__style || '');
       const newStyle = this._parseStyle(value);
       const mergedStyle = _objectSpread(_objectSpread({}, currentStyle), newStyle);
-      const mergedStyleString = this._styleToString(mergedStyle);
+      let mergedStyleString = this._styleToString(mergedStyle);
       if (mergedStyleString === this.data.__style && this.data.__animData !== null) {
-        console.log('[TyAnimated] 值相同且有动画数据，强制刷新');
-
-        // 先清空样式和动画数据
-        this.setData({
-          __style: '',
-          __animData: null
-        }, () => {
-          // 再设置目标样式
-          this.setData({
-            __style: mergedStyleString
-          });
-        });
-        return;
+        console.log('[TyAnimated] 样式值相同但有动画数据，添加时间戳强制更新');
+        // 添加一个不影响渲染的注释，使样式字符串不同
+        mergedStyleString = "".concat(mergedStyleString, ";/* ").concat(Date.now(), " */");
       }
+
+      // 一次性 setData，不嵌套
       this.setData({
         __style: mergedStyleString,
-        __animData: null
-      });
+        __animData: null // 总是清空动画数据
+      }, callback);
     },
     /**
      * 设置文本内容（__mode='text' 时使用）
@@ -183,6 +176,15 @@ Component({
         });
       }
     },
+    __applyAnimData(animData) {
+      if (!animData) {
+        console.warn('[TyAnimatedComponent] __applyAnimData: animData is null or undefined');
+        return;
+      }
+      this.setData({
+        __animData: animData
+      });
+    },
     /**
      * 核心方法：直接应用 Animation 对象
      * @param {Function} fn - 接收 Animation 实例的回调函数

package/lib/Animated/types.d.ts

@@ -96,45 +96,80 @@ export interface AnimatedViewRef {
     /**
      * 直接设置样式（无动画）
      *
+     * 优势：不受 React 重渲染影响，可以在动画过程中随时调用 setState
+     * 而不用担心样式被覆盖或闪烁问题
+     *
+     * 注意：
+     * - 会清除动画数据并设置样式
+     * - 如果动画正在执行，会中断动画
+     * - 返回 Promise，可以等待样式应用完成
+     *
      * @param style - 样式对象或 CSS 字符串
+     * @param callback - 可选的回调函数，样式应用完成后调用
+     * @returns Promise<void> - 样式应用完成后 resolve
      *
      * @example
      * ```tsx
+     * // 基本使用
      * ref.current?.setStyle({ opacity: 0.5, color: 'red' })
-     * ref.current?.setStyle('transform: translateX(100px);')
+     *
+     * // 等待样式应用完成
+     * await ref.current?.setStyle({ opacity: 0 })
+     *
+     * // 如果需要获取 rect，单独调用
+     * await ref.current?.setStyle({ opacity: 0 })
+     * const rect = await ref.current?.getBoundingClientRect()
+     *
+     * // 使用回调
+     * ref.current?.setStyle({ color: 'red' }, () => {
+     *   console.log('样式已应用')
+     * })
      * ```
      */
-    setStyle: (style: React.CSSProperties | string) => void;
+    setStyle: (style: React.CSSProperties | string, callback?: () => void) => Promise<void>;
     /**
-     * 使用小程序原生动画 API
-     * 这是性能最优的动画方式
+     * 创建动画对象
+     * 使用小程序原生动画 API，这是性能最优的动画方式
      *
-     * @param callback - 动画配置回调，接收小程序动画对象
-     * @param options - 动画选项
+     * @param options - 动画配置（可选）
+     * @param options.duration - 动画持续时间（毫秒），默认 400
+     * @param options.timingFunction - 缓动函数，默认 'linear'
+     * @param options.delay - 动画延迟时间（毫秒），默认 0
+     * @param options.transformOrigin - 变换原点，默认 '50% 50% 0'
+     * @returns Animation 实例，包含所有动画方法和 play() 方法
      *
      * @example
      * ```tsx
-     * // 单个动画
-     * ref.current?.animate((anim) => {
-     *   anim.translateX(100).scale(1.2).step({ duration: 300, timingFunction: 'ease-out' })
-     * })
+     * // 基本使用
+     * const animation = ref.current.animate()
+     * animation.translateX(100).step({ duration: 300 })
+     * await animation.play()
+     * console.log('动画完成！')
      *
-     * // 序列动画
-     * ref.current?.animate((anim) => {
-     *   anim.translateX(100).step({ duration: 300 })
-     *   anim.scale(1.2).step({ duration: 200 })
-     *   anim.rotate(360).step({ duration: 500 })
-     * })
+     * // 链式调用
+     * const animation = ref.current
+     *   .animate({ transformOrigin: '50% 50%' })
+     *   .translateX(100)
+     *   .scale(1.2)
+     *   .step({ duration: 300 })
+     * await animation.play()
      *
-     * // 设置 transformOrigin
-     * ref.current?.animate((anim) => {
-     *   anim.scaleX(0.5).step({ duration: 300 })
-     * }, { transformOrigin: 'left center' })
+     * // 多段动画
+     * const animation = ref.current.animate()
+     * animation.translateX(100).step({ duration: 300 })
+     * animation.translateY(100).step({ duration: 300 })
+     * animation.scale(1.5).step({ duration: 300 })
+     * await animation.play()
+     *
+     * // 复用动画
+     * const slideIn = ref.current.animate().translateX(100).step({ duration: 300 })
+     * await slideIn.play() // 第一次
+     * await slideIn.play() // 第二次
      * ```
      */
-    animate: (callback: (anim: IAnimation) => any, options?: TOptions & {
-        finish: (event: EventType) => void;
-    }) => void;
+    animate: (options?: TOptions) => IAnimation & {
+        play(): Promise<void>;
+    };
     /**
    * 获取元素的布局位置和尺寸信息
    * 基于小程序 SelectorQuery.boundingClientRect API

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/components",
-  "version": "1.7.56-beta.3",
+  "version": "1.7.56-beta.4",
   "description": "Ray basic components",
   "keywords": [
     "ray"
@@ -29,8 +29,8 @@
   "dependencies": {
     "@ray-core/macro": "^0.4.9",
     "@ray-core/wechat": "^0.4.9",
-    "@ray-js/adapter": "1.7.56-beta.3",
-    "@ray-js/framework-shared": "1.7.56-beta.3",
+    "@ray-js/adapter": "1.7.56-beta.4",
+    "@ray-js/framework-shared": "1.7.56-beta.4",
     "ahooks": "^3.8.5",
     "clsx": "^1.2.1",
     "core-js": "^3.43.0",
@@ -40,11 +40,11 @@
     "style-to-object": "^0.3.0"
   },
   "devDependencies": {
-    "@ray-js/cli": "1.7.56-beta.3"
+    "@ray-js/cli": "1.7.56-beta.4"
   },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org"
   },
-  "gitHead": "fdf56468c021ff48a0f36d027dcb9408533ef3ba"
+  "gitHead": "76b53482b255b74de7bfbeebc5a102a89031eb82"
 }