feat:Pullable return pulling distance

demo/index.ts

@@ -17,4 +17,5 @@ export default [
     'src/PopoverDemo',
     'src/AnimatorDemo',
     'src/ComplicatedAnimations',
+    'src/ComplicatedDemo',
 ]

demo/src/ComplicatedDemo.ts

@@ -0,0 +1,48 @@
+import { Panel, Group, vlayout, image, layoutConfig, ScaleType, refreshable, Color, pullable, stack, Image, Refreshable, TranslationAnimation } from "doric";
+import { title, icon_refresh } from "./utils";
+
+@Entry
+class MyDemo extends Panel {
+    build(root: Group) {
+        let refreshed: Refreshable
+        let headerImage: Image
+        stack([
+            refreshed = refreshable({
+                onRefresh: () => {
+                    refreshed.setRefreshing(context, false)
+                },
+                header: pullable(context,
+                    stack([]).apply({
+                        backgroundColor: Color.RED,
+                        layoutConfig: layoutConfig().exactly(),
+                        width: 100,
+                        height: 30,
+                    }),
+                    {
+                        startAnimation: () => {
+                        },
+                        stopAnimation: () => {
+                        },
+                        setPullingDistance: (rotation: number) => {
+                            headerImage.scaleX = headerImage.scaleY = (headerImage.height + rotation) / headerImage.height
+                        },
+                    }),
+                content: vlayout([]).apply({
+                    backgroundColor: Color.YELLOW,
+                }),
+            }).apply({
+                layoutConfig: layoutConfig().atmost(),
+            }).also(v => {
+                v.top = 200
+            }),
+
+            headerImage = image({
+                imageUrl: "https://img.zcool.cn/community/01e75b5da933daa801209e1ffa4649.jpg@1280w_1l_2o_100sh.jpg",
+                layoutConfig: layoutConfig().exactly(),
+                width: root.width,
+                height: 200,
+                scaleType: ScaleType.ScaleAspectFill,
+            }),
+        ]).in(root)
+    }
+}

demo/src/RefreshableDemo.ts

@@ -31,8 +31,8 @@ class RefreshableDemo extends Panel {
                     stopAnimation: () => {
                         log('stopAnimation')
                     },
-                    setProgressRotation: (rotation: number) => {
-                        refreshImage.rotation = rotation
+                    setPullingDistance: (distance: number) => {
+                        refreshImage.rotation = distance / 30
                     },
                 }),
             content: (vlayout([
@@ -83,18 +83,6 @@ class RefreshableDemo extends Panel {
                         refreshView.setRefreshable(context, false)
                     }
                 } as IText),
-                label('Rotate self').apply({
-                    width: 300,
-                    height: 50,
-                    backgroundColor: colors[0],
-                    textSize: 30,
-                    textColor: Color.WHITE,
-                    layoutConfig: layoutConfig().exactly(),
-                } as IText).also(v => {
-                    v.onClick = () => {
-                        v.nativeChannel(context, "setRotation")(0.25)
-                    }
-                }),
             ]).apply({
                 layoutConfig: layoutConfig().atmost().h(LayoutSpec.WRAP_CONTENT),
                 gravity: gravity().centerX(),

demo/src/utils.ts

@@ -65,8 +65,8 @@ export function rotatedArrow(context: BridgeContext) {
         stopAnimation: () => {
             log('stopAnimation')
         },
-        setProgressRotation: (rotation: number) => {
-            refreshImage.rotation = rotation
+        setPullingDistance: (distance: number) => {
+            refreshImage.rotation = distance / 30
         },
     })
 }