每日 UI 动效一览

Public

brownsun

每日一张图片笔记，带你认识一个 UI 动效：叫什么、怎么用、长什么样

每日 UI 动效一览07/04/2026, 08:10:39 AM

UI 动效 010：Accordion Expand，为什么内容能顺着高度展开

这期拆解 Accordion Expand / 折叠展开：它适合 FAQ、设置页和详情分组，核心是先测量内容高度，再用裁切、缓动和内容淡入把隐藏面板顺着标题展开。文中用自制 GIF、WAI-ARIA 语义要求和 Web 代码示例说明怎么做得顺、也做得可访问。

每日 UI 动效一览07/03/2026, 08:11:01 AM

UI 动效 009：Shared Element Transition，为什么缩略图能长成详情页

这期拆解 Shared Element Transition / 共享元素转场：它适合卡片、缩略图、搜索框进入详情页的场景，核心是保留一个共享的视觉锚点，再用位置、尺寸、圆角和内容淡入淡出完成过渡。文中用自制 GIF、Web View Transition API、FLIP 思路和 Compose 示例说明怎么让它动起来。

每日 UI 动效一览07/02/2026, 08:15:11 AM

UI 动效 008：Swipe Actions，为什么列表项一滑就露出按钮

这期拆解 Swipe Actions / 滑动操作：它适合邮件、待办、收藏列表里的归档、删除等上下文动作，核心是把动作区放在底层，让内容层跟随手势水平位移，并用阈值和速度决定吸附还是回弹。文中用自制 GIF 和 Web 伪代码说明实现方式。

每日 UI 动效一览07/01/2026, 08:11:31 AM

UI 动效 007：Skeleton Shimmer，为什么灰色占位条会扫一下

这期拆解 Skeleton Shimmer / 骨架屏扫光：它适合页面结构已确定但数据还没返回的场景，关键是先画出接近真实内容的占位骨架，再用渐变扫光和内容淡入降低等待感。文中用自制 GIF 与 CSS 示例说明怎么让灰色占位条动起来。

每日 UI 动效一览06/30/2026, 08:11:20 AM

UI 动效 006：Pull to Refresh，为什么往下拖一下就能刷新

这期拆解 Pull to Refresh / 下拉刷新：它适合会持续更新的列表，关键是边界检测、拖动阈值、刷新中状态和回位动画。文中用自制 GIF 与 JS 伪代码说明怎么把手势距离变成可控的刷新反馈。

每日 UI 动效一览06/29/2026, 08:15:42 AM

UI 动效 005：Wheel Picker，为什么一列选项像滚筒一样转

这期拆解 Wheel Picker / 滚轮选择器：它适合日期、时间、身高等连续离散值选择，核心是中心吸附、圆柱透视和释放后的惯性对齐。文中用自制 GIF 和 Web 伪代码说明怎么做出滚轮感。

每日 UI 动效一览06/26/2026, 08:09:50 AM

UI 动效 004：Rubber Band，拖到边界为什么会「弹」回来

这期拆解 Rubber Band / Elastic Overscroll 回弹边界动效：它适合列表、抽屉和拖拽面板的边界反馈，关键是先压缩越界位移，再用带速度的 spring 回到 0。

每日 UI 动效一览06/25/2026, 04:29:29 PM

UI 动效 003：Slot Machine，数字为什么要像滚轮一样翻过去

这期拆解 Slot Machine 数字滚轮动效：它适合金额、积分、抽奖结果等数值变化场景，核心实现是固定遮罩窗口、移动数字长条，并用先快后慢的节奏吸附到目标值。

每日 UI 动效一览06/25/2026, 08:10:40 AM

认识淡入换场：它适合无强关联的页面切换，用先淡出、再淡入的节奏，让导航变化更柔和。

每日 UI 动效一览06/24/2026, 11:58:04 AM

认识共享元素转场：它如何把卡片、列表项或图片自然带入详情页，并让用户清楚感到页面跳转的来处。

No more Posts

View full content archive