# Remotion 中的图表
你可以通过使用常规 React 代码在 Remotion 中创建柱状图——可以使用 HTML 和 SVG，也可以使用 D3.js。
## 不得使用非 `useCurrentFrame()` 驱动的动画
禁用所有第三方库的动画。
它们会导致渲染过程中出现闪烁。
相反，应使用 `useCurrentFrame()` 来驱动所有动画。
## 柱状图动画
请参阅 [柱状图示例](assets/charts/bar-chart.tsx) 获取基本实现。
### 交错柱状图
你可以像这样对柱状图的高度进行动画处理并错开它们：
tsx
const STAGGER_DELAY = 5;
const frame = useCurrentFrame();
const {fps} = useVideoConfig();
const bars = data.map((item, i) => {
const delay = i * STAGGER_DELAY;
const height = spring({
frame,
fps,
delay,
config: {damping: 200},
});
return
;
});
## 饼图动画
使用 `stroke-dashoffset` 对扇区进行动画处理，从 12 点钟方向开始。
tsx
const frame = useCurrentFrame();
const {fps} = useVideoConfig();
const progress = interpolate(frame, [0, 100], [0, 1]);
const circumference = 2 * Math.PI * radius;
const segmentLength = (value / total) * circumference;
const offset = interpolate(progress, [0, 1], [segmentLength, 0]);
;
粤公网安备44030002003366号