---
title: "动态图形案例：按视频要完成的事分类的 AI 辅助作品"
description: "按用途整理的动态图形案例：发布片、产品界面、动态文字、数据故事、讲解片和 Logo 揭示，每条都注明创作者。"
robots: "index, follow"
canonical: "https://potto.ai/zh/blog/motion-graphics-examples"
markdown: "https://potto.ai/zh/blog/motion-graphics-examples.md"
author: "Potto AI Team"
category: "Motion graphics"
datePublished: "2026-10-12T00:00:00.000Z"
language: "zh-CN"
dateModified: "2026-10-12T10:46:16.423Z"
---

# 动态图形案例：按视频要完成的事分类的 AI 辅助作品

最有用的动态图形案例，是按视频要完成的事来分，而不是按视觉风格来分：发布片、会动的产品界面、动态文字短片、数据故事、讲解片，或 Logo 揭示。每种用途有自己的时长、画幅和信息顺序，所以「好例子」只有对上类型才有用。本指南从 Potto 上的 [AI 动态图形视频](/videos) 资料库里选出 21 条动态图形案例，归进这六类用途，并列出每条的作者、时长、画幅，以及值得看什么。

先说一件事：**这些视频都不是 Potto 做的。** 它们由独立创作者制作并发布，下文用他们的 X 账号署名。Potto 把它们收在一起，方便你观看、阅读作者公开过的提示词，再从同一个想法开始做自己的视频。描述只用每条视频的标题及其页面上的信息（作者、分类、时长、画幅、工具），因为目的是帮你决定学什么，不是点评别人的作品。关于 Potto 自己的工具，只写它今天实际能做的事。

## 什么算动态图形

![六种动态图形：发布片、产品界面、动态字体、数据故事、解说片和标志揭示](https://potto.ai/blog/motion-graphics-examples/zh/motion-graphics-types.webp#1200x800)

动态图形是动起来的平面设计：文字、形状、图标、图表和图像通过运动来解释一件事、宣布一件事，或给品牌一个样子。Adobe 的动态图形指南把它们定义为「带有运动的图形」，并称为「较短的动画片段，用来娱乐或传递信息」，以区别于有角色、有情节的长篇动画电影。Wikipedia 关于 [动态图形设计](https://en.wikipedia.org/wiki/Motion_graphic_design) 的文章说，动态设计通常与让抽象物体、文字和其他平面设计元素运动起来联系在一起。

两份资料合在一起，点出了这类作品出现的地方：影视片头、播出与新闻图形、广告与品牌、动态字体、用户界面设计，以及讲解片和宣传片。那份清单按行业组织。本指南改按任务组织，因为做视频时要问的是「我想传达什么」，而不是「这属于哪个行业」。下面六种用途对应资料库使用的分类，覆盖企业和创作者大多数实际需要。

| 用途 | 它做什么 | 通常回答的问题 |
| --- | --- | --- |
| 发布 | 宣布一款产品或一次发布 | 有什么新东西，为什么值得在意？ |
| 产品界面 | 把界面做成动画 | 这个产品长什么样、怎么用？ |
| 动态文字 | 以移动的文字作为主画面 | 我该记住哪一句？ |
| 数据故事 | 让一个数字或一种趋势站住 | 变了什么，变了多少？ |
| 讲解 | 按步骤讲清一个想法 | 这是怎么运作的？ |
| Logo 动画 | 揭示一个品牌标志 | 这是谁做的？ |

## 这 21 条案例是怎么选的

资料库很大，而且还在增加，所以本指南不引用总数；页面上始终显示当前数字。挑选时用了四条筛选。每件作品必须有署名作者、记录在案的时长和画幅、可以播放的视频，以及能说明视频内容的标题。在每一种用途里，优先选时长、画幅和工具各不相同的作品，让你看到范围，而不是同一种做法反复出现。

看案例之前，有两件关于整个资料库的事值得知道。它们来自 2026-10-12 核对过的资料库记录，作品继续增加后数字会变：

- **大多数作品是 16:9。** 大约五分之四是 16:9，大约八分之一是 9:16，其余是 1:1。下面每一种用途都是同样的倾斜，这和人们观看的地方一致：网站、演示文稿和 X。
- **时长取决于用途。** 中位时长大约是：Logo 动画 9 秒，动态文字 15 秒，发布 30 秒，数据故事 35 秒，产品界面 36 秒，讲解 60 秒。各用途的中位数写在对应小节里。

这 21 件作品分节列在下面，每条都链到自己的页面，可以在那里播放。对每件作品，指南给出作者的 X 账号、时长、画幅、页面列出的工具，以及作者是否公开了提示词。「提示词已公开」是指作者把提示词发在该作品页面上，你可以先读再决定要不要沿用。

## 发布片案例

![发布视频示例：产品卡片滑入，以及钩子、功能、证明和 CTA 的时间线](https://potto.ai/blog/motion-graphics-examples/zh/launch-video-example.webp#1200x800)

发布片用来宣布一件事，并请观众记住一件东西：名字。在资料库的 [发布视频](/videos/launch) 里，中位时长是 30 秒，大约一半是 30 秒或更短。这一类的画幅分布也最宽，大约五分之一是给手机看的 9:16。

- **[Reddit marketing tool launch video](/videos/reddit-marketing-tool-launch-video)**，作者 @anthonyriera，52.8 秒，16:9。页面列出的工具是 Remotion，也就是 Potto 使用的同一套渲染器，因此它适合用来参考：用代码做的发布片，在接近一分钟时能装下什么。
- **[TypingMind showreel announces team features](/videos/typingmind-showreel-announces-team-features)**，作者 @ann_nnng，15.0 秒，16:9，基于 canvas，作者公开了提示词。标题点明了内容（团队功能）和形式（showreel）。
- **[CodePilot promo floats 17 model-provider logos](/videos/codepilot-promo-floats-model-provider-logos)**，作者 @op7418，50.0 秒，16:9。标题本身就是一份精确的简报：同一种视觉手法重复使用，17 个 Logo，时长 50 秒。

**值得看什么。** 把发布片静音播放一遍，记下产品名第一次出现的秒数。再数这部片子提出了多少条分开的主张。上面的例子指向一条在整个分类里都成立的规则：片子越短，主张越少。15 秒的片子承载一个想法和一个名字；50 秒的片子容得下一个问题、若干功能和一句收尾。

**用 Potto 借用这个做法。** Potto 的 [产品视频](/zh/product-video) 制作可以从一段描述或一个链接做出发布片。一份好用的简报会写明受众、时长和节拍：

> 为虚构的记账应用 Ledgerly 做一部发布片，30 秒，16:9。从用电子表格记账的问题开场，展示三项功能，以应用名和行动号召收尾。

## 产品界面案例

![产品界面动画示例：仪表盘按钮的缩放高亮，以及手机样机](https://potto.ai/blog/motion-graphics-examples/zh/product-screen-animation-example.webp#1200x800)

[产品界面](/videos/product-screens) 动画展示界面在做一件事：列表自己排好序，仪表盘逐渐填满，手机走完一条流程。这一类的中位时长是 36 秒，但中间一半的作品大约从 24 秒到 67 秒，所以它是六类里变化最大的。9:16 和 1:1 的例子在这里也最有用，因为应用流程常常放在手机上展示。

- **[Mac app onboarding sorts messages into one calm list](/videos/mac-app-onboarding-sorts-messages-into-one-calm-list)**，作者 @dhruvalgolakiya，13.4 秒，16:9。标题点明一次转变：许多消息变成一份列表，时长也刚好只够这件事。
- **[Write, approve, publish flow animates a post scheduler](/videos/write-approve-publish-flow-animates-a-post-scheduler)**，作者 @condzxyz，15.0 秒，16:9。标题就是结构：三个动词，按顺序。
- **[Dark sales dashboard with a pixel-grid revenue chart](/videos/dark-sales-dashboard-with-a-pixel-grid-revenue-chart)**，作者 @salungprastyo，33.1 秒，16:9，主视觉是一张收入图表。
- **[Phone mockup walks through a four-step networking app flow](/videos/phone-mockup-walks-through-a-four-step-networking-app-flow)**，作者 @astroboysoup，15.0 秒，9:16。竖屏里用 15 秒走完四步。
- **[Sixteen UI motion studies laid out in a four-by-four grid](/videos/sixteen-ui-motion-studies-laid-out-in-a-four-by-four-grid)**，作者 @charliejhills，8.0 秒，1:1，是这里唯一的方形例子：网格同时展示许多小动作，而不是一条大流程。

**值得看什么。** 停在第一帧出现界面的画面上，问观众应该看哪里。再看每种状态在屏幕上停留多久。产品界面动画失败，常常是因为眼睛还没找到变化，画面就已经换了。所以这里最短的例子只展示一次转变，较长的例子把状态分成步骤。

**用 Potto 借用这个做法。** [产品演示视频](/zh/product-demo-video) 从你上传的截图开始，每个项目最多八张图片、文档或音频文件。截图场景会放大并沿光标路径移动，每个场景可以带一条说明，所以常见简报就是一份步骤清单：

> 为虚构的开票应用做产品演示，30 秒，16:9。用我的三张截图：创建发票、发送发票、看到已付款。每张截图一条短说明，以应用名收尾。

## 动态文字案例

![动态字体示例：Write、Move 和 Ship 在视频画面中运动](https://potto.ai/blog/motion-graphics-examples/zh/kinetic-typography-example.webp#1200x800)

[动态文字](/videos/kinetic-type) 把运动中的文字当作主画面。在以文字为主的用途里，它最短：中位数大约 15 秒，大约十分之七的作品在 30 秒或以内。没有界面或图表来承载意思，文字本身就必须承担。

- **[Bold WAVE letters ripple in a 128 BPM kinetic-type reel](/videos/bold-wave-letters-ripple-in-a-bpm-kinetic-type-reel)**，作者 @kiyoshi_shin，15.0 秒，16:9。标题给出了速度，128 BPM，所以运动对着节拍。
- **[Showreel opens on a bold Decision title card](/videos/showreel-opens-on-a-bold-decision-title-card)**，作者 @kenn，15.0 秒，16:9，作者公开了提示词。这是一部字体 showreel，所以标题卡就是开场动作。
- **[Slanted credit names glide over an orange grid](/videos/slanted-credit-names-glide-over-an-orange-grid)**，作者 @goodside，75.0 秒，16:9，提示词已公开。在这个长度上，反复使用的手法是一份名单在同一背景上移动。
- **[Chapter-titled kinetic type reel on Indian civilization](/videos/chapter-titled-kinetic-type-reel-on-indian-civilization)**，作者 @rashem48，76.1 秒，16:9。章节标题把短片分成几段，较长的文字片就靠这个保持形状。

**值得看什么。** 静音，把它当文字读。动态文字应该作为文本成立：句子若站不住，运动也救不了。再打开声音，看每个词的时机是否跟着声音走。两条 15 秒的例子把运动系在标题卡或速度上；两条 75 秒的例子靠结构抓住注意力，分别是演职员名单和章节标题。

**用 Potto 借用这个做法。** Potto 的文字场景按提示入场，引言、标题和列表场景承载短句。它不提供自由形态的逐字动画，所以 128 BPM 的涟漪不在它渲染的范围内。它擅长的是一份短脚本，每一句占一屏：

> 动态文字视频，15 秒，16:9，Bold Pop 风格。五行短句，每屏一句，讲一个每周五交付的团队。结尾落在 “Ship it.” 这一句。

## 数据故事案例

数据故事让一个数字或一种趋势站住。在资料库的 [数据故事视频](/videos/data-story) 里，中位数大约 35 秒，跨度很大，从 15 秒到远超过一分钟。这一类是规模较小的分类之一，因此适合逐条细看。

- **[Agency reel shows +84% Google traffic for a client](/videos/agency-reel-shows-google-traffic-for-a-client)**，作者 @baptistelcx，77.8 秒，16:9。结果 +84% 就在标题里，所以视频有一个要走向的数字。
- **[LLM release timeline tracks 2026 models month by month](/videos/llm-release-timeline-tracks-models-month-by-month)**，作者 @nummanali，62.1 秒，16:9，基于 canvas，提示词已公开。页面描述的是一段 canvas 动画，按月份走过 2026 年，时间就是轴。
- **[Giant '148' over a wall of unanswered support tickets](/videos/giant-over-a-wall-of-unanswered-support-tickets)**，作者 @euboid，是这里最长的例子，114.0 秒，16:9。标题是一个巨大的数字，对着它所计数的东西。

**值得看什么。** 找出视频希望你记住的那一个数字，再看视频如何让它成立：它前面是什么，后面又展示了什么。三个例子用三种不同手法完成同一任务。一个直接给出结果，一个沿时间线走，一个把数字和它所衡量之物的画面放在一起。

**用 Potto 借用这个做法。** 统计场景展示一个单独的大数字，图表场景绘制柱状图或环形图，包含三到六个会向上计数的数值。如果你把数字写进简报，视频会按所写的来用，所以导出前请对照来源核对每一个数。[动态图表](/zh/animated-chart) 页面收集了更多这类作品：

> 数据故事，30 秒，16:9。一家虚构咖啡店的日均杯数从 6 月的 120 升到 9 月的 190。以问题开场，用柱状图展示这四个月，以 58% 的升幅收尾。

## 讲解片案例

讲解片按步骤教一个想法。它是六类里最长的：中位时长 60 秒，大约只有五分之一在 30 秒或以内。资料库的 [讲解视频](/videos/explainer) 处理方式也最宽，从像素画到手绘白板都有。

- **[Pixel-art neural network learning to read a handwritten 2](/videos/pixel-art-neural-network-learning-to-read-a-handwritten)**，作者 @DotCSV，56.0 秒，16:9。标题选了一个很小、很具体的任务，读一个数字，来代表一个大想法。
- **[Hand-drawn whiteboard walkthrough of Muse onboarding](/videos/hand-drawn-whiteboard-walkthrough-of-muse-onboarding)**，作者 @0xlangeai，56.0 秒，16:9，用 SVG 和 CSS 动画制作。白板的样子适合逐步演示。
- **[Kinetic word cloud pitches an AI inference startup](/videos/kinetic-word-cloud-pitches-an-ai-inference-startup)**，作者 @deedydas，26.0 秒，16:9，用 SVG 和 GSAP 制作，提示词已公开。它是这里最短的讲解片，把一次推介压缩进同一种运动手法。

**值得看什么。** 讲解片应该通过句子测试：看完一遍，你能不能用一句话讲出那个想法？留意问题转成解决方案的那一刻，并数从那一刻到结尾之间有几步。三个例子里有两个抓住一个小而具体的对象（一个数字、一条上手流程），让它承载整节课。

**用 Potto 借用这个做法。** 大多数讲解片背后的结构是问题、解决方案、如何运作、下一步。[什么是讲解视频](/zh/blog/what-is-an-explainer-video) 有详细说明，[12 个讲解视频案例](/zh/blog/explainer-video-examples) 则按场景顺序拆开。

Potto 的 [讲解视频](/zh/explainer-video) 制作可以从一个主题、一个链接或一份文档（例如 PDF）开始。它没有手绘或白板风格。内置的十二种风格是 Clean Modern、Midnight Tech、Editorial Paper、Bold Pop、Blueprint、Warm Organic、Neon Night、Soft Pastel、Mono Minimal、Sunset Gradient、Studio Noir 和 Fresh Mint。

## Logo 动画案例

Logo 揭示是最短的用途：资料库里的中位时长不到 9 秒，这里的例子从 8.7 秒到 21.0 秒。画面上只有一件东西可看，所以视频主要关乎时机和运动的形状。

- **[TypingMind logo reveal](/videos/typingmind-logo-reveal)**，作者 @tdinh_me，21.0 秒，16:9，提示词已公开。页面描述的是一次缓慢揭示，标志逐渐拼合。
- **[Clean white logo reveal for founder.page's launch video](/videos/clean-white-logo-reveal-for-founder-pages-launch-video)**，作者 @RatheeJaisal，20.0 秒，16:9，用 canvas 和 SVG 制作，提示词已公开。标题把它和一部发布片连在一起。
- **[Green dot morphs into the GLEA logo with elastic easing](/videos/green-dot-morphs-into-the-glea-logo-with-elastic-easing)**，作者 @mr_igor_sanz，8.7 秒，9:16，提示词已公开。运动写在标题里：一个点变成标志，使用弹性缓动。

**值得看什么。** 看最后一帧。Logo 揭示要成功，最终的标志必须干净、居中，并停留足够长的时间让人认出来；在此之前的运动，则给标志它的个性。8.7 秒的例子说明，单一运动（一个形状变成另一个）能做多少事。

**用 Potto 借用这个做法。** Potto 的结尾行动号召场景可以把视频结束在你的 Logo 上，资料库里的 [Logo 动画](/videos/logo-animation) 分类是研究独立揭示的地方。Potto 从固定的一组场景类型和风格渲染，没有自定义动画代码，所以上面那种弹性变形的特定缓动曲线，是用来研究的，而不是用来原样复制的。

## 做你自己的版本

要做出这类视频，有三条路。自己写代码，让编程代理来写，或把视频描述给一个替你渲染的工具。

资料库里许多创作者用代码制作。[Remotion](https://www.remotion.dev/docs/ai/skills) 是 Potto 使用的渲染器，它把自己描述为用 React 制作视频和动态图形的方法，并发布代理技能，让编程代理可以配合它工作。Potto 的 [技能](/skills) 页面收集第三方作者提供的免费代理技能，你可以安装到能读取 SKILL.md 文件的代理里；它们在你自己的代理、用你自己的模型运行。

Anthropic 的 Claude Motion 于 2026 年 10 月 8 日宣布，截至 2026-10-12，在 Team 和 Enterprise 计划上处于 beta。它根据提示词把文字、图表、形状和图像做成动画，并导出 MP4。**Potto 不是 Claude Motion，与 Anthropic 也没有官方关系。** [Claude Motion 的替代方案](/zh/blog/claude-motion-alternative) 一文用可以核对的事实比较这几条路。

描述这条路是 Potto 的 [AI 动画](/zh/ai-motion-graphics) 工具。你给它一段提示词、一个公开链接或一份文档。Claude Opus 5.5 撰写简报、脚本和分镜，Remotion 把场景渲染成带旁白、字幕和音乐的 MP4，画幅为 16:9、9:16 或 1:1。你可以逐屏编辑分镜，或在对话里要求修改。在资料库页面上，公开了提示词的视频有一个「使用这条提示词」按钮，会把它送到 Potto 视频创作。结果是 Potto 自己的版本，有它自己的场景类型和风格，所以不会与原片一致；把原片当作想法、节奏和外观的参考。

预览和分镜不收费；导出时才扣积分，确认前会显示总额（见 [Potto AI 价格](/zh/pricing)）。Potto 不生成实拍画面、虚拟形象或人物，也不剪辑你已经有的视频。

## 常见问题

### 动态图形有哪些类型？

动态图形的类型通常按出现的地方来分：影视片头、播出与新闻图形、广告与品牌、动态字体、用户界面动画，以及讲解片或宣传片。本指南改按用途来分：发布片、产品界面、动态文字、数据故事、讲解片和 Logo 动画。Wikipedia 关于动态图形设计的文章还区分讲解型、情绪型和宣传型图形，依据是目的在于说清、唤起感受，还是提高认知。

### 什么算动态图形？

动态图形是动画化的平面设计：把文字、形状、图标、图表和图像设为运动，用来告知、推广或建立品牌。Adobe 把它们定义为「带有运动的图形」，并描述为较短的动画片段，用来娱乐或传递信息。把产品截图、柱状图或 Logo 做成动画的视频，是动态图形。有角色、有情节的长篇动画电影，通常称为动画。

### 动态图形和动画有什么区别？

动态图形移动的是平面设计元素，例如文字、形状和图表，通常在短片里传达信息；动画则更宽泛地用角色和情节讲故事。两者有重叠，所以分界更多在于目的和规模，而不是技法。Adobe 的指南按长度和目的划线：动态图形是较短的片段，用来娱乐或传递信息。

### 动态图形视频应该多长？

取决于用途。在截至 2026-10-12 的 Potto 资料库里，中位时长大约是：Logo 动画 9 秒，动态文字 15 秒，发布视频 30 秒，数据故事 35 秒，产品界面 36 秒，讲解片 60 秒。时长要和想法的数量相配：一个想法适合 15 秒，一个问题、三项功能和一句收尾适合 30 到 45 秒。Potto 的时长选项是 15、30、45、60 和 90 秒。

### 本指南里的视频是用 Potto 做的吗？

不是。它们由独立创作者制作，每条都以作者的 X 账号署名。Potto 不把它们当作自己的作品。它们作为参考收录，每件作品的页面会在有原文时链到原始帖子。

### 我能用 Potto 做出这样的动态图形吗？

可以，限于 Potto 提供的那几类动态图形：发布片、产品界面、以文字为主的视频、数据故事和讲解片，由它的十一种场景类型、十二种风格和你自己的品牌色构成。Potto 根据你的提示词渲染自己的版本，所以结果不会复制原片，也不支持自定义动画代码、手绘风格或自由形态的逐字动画。

## 来源

所有页面均于 2026-10-12 查询。

- Adobe，「What Is Motion Graphics? A Complete Guide」（定义「带有运动的图形」、「较短的动画片段，用来娱乐或传递信息」，以及用途）：[https://www.adobe.com/uk/creativecloud/animation/discover/motion-graphics.html](https://www.adobe.com/uk/creativecloud/animation/discover/motion-graphics.html)（查询于 2026-10-12）
- Wikipedia，「Motion graphic design」（定义、应用，以及讲解型、情绪型和宣传型图形）：[https://en.wikipedia.org/wiki/Motion_graphic_design](https://en.wikipedia.org/wiki/Motion_graphic_design)（查询于 2026-10-12）
- Remotion，代理技能文档（技能覆盖什么、如何安装）：[https://www.remotion.dev/docs/ai/skills](https://www.remotion.dev/docs/ai/skills)（查询于 2026-10-12）
- Remotion 主页（「用 React 制作视频和动态图形」）：[https://www.remotion.dev/](https://www.remotion.dev/)（查询于 2026-10-12）
- Anthropic，「Dashboards and Motion」（Claude Motion，发布于 2026 年 10 月 8 日；Team 与 Enterprise 上的 beta；MP4 下载）：[https://claude.com/resources/articles/dashboards-and-motion](https://claude.com/resources/articles/dashboards-and-motion)（查询于 2026-10-12）
- Potto AI 上这 21 件作品的页面，及其作者、时长、画幅和已公开的提示词，以及资料库各分类的中位数（核对于 2026-10-12）