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

package/LICENSE.md

@@ -0,0 +1,9 @@
+Copyright © 2014-2022 Tuya.inc
+
+MIT License
+
+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:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+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.

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.2",
+  "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.2",
-    "@ray-js/framework-shared": "1.7.56-beta.2",
+    "@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.2"
+    "@ray-js/cli": "1.7.56-beta.4"
   },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org"
   },
-  "gitHead": "511cd3f8d57c2888411700526781e65959037c5b"
+  "gitHead": "76b53482b255b74de7bfbeebc5a102a89031eb82"
 }