feat: two animations - create and destroy

dromara · Jun 4, 2024 · 098e7f5 · 098e7f5
1 parent f567e12
commit 098e7f5
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 7 deletions.
diff --git a/packages/basic/src/animations/create.ts b/packages/basic/src/animations/create.ts
@@ -0,0 +1,8 @@
+import type { Base } from '@newcar/core'
+import { withProcess } from '@newcar/core'
+
+export function create() {
+  return withProcess<Base>((ctx, process, _origin) => {
+    ctx.widget.progress.value = process
+  })
+}
diff --git a/packages/basic/src/animations/destroy.ts b/packages/basic/src/animations/destroy.ts
@@ -0,0 +1,8 @@
+import type { Base } from '@newcar/core'
+import { withProcess } from '@newcar/core'
+
+export function create() {
+  return withProcess<Base>((ctx, process, _origin) => {
+    ctx.widget.progress.value = (1 - process)
+  })
+}
diff --git a/packages/basic/src/widgets/arc.ts b/packages/basic/src/widgets/arc.ts
@@ -28,7 +28,7 @@ export function createArc(radius: number, from: number, to: number, options?: Ar
       radius,
       radius,
     )
-    path.path.addArc(rect, from, to)
+    path.path.addArc(rect, from, to * options.progress)
 
     const radiusProp = def(radius)
     const fromProp = def(from)
@@ -39,11 +39,11 @@ export function createArc(radius: number, from: number, to: number, options?: Ar
     })
     changed(fromProp, (v: Prop<number>) => {
       path.path.reset()
-      path.path.addArc(rect, v.value, toProp.value)
+      path.path.addArc(rect, v.value, toProp.value * path.progress.value)
     })
     changed(toProp, (v: Prop<number>) => {
       path.path.reset()
-      path.path.addArc(rect, fromProp.value, v.value)
+      path.path.addArc(rect, fromProp.value, v.value * path.progress.value)
     })
 
     return deepMerge(path, {

diff --git a/packages/basic/src/widgets/arrow.ts b/packages/basic/src/widgets/arrow.ts
@@ -76,6 +76,7 @@ export function createArrow(from: Vector2, to: Vector2, options?: ArrowOptions)
         width: options.style.borderWidth,
         ...options.style,
       },
+      progress: options.progress,
     })(ck)
 
     function reset() {
@@ -85,6 +86,10 @@ export function createArrow(from: Vector2, to: Vector2, options?: ArrowOptions)
 
     changed(fromProp, reset)
     changed(toProp, reset)
+    changed(figure.progress, (v) => {
+      stem.progress.value = v.value
+      tip.progress.value = v.value
+    })
 
     figure.add(stem, tip)
 

diff --git a/packages/basic/src/widgets/line.ts b/packages/basic/src/widgets/line.ts
@@ -43,12 +43,12 @@ export function createLine(from: Vector2, to: Vector2, options?: LineOptions) {
     }
 
     path.path.moveTo(...from)
-    path.path.lineTo(...to)
+    path.path.lineTo(...to.map(i => i * path.progress.value) as Vector2)
 
     function reset(_v: Prop<Vector2>) {
       path.path.reset()
       path.path.moveTo(...fromProp.value)
-      path.path.lineTo(...fromProp.value)
+      path.path.lineTo(...toProp.value.map(i => i * path.progress.value) as Vector2)
     }
 
     changed(fromProp, reset)

diff --git a/packages/basic/src/widgets/rect.ts b/packages/basic/src/widgets/rect.ts
@@ -36,12 +36,12 @@ export function createRect(width: number, length: number, options: RectOptions)
     const lengthProp = def(length)
 
     const path = createPath(options ?? {})(ck)
-    const rect = ck.LTRBRect(0, 0, widthProp.value, lengthProp.value)
+    const rect = ck.LTRBRect(0, 0, widthProp.value * options.progress, lengthProp.value * options.progress)
     path.path.addRect(rect)
 
     function reset() {
       path.path.reset()
-      rect.set([0, 0, widthProp.value, lengthProp.value])
+      rect.set([0, 0, widthProp.value * path.progress.value, lengthProp.value * path.progress.value])
       path.path.addRect(rect)
     }