diff --git a/Android/doric/src/main/java/pub/doric/shader/DoricLayer.java b/Android/doric/src/main/java/pub/doric/shader/DoricLayer.java index 5226c87c..6da46ddd 100644 --- a/Android/doric/src/main/java/pub/doric/shader/DoricLayer.java +++ b/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; + } + } diff --git a/Android/doric/src/main/java/pub/doric/shader/ViewNode.java b/Android/doric/src/main/java/pub/doric/shader/ViewNode.java index 29fd3311..52bdeb8e 100644 --- a/Android/doric/src/main/java/pub/doric/shader/ViewNode.java +++ b/Android/doric/src/main/java/pub/doric/shader/ViewNode.java @@ -215,7 +215,15 @@ public abstract class ViewNode 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 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()); + } } diff --git a/demo/src/AnimatorDemo.ts b/demo/src/AnimatorDemo.ts index f0f602ce..22314130 100644 --- a/demo/src/AnimatorDemo.ts +++ b/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), diff --git a/js-framework/src/native/animate.ts b/js-framework/src/native/animate.ts index 0db48e91..a9e7a155 100644 --- a/js-framework/src/native/animate.ts +++ b/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,