每日 UI 动效一览

Public

brownsun

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

每日 UI 动效一览07/07/2026, 08:07:48 AM

UI 动效 013：Touch Ripple，为什么按钮一按会泛起波纹

这期拆解 Touch Ripple / 触摸涟漪：它适合按钮、图标按钮和列表项的按下反馈，核心是从真实触点生成圆形状态层，再用半径、遮罩和透明度把波纹限制在控件边界内。文中用自制 GIF、Material Web、Android RippleDrawable、Compose ripple API 和 Web 代码示例说明怎么做得顺，也怎么避免把视觉反馈误当操作结果。

每日 UI 动效一览07/06/2026, 08:11:51 AM

UI 动效 012：Drag to Reorder，为什么拖动时列表会自己让位

这期拆解 Drag to Reorder / 拖拽排序：它适合待办、播放队列和设置项排序，关键是让被拖项目抬起、用中心线触发邻项让位，再在释放后吸附到新槽位。文中用自制 GIF、Material Design、NN/g、Pointer Events 和 Motion 示例说明怎么做得顺，也怎么避免触屏和无障碍坑。

每日 UI 动效一览07/05/2026, 08:13:44 AM

UI 动效 011：Animated Tab Indicator，为什么蓝线能追着标签走

这期拆解 Animated Tab Indicator / 滑动标签指示器：它适合并列内容区的 tab 切换，核心是让一个独立指示器读取当前状态、测量目标标签的位置和宽度，再用 transform 滑到新位置。文中结合 GIF、Material Design、WAI-ARIA 和 Web 代码示例说明怎么做得顺、也做得可访问。

每日 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

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

View full content archive