如何用CSS动画实现图表动态加载 CSS动画逐步绘制数据线条展示

css动画通过stroke-dasharray和stroke-dashoffset实现图表线条动态绘制。1. 使用svg绘制图表路径；2. 通过stroke-dasharray定义虚线模式，stroke-dashoffset设置初始偏移；3. 利用css动画逐步改变stroke-dashoffset值，实现线条绘制效果；4. 通过javascript的gettotallength()精确计算路径长度，确保动画准确；5. 复杂图表中为每个路径分配独立class和动画，控制不同绘制速度；6. 使用ease-in-out等时间函数或结合数据动态调整动画，提升自然度。

CSS动画能让图表加载更生动，关键在于利用stroke-dasharray和stroke-dashoffset控制线条的绘制。简单来说，就是让线条一点一点“画”出来，给人一种数据动态增长的视觉效果。

解决方案：

1. SVG基础: 首先，你需要一个SVG图表。SVG是矢量图形，非常适合绘制线条和形状，而且可以方便地使用CSS控制。
2. stroke-dasharray和stroke-dashoffset: 这是实现动画的核心。stroke-dasharray定义了描边是实线还是虚线，以及虚线中实线和空白的长度。stroke-dashoffset定义了虚线起始位置的偏移量。
3. CSS动画: 通过改变stroke-dashoffset的值，可以控制线条的绘制进度。比如，初始时stroke-dashoffset等于线条的总长度，然后通过动画逐渐减小到0，这样线条就好像被逐渐绘制出来一样。

<svg width="200" height="100">
<path d="M10 90 L190 10" stroke="blue" stroke-width="2" fill="none" class="line" />
</svg>

.line {
stroke-dasharray: 200; /* 线条总长度 */
stroke-dashoffset: 200; /* 初始偏移量等于总长度 */
animation: dash 2s linear forwards; /* 动画，2秒内完成 */
}
@keyframes dash {
to {
stroke-dashoffset: 0; /* 最终偏移量为0，完成绘制 */
}
}

代码解释：path定义了一条从(10, 90)到(190, 10)的蓝色线条。stroke-dasharray: 200假设这条线的总长度是200（实际需要计算，后面会提到）。stroke-dashoffset: 200初始时将线条完全隐藏。animation定义了一个名为dash的动画，持续2秒，线性变化，并且在动画结束后保持最终状态。@keyframes dash定义了动画的具体过程，从stroke-dashoffset: 200到stroke-dashoffset: 0。

立即学习“前端免费学习笔记（深入）”；

如何精确计算SVG线条长度？

SVG线条的长度不是直接可知的，需要通过JavaScript来计算。可以使用getTotalLength()方法。

const path = document.querySelector('.line');
const length = path.getTotalLength();
path.style.strokeDasharray = length;
path.style.strokeDashoffset = length;

这段代码首先获取了.line元素，然后使用getTotalLength()获取线条的总长度，最后将这个长度赋值给stroke-dasharray和stroke-dashoffset。这样，无论线条的形状如何，都能精确地控制绘制过程。

如何在复杂图表中应用这种动画？

对于复杂的图表，比如包含多条线条或多个形状的图表，可以为每个元素分别应用动画。关键在于合理组织SVG结构，并为每个需要动画的元素设置唯一的class或id。

<svg width="200" height="100">
<path d="M10 90 L190 10" stroke="blue" stroke-width="2" fill="none" class="line1" />
<path d="M10 10 L190 90" stroke="red" stroke-width="2" fill="none" class="line2" />
</svg>

.line1 {
/* ... */
animation: dash1 2s linear forwards;
}
.line2 {
/* ... */
animation: dash2 1.5s linear forwards; /* 不同的动画时长 */
}
@keyframes dash1 {
to {
stroke-dashoffset: 0;
}
}
@keyframes dash2 {
to {
stroke-dashoffset: 0;
}
}

这段代码展示了如何为两条线条分别应用不同的动画。每条线条都有自己的class和对应的CSS规则，以及独立的动画名称和时长。通过调整动画的时长，可以控制每条线条的绘制速度，从而实现更丰富的视觉效果。

如何让动画更自然？

线性动画可能显得有些生硬。可以尝试使用不同的animation-timing-function，比如ease-in-out、cubic-bezier()等，来调整动画的速度曲线。

.line {
/* ... */
animation: dash 2s ease-in-out forwards; /* 使用ease-in-out */
}

或者，可以尝试结合JavaScript，根据数据的实际变化情况动态调整动画的时长和速度曲线。这样可以使动画更贴合数据的变化，从而更自然。例如，数据变化剧烈的部分，动画速度可以加快，而数据变化缓慢的部分，动画速度可以放慢。这需要对数据进行分析，并编写相应的JavaScript代码来控制CSS动画。