# 搜索框打字（Search Bar Typing）

镜语 · 特效与转场 / 界面与信息卡

- 别名：搜索框、搜索动画、输入搜索、Search Animation
- 口语：「画面里出个搜索框，自己打字搜」「开头模拟搜索一个问题」
- 一句话：搜索框里逐字打出关键词，点搜索后结果落下
- 是什么：搜索框打字模拟在搜索栏里输入关键词：搜索框出现，关键词逐字打出，按下搜索后结果依次出现，常用来抛出本期要回答的问题
- 缺了就不像：搜索框里逐字打出关键词；按下搜索后出现结果
- 加了更像：闪烁光标；结果卡片依次落下
- 适合用在：知识视频开头抛问题；测评里「很多人搜」的引子；教程里演示搜索步骤
- 看哪里：看光标闪烁，关键词一个字一个字打进去，搜索按钮被按下缩一下，结果卡片才从上方落下
- 注意：不要伪造真实平台的搜索结果数据；关键词太长打字时间会拖
- 描述示例：做 Search Bar 搜索框打字动画：虚化背景上弹出白色圆角搜索框，红色光标闪烁，关键词「新手露营装备清单」逐字打出，右侧搜索按钮被按下，下方两张结果卡片依次从上方落下
- 易混：
  - [打字机](https://idea.ameng.dev/terms/typewriter.md)：打字机只做文字逐字出现；搜索框打字还包括搜索框、按钮和结果
- 相关：[手机样机录屏](https://idea.ameng.dev/terms/device-mockup.md)

## 来源与延伸阅读

- [Material Design 3 · Search](https://m3.material.io/components/search/overview)
- [GSAP · TextPlugin](https://gsap.com/docs/v3/Plugins/TextPlugin/)

网页版（含演示）：https://idea.ameng.dev/terms/search-bar