Merge branch 'feature/animation' into 'master'

feat:Android support corners animation



See merge request !36

Android/doric/src/main/java/pub/doric/shader/DoricLayer.java

@@ -151,4 +151,11 @@ public class DoricLayer extends FrameLayout {
         };
     }
 
+    public float getCornerRadius() {
+        if (mCornerRadii != null) {
+            return mCornerRadii[0];
+        }
+        return 0;
+    }
+
 }

Android/doric/src/main/java/pub/doric/shader/ViewNode.java

@@ -215,7 +215,15 @@ public abstract class ViewNode<T extends View> extends DoricContextHolder {
                 break;
             case "corners":
                 if (prop.isNumber()) {
-                    requireDoricLayer().setCornerRadius(DoricUtils.dp2px(prop.asNumber().toFloat()));
+                    if (isAnimating()) {
+                        addAnimator(ObjectAnimator.ofFloat(
+                                this,
+                                name,
+                                getCorners(),
+                                prop.asNumber().toFloat()));
+                    } else {
+                        setCorners(prop.asNumber().toFloat());
+                    }
                 } else if (prop.isObject()) {
                     JSValue lt = prop.asObject().getProperty("leftTop");
                     JSValue rt = prop.asObject().getProperty("rightTop");
@@ -454,4 +462,15 @@ public abstract class ViewNode<T extends View> extends DoricContextHolder {
     public void setBgColor(int color) {
         mView.setBackgroundColor(color);
     }
+
+    @DoricMethod
+    public void setCorners(float corner) {
+        requireDoricLayer().setCornerRadius(DoricUtils.dp2px(corner));
+        getNodeView().invalidate();
+    }
+
+    @DoricMethod
+    public float getCorners() {
+        return DoricUtils.px2dp((int) requireDoricLayer().getCornerRadius());
+    }
 }

demo/src/AnimatorDemo.ts

@@ -4,10 +4,10 @@ import { title, colors, box } from "./utils";
 function thisLabel(str: string) {
     return text({
         text: str,
-        width: 100,
+        width: 60,
         height: 50,
-        bgColor: colors[4],
-        textSize: 20,
+        bgColor: colors[0],
+        textSize: 15,
         textColor: Color.WHITE,
         layoutConfig: layoutConfig().exactly(),
     })
@@ -31,6 +31,7 @@ class AnimatorDemo extends Panel {
                                         view.x = view.y = 0
                                         view.rotation = 0
                                         view.bgColor = colors[2]
+                                        view.corners = 0
                                     },
                                     duration: 1500,
                                 }).then(() => {
@@ -40,7 +41,9 @@ class AnimatorDemo extends Panel {
                                 })
                             }
                         }),
-                        thisLabel('Move X').apply({
+                    ]).apply({ space: 10 } as IHLayout),
+                    hlayout([
+                        thisLabel('X').apply({
                             onClick: () => {
                                 animate(this)({
                                     animations: () => {
@@ -51,7 +54,7 @@ class AnimatorDemo extends Panel {
                                 })
                             }
                         }),
-                        thisLabel('Move Y').apply({
+                        thisLabel('Y').apply({
                             onClick: () => {
                                 animate(this)({
                                     animations: () => {
@@ -62,8 +65,6 @@ class AnimatorDemo extends Panel {
                                 })
                             }
                         }),
-                    ]).apply({ space: 10 } as IHLayout),
-                    hlayout([
                         thisLabel('Width').apply({
                             onClick: () => {
                                 animate(this)({
@@ -110,6 +111,20 @@ class AnimatorDemo extends Panel {
                                 });
                             }
                         }),
+                        thisLabel('Corner').apply({
+                            onClick: () => {
+                                animate(this)({
+                                    animations: () => {
+                                        if (typeof view.corners === 'number') {
+                                            view.corners += 10
+                                        } else {
+                                            view.corners = 10
+                                        }
+                                    },
+                                    duration: 1000,
+                                });
+                            }
+                        }),
                     ]).apply({ space: 10 } as IHLayout),
                 ]
             ).apply({ space: 10 } as IVLayout),

js-framework/src/native/animate.ts

@@ -15,7 +15,10 @@
  */
 import { Panel } from "../ui/panel"
 import { takeLet } from "../pattern/candies"
-
+/**
+ * Only supports x,y,width,height,corner(just for four corners),rotation,bgColor,
+ * @param panel @see Panel
+ */
 export function animate(panel: Panel) {
     return (args: {
         animations: () => void,