Feat/mark point support arc animate

common/changes/@visactor/vrender-components/feat-mark-point-support-arc-animate_2026-04-29-05-51.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vrender-components",
+      "comment": "feat: arc markpoint support animation. close VisAct",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vrender-components"
+}

packages/vrender-components/__tests__/unit/marker/point.test.ts

@@ -1,10 +1,11 @@
 import type { Group, IGraphic, Stage } from '@visactor/vrender-core';
-import type { Tag, Segment } from '../../../src';
-import { MarkPoint } from '../../../src';
+import type { ArcSegment, Tag, Segment } from '../../../src';
+import { MarkPoint, registerMarkPointAnimate } from '../../../src';
 import { createCanvas } from '../../util/dom';
 import { createStage } from '../../util/vrender';
 import { initBrowserEnv } from '@visactor/vrender-kits';
 initBrowserEnv();
+registerMarkPointAnimate();
 
 describe('Marker', () => {
   let stage: Stage;
@@ -67,4 +68,42 @@ describe('Marker', () => {
         .text
     ).toBe('mark point label text');
   });
+
+  it('MarkPoint arc line callIn animation', () => {
+    const markPoint = new MarkPoint({
+      position: {
+        x: 100,
+        y: 250
+      },
+      itemLine: {
+        type: 'type-arc',
+        arcRatio: 0.8
+      },
+      itemContent: {
+        type: 'text',
+        offsetX: 100,
+        offsetY: 30,
+        style: {
+          text: 'mark point arc label text',
+          panel: {
+            visible: true
+          }
+        }
+      },
+      animationEnter: {
+        type: 'callIn',
+        duration: 500,
+        easing: 'linear'
+      }
+    });
+    stage.defaultLayer.add(markPoint as unknown as IGraphic);
+    stage.render();
+
+    const markPointContainer = markPoint.children[0] as unknown as Group;
+    const line = markPointContainer.children[0] as unknown as ArcSegment;
+
+    expect(line.key).toBe('arc-segment');
+    expect(line.line?.attribute.clipRange).toBe(0);
+    expect(line.line?.animates?.size).toBeGreaterThan(0);
+  });
 });

packages/vrender-components/src/marker/animate/animate.ts

@@ -80,7 +80,7 @@ export function markArcAreaAnimate(area: IArc, label: Tag | Tag[], animationconf
 }
 
 export function markPointAnimate(
-  lines: [Segment, ILine],
+  lines: [Segment | ArcSegment, ILine],
   item: Tag | IRichText | ISymbol | IImage,
   animationconfig: any,
   state: MarkerAnimationState

packages/vrender-components/src/marker/animate/call-in.ts

@@ -1,10 +1,10 @@
 import type { EasingType, IImage, ILine, IRichText, ISymbol } from '@visactor/vrender-core';
-import type { Segment } from '../../segment';
+import type { ArcSegment, Segment } from '../../segment';
 import type { Tag } from '../../tag';
-import { graphicFadeIn } from './common';
+import { getSegmentLineGraphics, graphicFadeIn } from './common';
 
 export function pointCallIn(
-  itemLine: Segment,
+  itemLine: Segment | ArcSegment,
   decorativeLine: ILine,
   item: Tag | IRichText | ISymbol | IImage,
   duration: number,
@@ -21,9 +21,10 @@ export function pointCallIn(
   graphicFadeIn(itemLine.startSymbol, delay, startSymbolDuration, easing);
 
   // line
-  itemLine.lines.forEach(line => line.setAttribute('clipRange', 0));
-  itemLine.lines.forEach((l, index) => {
-    const stepDuration = lineDuration / itemLine.lines.length;
+  const lines = getSegmentLineGraphics(itemLine);
+  lines.forEach(line => line.setAttribute('clipRange', 0));
+  lines.forEach((l, index) => {
+    const stepDuration = lineDuration / lines.length;
     l.animate()
       .wait(delay + startSymbolDuration + index * stepDuration)
       .to({ clipRange: 1 }, stepDuration, easing);

packages/vrender-components/src/marker/animate/clip-in.ts

@@ -1,7 +1,7 @@
 import type { EasingType } from '@visactor/vrender-core';
 import type { ArcSegment, Segment } from '../../segment';
 import type { Tag } from '../../tag';
-import { graphicFadeIn } from './common';
+import { getSegmentLineGraphics, graphicFadeIn } from './common';
 import { array } from '@visactor/vutils';
 
 export function commonLineClipIn(
@@ -20,9 +20,10 @@ export function commonLineClipIn(
   graphicFadeIn(line.startSymbol, delay, startSymbolDuration, easing);
 
   // line
-  line.lines.forEach(line => line.setAttribute('clipRange', 0));
-  line.lines.forEach((l, index) => {
-    const stepDuration = lineDuration / line.lines.length;
+  const lines = getSegmentLineGraphics(line);
+  lines.forEach(line => line.setAttribute('clipRange', 0));
+  lines.forEach((l, index) => {
+    const stepDuration = lineDuration / lines.length;
     l.animate()
       .wait(delay + startSymbolDuration + index * stepDuration)
       .to({ clipRange: 1 }, stepDuration, easing);

packages/vrender-components/src/marker/animate/common.ts

@@ -2,6 +2,13 @@ import type { EasingType, IGraphic } from '@visactor/vrender-core';
 import type { ArcSegment, Segment } from '../../segment';
 import type { Tag } from '../../tag';
 
+export function getSegmentLineGraphics(segment: Segment | ArcSegment): IGraphic[] {
+  if (!segment) {
+    return [];
+  }
+  return [...(segment.lines ?? []), (segment as ArcSegment).line].filter(Boolean) as IGraphic[];
+}
+
 /** fade-in */
 export function graphicFadeIn(graphic: IGraphic, delay: number, duration: number, easing: EasingType) {
   if (!graphic) {
@@ -35,8 +42,7 @@ export function segmentFadeIn(segment: Segment, delay: number, duration: number,
   graphicFadeIn(segment.startSymbol, delay, duration, easing);
 
   // line
-  segment.lines.forEach(line => graphicFadeIn(line, delay, duration, easing));
-  graphicFadeIn((segment as ArcSegment).line, delay, duration, easing);
+  getSegmentLineGraphics(segment).forEach(line => graphicFadeIn(line, delay, duration, easing));
 
   // end symbol
   graphicFadeIn(segment.endSymbol, delay, duration, easing);
@@ -77,8 +83,7 @@ export function segmentFadeOut(segment: Segment | ArcSegment, delay: number, dur
   graphicFadeOut(segment.startSymbol, delay, duration, easing);
 
   // line
-  segment.lines.forEach(line => graphicFadeOut(line, delay, duration, easing));
-  graphicFadeOut((segment as ArcSegment).line, delay, duration, easing);
+  getSegmentLineGraphics(segment).forEach(line => graphicFadeOut(line, delay, duration, easing));
 
   // end symbol
   graphicFadeOut(segment.endSymbol, delay, duration, easing);

packages/vrender-components/src/marker/animate/fade-in.ts

@@ -34,7 +34,7 @@ export function arcAreaFadeIn(area: IArc, label: Tag | Tag[], duration: number,
 }
 
 export function pointFadeIn(
-  itemLine: Segment,
+  itemLine: Segment | ArcSegment,
   decorativeLine: ILine,
   item: Tag | IRichText | ISymbol | IImage,
   duration: number,

packages/vrender-components/src/marker/animate/fade-out.ts

@@ -34,7 +34,7 @@ export function arcAreaFadeOut(area: IArc, label: Tag | Tag[], duration: number,
 }
 
 export function pointFadeOut(
-  itemLine: Segment,
+  itemLine: Segment | ArcSegment,
   decorativeLine: ILine,
   item: Tag | IRichText | ISymbol | IImage,
   duration: number,

packages/vrender-components/src/marker/type.ts

@@ -195,26 +195,22 @@ export type BaseMarkerAnimation<T> = {
    */
   animationExit?: MarkerExitAnimation;
 };
-export type MarkerAnimation<T> = MarkerUpdateAnimation<T> | MarkerUpdateAnimation<T>;
+export type MarkerAnimation<T> = MarkerUpdateAnimation<T> | MarkerExitAnimation;
 
 export type MarkerUpdateAnimation<T> = {
   /**
    * 设置动画的类型
    */
   type: T;
-} & MarkerExitAnimation;
+} & MarkerAnimationBase;
 
 export type MarkCommonLineAnimationType = 'clipIn' | 'fadeIn';
 
 export type CommonMarkAreaAnimationType = 'fadeIn';
 
 export type MarkPointAnimationType = 'callIn' | 'fadeIn';
 
-export type MarkerExitAnimation = {
-  /**
-   * 设置离场动画的类型为fadeOut，即淡出
-   */
-  type: 'fadeOut';
+export type MarkerAnimationBase = {
   /**
    * 动画的时长
    */
@@ -229,6 +225,13 @@ export type MarkerExitAnimation = {
   easing?: EasingType;
 };
 
+export type MarkerExitAnimation = MarkerAnimationBase & {
+  /**
+   * 设置离场动画的类型为fadeOut，即淡出
+   */
+  type: 'fadeOut';
+};
+
 export type MarkerAnimationState = 'enter' | 'update' | 'exit';
 
 /** state type */

packages/vrender-core/src/graphic/arc.ts

@@ -35,6 +35,7 @@ const ARC_UPDATE_TAG_KEY = [
   'cornerRadius',
   'padAngle',
   'padRadius',
+  'clipRange',
   'cap',
   ...GRAPHIC_UPDATE_TAG_KEY
 ];
@@ -146,15 +147,16 @@ export class Arc extends Graphic<IArcGraphicAttribute> implements IArc {
   getParsedAngle() {
     const arcTheme = this.getGraphicTheme();
     let { startAngle = arcTheme.startAngle, endAngle = arcTheme.endAngle } = this.attribute;
-    const { cap = arcTheme.cap } = this.attribute;
+    const { cap = arcTheme.cap, clipRange = arcTheme.clipRange } = this.attribute;
 
     const sign = endAngle - startAngle >= 0 ? 1 : -1;
-    const deltaAngle = endAngle - startAngle;
+    let deltaAngle = endAngle - startAngle;
+    deltaAngle *= Math.max(0, Math.min(clipRange, 1));
 
     startAngle = clampAngleByRadian(startAngle);
     endAngle = startAngle + deltaAngle;
 
-    if (cap && abs(deltaAngle) < pi2 - epsilon) {
+    if (cap && abs(deltaAngle) > epsilon && abs(deltaAngle) < pi2 - epsilon) {
       let startCap = 1;
       let endCap = 1;
       if ((cap as boolean[]).length) {

packages/vrender-core/src/graphic/config.ts

@@ -232,6 +232,7 @@ export const DefaultArcAttribute: Required<IArcGraphicAttribute> = {
   cornerRadius: 0,
   padRadius: 0,
   padAngle: 0,
+  clipRange: 1,
   cap: false,
   forceShowCap: false
 };

packages/vrender-core/src/interface/graphic/arc.ts

@@ -69,6 +69,10 @@ export type IArcAttribute = {
    * 当cap = true 并且 使用了渐变填充的时候，自动实现conical渐变，也就是环形的渐变
    */
   forceShowCap: boolean;
+  /**
+   * 按角度范围裁剪绘制比例，0 表示不绘制，1 表示完整绘制。
+   */
+  clipRange: number;
 };
 /**
  * 内部缓存，用于存储一些内部变量