feat: Image add isAnimating, startAnimating and stopAnimating API

doric-android/doric/src/main/java/pub/doric/shader/ImageNode.java

@@ -56,6 +56,7 @@ import java.io.File;
 
 import jp.wasabeef.glide.transformations.BlurTransformation;
 import pub.doric.DoricContext;
+import pub.doric.extension.bridge.DoricMethod;
 import pub.doric.extension.bridge.DoricPlugin;
 import pub.doric.shader.flex.FlexNode;
 import pub.doric.utils.DoricLog;
@@ -440,4 +441,29 @@ public class ImageNode extends ViewNode<ImageView> {
                 break;
         }
     }
+
+    @DoricMethod
+    public boolean isAnimating() {
+        Drawable drawable = mView.getDrawable();
+        if (drawable instanceof Animatable) {
+            return ((Animatable) drawable).isRunning();
+        }
+        return false;
+    }
+
+    @DoricMethod
+    public void startAnimating() {
+        Drawable drawable = mView.getDrawable();
+        if (drawable instanceof Animatable) {
+            ((Animatable) drawable).start();
+        }
+    }
+
+    @DoricMethod
+    public void stopAnimating() {
+        Drawable drawable = mView.getDrawable();
+        if (drawable instanceof Animatable) {
+            ((Animatable) drawable).stop();
+        }
+    }
 }

doric-demo/rollup.config.js

@@ -104,37 +104,37 @@ export default allFiles
         console.warn(warning.message);
       },
     };
-  })
-  .concat(
-    allFiles
-      .map((e) => e.replace(/\.tsx?$/, ""))
-      .map((bundle) => {
-        return {
-          input: `build/${bundle}.js`,
-          output: {
-            format: "cjs",
-            file: `bundle/${bundle}.es5.js`,
-            sourcemap: true,
-          },
-          plugins: [
-            resolve({ mainFields: ["jsnext"] }),
-            commonjs(),
-            json(),
-            buble({
-              transforms: {
-                dangerousForOf: true,
-                generator: false,
-              },
-            }),
-            image(),
-          ],
-          external: ["reflect-metadata", "doric"],
-          onwarn: function (warning) {
-            if (warning.code === "THIS_IS_UNDEFINED") {
-              return;
-            }
-            console.warn(warning.message);
-          },
-        };
-      })
-  );
+  });
+// .concat(
+//   allFiles
+//     .map((e) => e.replace(/\.tsx?$/, ""))
+//     .map((bundle) => {
+//       return {
+//         input: `build/${bundle}.js`,
+//         output: {
+//           format: "cjs",
+//           file: `bundle/${bundle}.es5.js`,
+//           sourcemap: true,
+//         },
+//         plugins: [
+//           resolve({ mainFields: ["jsnext"] }),
+//           commonjs(),
+//           json(),
+//           buble({
+//             transforms: {
+//               dangerousForOf: true,
+//               generator: false,
+//             },
+//           }),
+//           image(),
+//         ],
+//         external: ["reflect-metadata", "doric"],
+//         onwarn: function (warning) {
+//           if (warning.code === "THIS_IS_UNDEFINED") {
+//             return;
+//           }
+//           console.warn(warning.message);
+//         },
+//       };
+//     })
+// );

doric-demo/src/AnimatedImageDemo.tsx

@@ -0,0 +1,68 @@
+import {
+  Panel,
+  Group,
+  jsx,
+  VLayout,
+  layoutConfig,
+  Image,
+  createRef,
+  Gravity,
+  ScaleType,
+  Color,
+  Text,
+  modal,
+} from "doric";
+import { colors } from "./utils";
+
+@Entry
+export class AnimatedImageDemo extends Panel {
+  build(root: Group) {
+    const imageRef = createRef<Image>();
+    <VLayout
+      parent={root}
+      layoutConfig={layoutConfig().most()}
+      gravity={Gravity.Center}
+      space={20}
+    >
+      <Image
+        scaleType={ScaleType.ScaleToFill}
+        ref={imageRef}
+        imageUrl="https://upload.wikimedia.org/wikipedia/commons/1/14/Animated_PNG_example_bouncing_beach_ball.png"
+      />
+      <Text
+        textSize={20}
+        backgroundColor={colors[0]}
+        textColor={Color.WHITE}
+        padding={{ left: 10, top: 10, right: 10, bottom: 10 }}
+        onClick={async () => {
+          const isAnimating = await imageRef.current.isAnimating(context);
+          modal(context).alert(`Is Animating: ${isAnimating}`);
+        }}
+      >
+        isAnimating
+      </Text>
+      <Text
+        textSize={20}
+        backgroundColor={colors[0]}
+        textColor={Color.WHITE}
+        padding={{ left: 10, top: 10, right: 10, bottom: 10 }}
+        onClick={() => {
+          imageRef.current.startAnimating(context);
+        }}
+      >
+        startAnimating
+      </Text>
+      <Text
+        textSize={20}
+        backgroundColor={colors[0]}
+        textColor={Color.WHITE}
+        padding={{ left: 10, top: 10, right: 10, bottom: 10 }}
+        onClick={() => {
+          imageRef.current.stopAnimating(context);
+        }}
+      >
+        stopAnimating
+      </Text>
+    </VLayout>;
+  }
+}

doric-iOS/Pod/Classes/Shader/DoricImageNode.m

@@ -501,7 +501,7 @@ - (void)blendView:(UIImageView *)view forPropName:(NSString *)name propValue:(id
                                         ? @(YES)
                                         : @(NO),
 #else
-                                        @"animated": @(false),
+                                        @"animated": @(NO),
 #endif
 
                                 },
@@ -558,4 +558,21 @@ - (void)afterBlended:(NSDictionary *)props {
         self.view.image = result;
     }
 }
+
+
+- (NSNumber *)isAnimating {
+    if (self.view.animating) {
+        return @(YES);
+    } else {
+        return @(NO);
+    }
+}
+
+- (void)startAnimating {
+    [self.view startAnimating];
+}
+
+- (void)stopAnimating {
+    [self.view stopAnimating];
+}
 @end

doric-js/bundle/doric-lib.es5.js

@@ -2154,6 +2154,15 @@ var Image = /** @class */ (function (_super) {
     function Image() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
+    Image.prototype.isAnimating = function (context) {
+        return this.nativeChannel(context, "isAnimating")();
+    };
+    Image.prototype.startAnimating = function (context) {
+        return this.nativeChannel(context, "startAnimating")();
+    };
+    Image.prototype.stopAnimating = function (context) {
+        return this.nativeChannel(context, "stopAnimating")();
+    };
     __decorate$a([
         Property,
         __metadata$a("design:type", String)

doric-js/bundle/doric-lib.js

@@ -1619,6 +1619,15 @@ exports.ScaleType = void 0;
     ScaleType[ScaleType["ScaleAspectFill"] = 2] = "ScaleAspectFill";
 })(exports.ScaleType || (exports.ScaleType = {}));
 class Image extends View {
+    isAnimating(context) {
+        return this.nativeChannel(context, "isAnimating")();
+    }
+    startAnimating(context) {
+        return this.nativeChannel(context, "startAnimating")();
+    }
+    stopAnimating(context) {
+        return this.nativeChannel(context, "stopAnimating")();
+    }
 }
 __decorate$a([
     Property,

doric-js/bundle/doric-vm.js

@@ -3140,6 +3140,15 @@ exports.ScaleType = void 0;
     ScaleType[ScaleType["ScaleAspectFill"] = 2] = "ScaleAspectFill";
 })(exports.ScaleType || (exports.ScaleType = {}));
 class Image extends View {
+    isAnimating(context) {
+        return this.nativeChannel(context, "isAnimating")();
+    }
+    startAnimating(context) {
+        return this.nativeChannel(context, "startAnimating")();
+    }
+    stopAnimating(context) {
+        return this.nativeChannel(context, "stopAnimating")();
+    }
 }
 __decorate$a([
     Property,

doric-js/index.d.ts

@@ -606,6 +606,7 @@ declare module 'doric/lib/src/widget/text' {
 declare module 'doric/lib/src/widget/image' {
     import { View } from "doric/lib/src/ui/view";
     import { Color } from "doric/lib/src/util/color";
+    import { BridgeContext } from "doric/lib/src/runtime/global";
     export enum ScaleType {
             ScaleToFill = 0,
             ScaleAspectFit = 1,
@@ -674,6 +675,9 @@ declare module 'doric/lib/src/widget/image' {
                     right: number;
                     bottom: number;
             };
+            isAnimating(context: BridgeContext): Promise<boolean>;
+            startAnimating(context: BridgeContext): Promise<any>;
+            stopAnimating(context: BridgeContext): Promise<any>;
     }
     export function image(config: Partial<Image>): Image;
 }

doric-js/lib/src/widget/image.d.ts

@@ -1,5 +1,6 @@
 import { View } from "../ui/view";
 import { Color } from "../util/color";
+import { BridgeContext } from "../runtime/global";
 export declare enum ScaleType {
     ScaleToFill = 0,
     ScaleAspectFit = 1,
@@ -68,5 +69,8 @@ export declare class Image extends View {
         right: number;
         bottom: number;
     };
+    isAnimating(context: BridgeContext): Promise<boolean>;
+    startAnimating(context: BridgeContext): Promise<any>;
+    stopAnimating(context: BridgeContext): Promise<any>;
 }
 export declare function image(config: Partial<Image>): Image;

doric-js/lib/src/widget/image.js

@@ -32,6 +32,15 @@ export var ScaleType;
     ScaleType[ScaleType["ScaleAspectFill"] = 2] = "ScaleAspectFill";
 })(ScaleType || (ScaleType = {}));
 export class Image extends View {
+    isAnimating(context) {
+        return this.nativeChannel(context, "isAnimating")();
+    }
+    startAnimating(context) {
+        return this.nativeChannel(context, "startAnimating")();
+    }
+    stopAnimating(context) {
+        return this.nativeChannel(context, "stopAnimating")();
+    }
 }
 __decorate([
     Property,

doric-js/src/widget/image.ts

@@ -16,6 +16,7 @@
 import { View, Property } from "../ui/view"
 import { layoutConfig } from "../util/layoutconfig"
 import { Color } from "../util/color"
+import { BridgeContext } from "../runtime/global"
 
 export enum ScaleType {
     ScaleToFill = 0,
@@ -107,6 +108,18 @@ export class Image extends View {
         right: number,
         bottom: number
     }
+
+    isAnimating(context: BridgeContext) {
+        return this.nativeChannel(context, "isAnimating")() as Promise<boolean>
+    }
+
+    startAnimating(context: BridgeContext) {
+        return this.nativeChannel(context, "startAnimating")()
+    }
+
+    stopAnimating(context: BridgeContext) {
+        return this.nativeChannel(context, "stopAnimating")()
+    }
 }
 
 export function image(config: Partial<Image>) {

doric-web/dist/index.js

@@ -3194,6 +3194,15 @@ exports.ScaleType = void 0;
     ScaleType[ScaleType["ScaleAspectFill"] = 2] = "ScaleAspectFill";
 })(exports.ScaleType || (exports.ScaleType = {}));
 class Image extends View {
+    isAnimating(context) {
+        return this.nativeChannel(context, "isAnimating")();
+    }
+    startAnimating(context) {
+        return this.nativeChannel(context, "startAnimating")();
+    }
+    stopAnimating(context) {
+        return this.nativeChannel(context, "stopAnimating")();
+    }
 }
 __decorate$a([
     Property,