How to do global animation in React? #3219
Description
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
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:
- clone the project
git clone https://github.com/mengxi-ream/visual-gallery.git pnpm ipnpm dev