动态流程图（Dynamic Diagrams）的制作工作介绍

Introduction：

我们用两张.gif格式动图来介绍一下从去年开始风靡与社交媒体的“动态流程图”技术。这样的动态效果给人眼前一亮的冲击，在技术和产品宣传的网页中越来越常见。不同于需要剪辑的PR制作，不同于后期特效的AE制作，只需要简单的网页拖动，即可完成。

这些动图，有一列专有名词，感兴趣的开发者可以自行搜索：

Dynamic Diagrams; Animated Diagrams; Motion Graphics; Motion path; Motion Flow;

Design Tools：

1.Canva

官网拥有详细的教程，只需三步就能完成自定义路径的动效。

2.Figma

配合强大的流程逻辑，Figma会展现出独特的动态设计美学

3.draw.io

不同于Visio，XMind和亿图，Draw.io能都完成绝大部分工作，并且连接线条可以动态化，最重要的是，这一切都是免费的，Draw.io触手可及的强大！

4.FLATICON

你是否在为图标（icon）和牌子（logo）的资源发愁，FLATICON正是为此量身定做。庞大的资源将帮助你完成天马行空的创造。

5.LottieFiles

独有的扁平化可爱设计，是LottieFiles独特的视觉传达，每个gif都是短小精悍的。

6.FLORA

你可曾见过用自然语言控制的智能画布？Flora结合了大语言模型和生图技术，让图片灵动起来。

Reference：

EP155: The Shopify Tech Stack - ByteByteGo Newsletter

MCP is going crazy viral right now

Here's The Secret How To Create These Animated Diagrams