How to do global animation in React?

[mengxi-ream]

I tried global animation in this project: https://visualgallery.mengxi.work/chart/global-animation

this is what exactly I want: https://visactor.io/vchart/demo/storytelling/bar-to-pie

codebase: https://github.com/mengxi-ream/visual-gallery/blob/main/pages/chart/components/global-animation.tsx

However, I am not sure how to properly utilize registerMorph and updateSpec in React. I attempted to implement them, but encountered bugs, as demonstrated in the link provided earlier.

Here is my code:

"use client";

import { VChart } from "@visactor/react-vchart";
import { IPieChartSpec, registerMorph } from "@visactor/vchart";
import { useTheme } from "nextra-theme-docs";
import { useState, useEffect } from "react";

const pieSpec: IPieChartSpec = {
  type: "pie",
  data: [
    {
      values: [
        { type: "1", value: Math.random() },
        { type: "2", value: Math.random() },
        { type: "3", value: Math.random() },
      ],
    },
  ],
  outerRadius: 0.8,
  innerRadius: 0.6,
  valueField: "value",
  categoryField: "type",
  tooltip: {
    visible: false,
  },
};

const barSpec = Object.assign({}, pieSpec, {
  type: "bar",
  xField: "type",
  yField: "value",
  seriesField: "type",
});

const specs = [pieSpec, barSpec];

export default function GlobalAnimation() {
  const { theme } = useTheme();
  console.log("theme", theme);
  const [specIndex, setSpecIndex] = useState(0);

  useEffect(() => {
    registerMorph();
    setInterval(() => {
      setSpecIndex((specIndex + 1) % specs.length);
    }, 2000);
  }, [specIndex]);

  return <VChart spec={specs[specIndex]} />;
}

To reproduce:

1. clone the project git clone https://github.com/mengxi-ream/visual-gallery.git
2. pnpm i
3. pnpm dev

[xile611]

@mengxi-ream the morphing animaiton of chart has been disabled

because there are too many useless update in react-vchart

[mengxi-ream]

@mengxi-ream the morphing animaiton of chart has been disabled

because there are too many useless update in react-vchart

Does this mean in version 1.12.6 I just need to write something like <VChart spec={spec} morphConfig: {morph: true} /> to turn morphing animation on?

[xile611]

@mengxi-ream the morphing animaiton of chart has been disabled

because there are too many useless update in react-vchart

Does this mean in version 1.12.6 I just need to write something like <VChart spec={spec} morphConfig: {morph: true} /> to turn morphing animation on?

yes

[mengxi-ream]

@mengxi-ream the morphing animaiton of chart has been disabled

because there are too many useless update in react-vchart

Does this mean in version 1.12.6 I just need to write something like <VChart spec={spec} morphConfig: {morph: true} /> to turn morphing animation on?

yes

look forward to trying version 1.12.6. 😍