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', // other mark specs animation: {     enter: {       type: 'growHeightIn',       duration: 2000 ,       options: (datum, element, params) => {         return { orient: 'negative' };       }     },     update: {       type: 'update',       duration: 2000 },     exit: {       type: 'fadeOut',       duration: 2000 },     state: {       duration: 500 }   } } interface IAnimate {   stop: () => this ;   pause: () => this ;   resume: () => this ;   run: ( config: IAnimationConfig | IAnimationConfig[] ) => IAnimateArranger;   runAnimationByState: ( animationState: string ) => IAnimateArranger;   stopAnimationByState: ( animationState: string ) => this ;   pauseAnimationByState: ( animationState: string ) => this ;   resumeAnimationByState: ( animationState: string ) => this ; }

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. const vGrammarView = new VGrammarView({ width : roseSpec.width, height : roseSpec.height, container : CHART_CONTAINER_DOM_ID, hover : true }); vGrammarView.parseSpec(roseSpec); vGrammarView.runAsync(); setTimeout( () => {   vGrammarView.updateSpec(radarSpec);   vGrammarView.runAsync({ morph : true }); }, 500 ); setTimeout( () => {   vGrammarView.updateSpec(funnelSpec);   vGrammarView.runAsync({ morph : true }); }, 2000 );

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.