fix: offset of growing

packages/lib/src/widgets/line.vue

@@ -14,14 +14,19 @@ export type LineMixin = LineOptions & FigureMixin;
 
 const props = defineProps<LineOptions>();
 const options = defineWidget(props);
+
+const dx = options.to[0] - options.from[0];
+const dy = options.to[1] - options.from[1];
+const currentX = options.from[0] + dx * (options.progress ?? 1);
+const currentY = options.from[1] + dy * (options.progress ?? 1);
 </script>
 
 <template>
   <line
     v-bind="figure(options)"
     :x1="options.from[0]"
     :y1="options.from[1]"
-    :x2="options.to[0] * (options.progress ?? 1)"
-    :y2="options.to[1] * (options.progress ?? 1)"
+    :x2="currentX"
+    :y2="currentY"
   />
 </template>

packages/lib/src/widgets/widget.ts

@@ -18,6 +18,7 @@ import {
   type RotatableMixin,
   type Scalable,
   type StrokableMixin,
+  destory,
   grow,
   moveOnFunction,
   moveOnPath,
@@ -335,6 +336,20 @@ export function widget(options: WidgetOptions) {
         });
     },
   );
+  registerAnimation<Growable>("grow", (params?: AnimationParams) => {
+    return (manager) =>
+      manager.animate(grow, {
+        duration: params?.duration ?? defaultDuration,
+        by: params?.by ?? ((x) => x),
+      });
+  });
+  registerAnimation<Growable>("destory", (params?: AnimationParams) => {
+    return (manager) =>
+      manager.animate(destory, {
+        duration: params?.duration ?? defaultDuration,
+        by: params?.by ?? ((x) => x),
+      });
+  });
   registerAnimation<Widget>(
     "animate",
     <A>(

test/src/App.vue

@@ -1,10 +1,17 @@
 <script setup lang="ts">
 import { usePlayer, useWidget } from "@vue-motion/core";
-import { Motion, Rect, type RectMixin, easeInOutCirc } from "@vue-motion/lib";
+import {
+  LineMixin,
+  Motion,
+  Rect,
+  type RectMixin,
+  easeInOutCirc,
+} from "@vue-motion/lib";
 import { onMounted } from "vue";
 import "@vue-motion/extension-animations";
 
 const rect = useWidget<RectMixin>();
+const line = useWidget<LineMixin>();
 
 const { play } = usePlayer();
 
@@ -36,12 +43,15 @@ onMounted(() => {
     (r) => r.discolorateBorderTo("yellow"),
     (r) => r.move(-200, -200),
   );
+
+  line.grow();
   play();
 });
 </script>
 
 <template>
   <Motion :width="1600" :height="900">
     <Rect :widget="rect" :width="100" :height="100" fill-color="red" />
+    <Line :widget="line" :from="[100, 100]" :to="[200, 200]" />
   </Motion>
 </template>