VisActor Animation Implementation Principles

Introduction: A vivid visualization often relies on animation to help users understand underlying data insights, transforming complex data into comprehensible visual forms.

Complex Animation: Discusses why a unified animation implementation is lacking in chart libraries, identifying two elements: animation effect (how graphic elements render change) and animation orchestration (combining atomic effects into smooth animation).

Animation Design: Begins with grammar of graphics background, then defines animation as a rendering-stage decoration that works with visual channels; describes animation trigger timing (enter, exit, update, state, any time) and distinguishes active vs passive declaration.

Animation Basic Units: Explains the hierarchy of animation configuration: animation unit (Aunit) comprising mark, timeline, partitioner, sort; timeline includes timeslice, startTime, duration, loop; timeslice includes effect, duration, delay, OneByOne; effect includes channel and easing.

Code Example: Shows a configuration for a rectangular mark with enter, update, exit, state animations, and an IAnimate interface for controlling animations.

{
  type: 'rect',
  <span style="color: #5c6370; font-style: italic; line-height: 26px">// other mark specs</span>
  animation: {
    enter: {
      type: 'growHeightIn',
      duration: <span style="color: #d19a66; line-height: 26px">2000</span>,
      options: (datum, element, params) => {
        return { orient: 'negative' };
      }
    },
    update: {
      type: 'update',
      duration: <span style="color: #d19a66; line-height: 26px">2000</span>
    },
    exit: {
      type: 'fadeOut',
      duration: <span style="color: #d19a66; line-height: 26px">2000</span>
    },
    state: {
      duration: <span style="color: #d19a66; line-height: 26px">500</span>
    }
  }
}

<span style="color: #c678dd; line-height: 26px">interface</span> IAnimate {
  stop: <span style="line-height: 26px"><span style="line-height: 26px">()</span> =></span> <span style="color: #c678dd; line-height: 26px">this</span>;
  pause: <span style="line-height: 26px"><span style="line-height: 26px">()</span> =></span> <span style="color: #c678dd; line-height: 26px">this</span>;
  resume: <span style="line-height: 26px"><span style="line-height: 26px">()</span> =></span> <span style="color: #c678dd; line-height: 26px">this</span>;
  run: <span style="line-height: 26px">(<span style="line-height: 26px">config: IAnimationConfig | IAnimationConfig[]</span>) =></span> IAnimateArranger;
  runAnimationByState: <span style="line-height: 26px">(<span style="line-height: 26px">animationState: <span style="color: #e6c07b; line-height: 26px">string</span></span>) =></span> IAnimateArranger;
  stopAnimationByState: <span style="line-height: 26px">(<span style="line-height: 26px">animationState: <span style="color: #e6c07b; line-height: 26px">string</span></span>) =></span> <span style="color: #c678dd; line-height: 26px">this</span>;
  pauseAnimationByState: <span style="line-height: 26px">(<span style="line-height: 26px">animationState: <span style="color: #e6c07b; line-height: 26px">string</span></span>) =></span> <span style="color: #c678dd; line-height: 26px">this</span>;
  resumeAnimationByState: <span style="line-height: 26px">(<span style="line-height: 26px">animationState: <span style="color: #e6c07b; line-height: 26px">string</span></span>) =></span> <span style="color: #c678dd; line-height: 26px">this</span>;
}

Global Morphing Animation: Describes shape transition between chart types (e.g., bar to pie) using global morphing, with properties mark.morph, mark.morphKey, mark.morphElementKey, and a code snippet demonstrating morphing via updateSpec.

<span style="color: #c678dd; line-height: 26px">const</span> vGrammarView = <span style="color: #c678dd; line-height: 26px">new</span> VGrammarView({
  <span style="color: #d19a66; line-height: 26px">width</span>: roseSpec.width,
  <span style="color: #d19a66; line-height: 26px">height</span>: roseSpec.height,
  <span style="color: #d19a66; line-height: 26px">container</span>: CHART_CONTAINER_DOM_ID,
  <span style="color: #d19a66; line-height: 26px">hover</span>: <span style="color: #56b6c2; line-height: 26px">true</span>
});
vGrammarView.parseSpec(roseSpec);

vGrammarView.runAsync();

setTimeout(<span style="line-height: 26px"><span style="line-height: 26px">()</span> =></span> {
  vGrammarView.updateSpec(radarSpec);
  vGrammarView.runAsync({ <span style="color: #d19a66; line-height: 26px">morph</span>: <span style="color: #56b6c2; line-height: 26px">true</span> });
}, <span style="color: #d19a66; line-height: 26px">500</span>);

setTimeout(<span style="line-height: 26px"><span style="line-height: 26px">()</span> =></span> {
  vGrammarView.updateSpec(funnelSpec);
  vGrammarView.runAsync({ <span style="color: #d19a66; line-height: 26px">morph</span>: <span style="color: #56b6c2; line-height: 26px">true</span> });
}, <span style="color: #d19a66; line-height: 26px">2000</span>);

Bezier Curves: Explains that global morphing relies on converting graphic edges to Bézier curves, covering basic formula, convex hull property, and curve subdivision.

One-to-One, One-to-Many, Many-to-One Transformations: Details the animation flow for shape morphing, including control point alignment, pairing via target function, interpolation, and strategies for splitting and merging shapes.

Demo Demonstrations: Lists various demos showing title/axis/bar animation, timeline narration via Glyph, VChart morphing between bar and pie, dynamic comparative bar chart, etc., with links.

About Us: Provides channels for community engagement: WeChat subscription, Discord, official website, GitHub.