使用drawio画动图

draw.io（https://www.drawio.com/）在连接线的样式里选择“Flow Animation”可以让连接线有动画效果：

按照上图设置后，就会得到下面效果：

https://www.drawio.com/doc/faq/connector-animate

展开属性以查看更多“Flow Animation”动画设置。

Draw.io 支持把动画效果导出为 SVG 文件。

https://www.drawio.com/doc/faq/export-to-svg

导出动图时，重点看这两个选项：

• 大小：这里选择是否导出整个页面，还是绘图区域。
• 透明背景

我们实际使用时，更多的还是需要gif的图片，这个draw.io目前还不支持，需要我们中转下，推荐下面这个工具：

https://html5animationtogif.com/svg-to-gif

注意事项：

• 背景颜色或者透明背景需要选择下，避免背景干扰了元素颜色。
• gif动画的循环策略，持续时间，每秒帧数 需要按需配置。