fix: EndView动画使用offsetDistance对不齐 (#2029)

Co-authored-by: xuying.xu <[email protected]>

packages/f2/src/components/line/lineView.tsx

@@ -1,5 +1,5 @@
 import { createRef, jsx } from '@antv/f-engine';
-import { deepMix } from '@antv/util';
+import { deepMix, isArray } from '@antv/util';
 
 function concatPoints(children) {
   let result = [];
@@ -10,6 +10,35 @@ function concatPoints(children) {
   return result;
 }
 
+function formatPoint(point) {
+  const { y } = point;
+  return {
+    x: point.x,
+    y: isArray(y) ? y[1] : y,
+  };
+}
+
+function getPoint(points, t: number) {
+  const formatedPoints = points.map((p) => formatPoint(p));
+  const firstPoint = formatedPoints[0];
+  const lastPoint = formatedPoints[formatedPoints.length - 1];
+  const xOffset = lastPoint.x - firstPoint.x;
+  const x = firstPoint.x + xOffset * t;
+
+  for (let i = 1; i < formatedPoints.length; i++) {
+    const point = formatedPoints[i];
+    const prevPoint = formatedPoints[i - 1];
+    if (x >= prevPoint.x && x <= point.x) {
+      // x 在 2 点之间的比例，根据比例再算出 y 的值
+      const ratio = (x - prevPoint.x) / (point.x - prevPoint.x);
+      return {
+        x,
+        y: prevPoint.y + (point.y - prevPoint.y) * ratio,
+      };
+    }
+  }
+}
+
 export default (props) => {
   const { records, coord, animation, endView: EndView, clip } = props;
 
@@ -76,7 +105,7 @@ export default (props) => {
               return (
                 <polyline
                   key={key}
-                  ref={ref}
+                  // ref={ref}
                   style={{
                     points: fliterPoints.map((point) => {
                       return [point.x, point.y];
@@ -102,21 +131,30 @@ export default (props) => {
 
             {EndView ? (
               <group
-                style={{
-                  offset: ref,
-                }}
+                ref={ref}
+                // style={{
+                //   offset: ref,
+                // }}
                 animation={deepMix(
                   {
                     appear: {
                       easing: 'quadraticOut',
                       duration: 450,
-                      property: ['offsetDistance'],
-                      start: {
-                        offsetDistance: 0,
-                      },
-                      end: {
-                        offsetDistance: 1,
+                      onFrame: function(t) {
+                        // 这段逻辑TODO:修改为offsetDistance
+                        const children = ref.current.getChildren();
+                        const point = getPoint(points, t);
+                        children.forEach((child) => {
+                          child.moveTo(point.x, point.y);
+                        });
                       },
+                      // property: ['offsetDistance'],
+                      // start: {
+                      //   offsetDistance: 0,
+                      // },
+                      // end: {
+                      //   offsetDistance: 1,
+                      // },
                     },
                   },
                   animation