做移动端交互设计的朋友，大概都绕不开“底部弹出”这个动作。它就像是界面里的一个标准语气词，不管是筛选面板、评论列表、分享菜单还是详情卡片，只要需要从屏幕边缘“拎”出一块内容，十有八九都是它。我做了几年交互原型，真正让我把动效这件事搞明白的，反而不是什么炫技的转场，就是这个最朴素的底部弹出——因为它把位移、缓动、手势、遮罩、多状态这几件事全凑齐了，一个参数没调好，用户手指一按就能感觉到“这个东西不对劲”。这篇就聊 Flinto 里怎么把底部弹出做得像那么回事：从场景价值、参数拆解，到在软件里一步步搭出可交互的原型，再到真机上一遍遍调手感的细节。适合刚接触动效原型的设计新手，也适合做了几年但一直被“感觉差一点点”折磨的同行，我会把每一步背后的判断逻辑都讲清楚，让你以后不只是在抄参数。
1. 先把“底部弹出”当成一个系统设计问题
1.1 为什么这个交互值得单独练一遍
底部弹出之所以值得反复练，是因为它是一个多属性同时变化的动效样本。表面看它只是“一块面板从下方升起来”，但实际上同一时刻至少有四件事在发生：面板在纵向位移、背后遮罩在改变透明度、面板顶部的圆角在视觉上从“贴边”变成“悬浮”、内部内容（比如列表）可能需要跟着做延迟入场或者保持静止。这四件事的时间曲线如果没对齐，人眼立刻就能察觉到“散”——尤其是遮罩和面板的时间关系，遮罩走快了面板像被硬塞进来，遮罩走慢了会有种“先黑后白”的割裂感。
另一点让它值得练的原因，是它高度依赖手势的连续性。点击触发的动效只要时间曲线对就行，拖拽触发的动效还要处理“跟随”和“释放”两个阶段：手指往下拽的时候面板要跟手，松手的时候要根据位移和速度决定是回弹还是收起。这套逻辑在任何一个成熟 App 里都有，但在原型工具里做出来，需要你把“手势”和“转场”这两套机制接起来理解。练通一次，以后做抽屉、做展开卡片、做下拉刷新，思路是通用的。
我在带新人的时候，第一个让他们临摹的动效就是底部弹出，而且要求他们不用参考任何现成文件，全靠自己调参数把一个弹层做到“手指按下去不别扭”。大部分人第一版都做得出来——能弹出、能收起——但十个里有八个是“生硬”的，问题几乎都出在时长的量级和缓动曲线的选择上，而不是软件操作不会。
1.2 Flinto 在这类动效上的能力边界与选型逻辑
说清楚 Flinto 能干什么、不能干什么，比直接上手更重要，因为你会少走很多“跟工具较劲”的弯路。Flinto 的定位是高保真交互原型，它不是动画软件，也不是可以直接交付开发的成品工具，它的价值在于用近似真机的触感去验证交互逻辑。做底部弹出，它的几个机制是核心：
- 画板（Screen / Layer）：承载状态，弹出前是一个状态，弹出后是另一个状态，两者的差异由转场来补间。
- Behavior（行为）：可复用的交互模块，比如把“点击遮罩关闭”“下滑收起”这类逻辑抽成一个组件，多个画板里都能引用，改一处全改。
- Transition（转场）：定义两个状态之间的图层如何变化，可以针对单个图层勾选位移、透明度、缩放，并给不同的时长和曲线。
- 手势触发：支持拖拽，能配置方向、距离阈值和速度阈值，还能直接接反向转场。
- 真机预览：这是它最有价值的部分，手感的东西在电脑上永远判不准，必须在手上滑一遍。
反过来，它的边界也很明确：它不做逐帧动画，没法做特别夸张的形变（比如那种弹簧抖动的物理效果，只能近似模拟，做不出真正的物理引擎回弹）；图层一多，预览就会掉帧，你就会误以为是自己的动效设计有问题，其实是性能扛不住。所以我的选型判断是：如果你的目标是验证“这个弹出该多快、该跟手到什么程度、多状态怎么切”，Flinto 是合适的；如果你要做的是带复杂粒子、形变、3D 的展示型动画，那该换工具，别硬塞。
注意：不同版本的菜单命名会有差别，下文提到的面板名称以常见布局为准，找不到对应项时按功能语义去找，不要死抠字面。
1.3 拆解视角：一次弹出到底有几个同时在动的东西
我在动手前习惯先画一张“变化清单”，把这次弹层里所有会动的元素列出来，标注它是“必须动”还是“可以不动”。这个习惯是从踩坑里来的——早年我做弹层，只顾着让面板位移，结果真机预览时发现遮罩是硬切的黑，面板边缘在暗色背景上像贴了一张纸，特别假。后来才明白，遮罩是底部弹出这件事里权重仅次于位移的元素。
我通常按这个顺序清点：
| 元素 | 是否必动 | 常见处理 | 容易忽略的点 |
|---|---|---|---|
| 弹层面板 | 必动 | 纵向位移，从屏幕外到目标位置 | 起始位置要完全在屏幕外，否则会出现“露出一个边” |
| 遮罩层 | 必动 | 透明度 0 到 0.4~0.6 | 遮罩的时长通常要略短于面板，或曲线更“快进慢出” |
| 面板顶部圆角 | 建议动 | 从 0 到 12~20 的视觉过渡 | 圆角做静态也能接受，但悬浮感会弱 |
| 内部内容 | 看情况 | 延迟 40~80ms 淡入，避免跟着面板一起“糊”上来 | 内容跟面板同速会显得整个块很重 |
| 底部安全区 | 必动 | 跟随面板一起位移 | 忘了它，内容会被系统手势条压住 |
| 背景内容 | 可选 | 轻微缩放或变暗 | 别做太狠，超过 5% 的缩放会晕 |
这张表列完，你会发现“底部弹出”其实是一个 4 到 6 个图层协同的小系统。把每个图层的时间曲线单独想清楚，再统一对齐，比开软件一边拖一边猜要快得多。我一般会在纸上先写三行：面板 320ms、遮罩 240ms、内容延迟 60ms 淡入 200ms，然后进软件照着填，改也是在数字上改，而不是凭感觉拖滑块。
2. 参数先行：把“手感”翻译成可执行的数字
2.1 位移距离与画板高度的换算
新手最容易犯的错，是直接给面板一个“大概移动 500 像素”的位移值。问题是不同手机尺寸不一样，你在 375 宽的画板上调好的值，换到 414 宽的设备上，面板的显示高度就变了，顶部的目标位置会跑偏。正确的做法是把位移换算成画板高度的百分比。
假设画板高度是 H，弹层展开后占据屏幕的比例是 70%，那么面板高度就是 0.7H，它要移动到屏幕底部对齐，起始位置应该在屏幕下方完全不可见的位置，也就是位移距离等于面板高度本身（0.7H）再加上一点保险量。保险量的意义在于避免阴影或者圆角在边界处露出来，一般取 20~40 像素。
以 iPhone 常见画板 375×812 为例，取 70% 展开：
- 面板高度 = 812 × 0.7 ≈ 568
- 位移距离 = 568 + 30 ≈ 598
- 面板顶部的最终位置 = 812 − 568 = 244（从画板顶部算）
这套换算的好处是，当你把展开比例从 70% 改成 85% 的时候，位移距离会自动跟着变，你只要改一个比例值。我在做多设备适配的时候，会把比例和画板高度做成一张参数字典记在笔记里，换画板就查表，比反复试数快得多。另外提醒一句：面板高度不要拍脑袋定，它得由内容决定——内容少的时候 40%~50% 就够，超过 6 行的列表才考虑 70% 以上，全屏级的内容才用 90%。超过 90% 就不叫底部弹出了，那是新页面，交互语义会变，用户的“返回”预期也会跟着变。
2.2 时长与缓动的配套关系
时长这件事，我总结了一条经验线：位移距离越大，时长可以长一点，但上限压在 400ms 以内。因为人对“响应用手”这件事的心理容忍阈值大概在 300ms 上下，超过 400ms 就会被感知为“慢”。底部弹层的常规区间是 280~350ms，取中间值 320ms 是最稳的起手参数。
缓动曲线的选择比时长更影响体感。这里有个类比：位移是“走多远”，缓动是“走路时的加减速方式”。人推开门的时候是先快后慢的，所以进入类动效统一用减速曲线（ease-out 系列），绝不会用 ease-in——先慢后快会让人觉得东西是被弹射出来的，非常廉价。
我常用的几组曲线，实测下来的观感差异挺明显：
| 曲线类型 | 近似参数（cubic-bezier） | 观感 | 适用场景 |
|---|---|---|---|
| 轻柔减速 | (0.25, 0.1, 0.25, 1) | 平滑、偏软，收尾拖一点 | 大面板、内容型弹层 |
| 强调减速 | (0.05, 0.7, 0.1, 1) | 起步快、收尾利落 | 小面板、菜单类弹层 |
| 标准曲线 | (0.4, 0, 0.2, 1) | 中性，两端都有加减速 | 通用兜底 |
| 偏硬减速 | (0.2, 0, 0, 1) | 极快起步，像被吸住 | 高度大的全屏弹层 |
如果软件里只提供预设曲线（Ease In / Ease Out / Ease In Out / Linear），优先选 Ease Out；有自定义贝塞尔的入口就填上面这些值。我个人的默认是“轻柔减速 + 320ms”，因为它对内容型弹层最宽容，哪怕你的内容布局有点小问题，动效的柔和感也能兜住一部分。
同期还要给遮罩配曲线。遮罩只改透明度，行距短，240ms 配标准曲线就够。这里有个细节：遮罩的结束时间应该和面板的结束时间大致对齐，但开始要稍早一点点，视觉上才有“背景先暗下来，面板再升上来”的层次感。我一般设遮罩 0ms 开始、240ms 结束，面板 20ms 开始、320ms 结束，两个都收在 300ms 左右，眼睛看着就是一起完成的。
2.3 拖拽跟随与释放阈值的计算
拖拽这件事，跟点击触发完全是两套逻辑。点击触发只需要一个时间曲线，拖拽要处理三段：按下跟随、拖动跟手、松手决策。
跟随阶段的手感关键在于“跟手系数”。理想的跟手是 1:1，手指往下移 100 像素，面板就往下走 100 像素。有些设计会故意做成 0.6 或者 0.8，制造一种“有阻力”的厚重感，但底部弹层不建议这么做，因为它是个高频、功能性的组件，过度设计反而误事。我在 Flinto 里做跟随的方式是给面板挂一个拖拽行为，方向和位移绑定，让位移直接跟随手指。
真正需要算的是释放阈值。用户在拖到一半时松手，面板应该回弹还是收起？判断依据有两个维度：位移和速度。
- 位移阈值：一般取面板高度的 30%。70% 高的面板，往下拖超过面板高度的 30%（约屏幕高度的 21%），松手就收起。
- 速度阈值：快速下滑（比如 500 像素/秒以上）时，即使位移没到 30% 也应该收起，因为用户表达了“我要关掉”的意图。
这两个条件是“或”的关系：满足任意一个就收起。反过来，慢速拖动且没超过位移阈值，就回弹到原位。这套逻辑在成熟产品里是标配，你在原型工具里做的时候，如果软件只支持单一阈值判断，就优先配位移阈值，速度判断用“短距离快滑也能触发”来近似——具体做法是把触发距离调小一点，比如降到 20%，让快速滑动的小位移也能落进触发区间。
提示：拖拽方向和内容滚动会打架。如果你的弹层里有可滚动的列表，一定要先把滚动手势排除在拖拽热区之外，否则用户想滑列表，结果把弹层拖下去了，这是最影响体验的一类问题。
2.4 遮罩的透明度曲线与点击热区
遮罩透明度终值的选择有个平衡点：太浅（0.2 以下）背景内容太亮，视觉焦点不集中；太深（0.7 以上）会有压迫感，像弹出了一个阻断式对话框。0.4 到 0.5 是最舒服的区间，内容型弹层偏 0.4，需要强聚焦的（比如确认类）偏 0.5。
曲线方面，遮罩不要用 Linear，线性变化在暗色区域会显得“灰得很均匀、没有呼吸感”。用减速曲线，开头变化快、结尾慢慢收，眼睛会觉得暗度是“沉下去”的而不是“刷上去”的。
点击热区要单独说一句。遮罩既要能点，又不能抢了面板的点击。做法是遮罩只覆盖面板以外的区域，或者遮罩铺满全屏但放在面板图层下方，靠层级顺序保证面板优先响应。我见过有人在遮罩上直接铺满全屏还放在最上层，结果面板里的按钮全都点不动，排查了半天以为是软件 Bug。另外遮罩的点击动效要配“反向转场”，不能直接跳回上一个状态，否则关闭的时候面板是“啪”一下消失的，和打开时的顺滑完全不对等。
3. 在 Flinto 里从零搭一个底部弹出原型
3.1 图层结构搭建与命名规范
动手第一步永远是把图层结构搭干净。我见过太多原型文件，打开一看图层列表里一堆“Rectangle Copy 12”“Group 8”，改个位置要找半天。底部弹出这个场景，图层其实不多，我固定用这套结构：
Screen: Home ├── Content_Background 背景内容 ├── Mask 遮罩层（初始 opacity 0） ├── Sheet 弹层容器 │ ├── Sheet_Container 承载圆角与背景的底板 │ ├── Header 标题 + 关闭按钮 │ ├── List 内容列表（可滚动） │ └── Safe_Area_Bottom 底部安全区占位 └── Trigger_Button 触发按钮（初始状态可见）几个关键约定：遮罩和弹层必须放在同一个屏幕里，不要做成两个画板，否则转场会很别扭；弹层容器要单独设圆角且开启裁剪，避免内部内容溢出到圆角之外；底部安全区用一个透明的占位块，高度按设备取值（比如 34），这样内容不会被系统手势条压住。命名上我坚持“语义 + 层级”，不用编号后缀区分同类元素，因为编号在复制粘贴时会乱。
初始状态里，Sheet整组要放在屏幕底边之下，完全不可见；Mask的透明度设为 0。这里有个细节：整组往下移的时候，要注意阴影和圆角是否被画板边界裁掉，如果软件默认裁剪画板外的内容，你移动的时候在画布上看不见它，容易误判成“图层丢了”。我的做法是先在画板内摆好目标位置，记住坐标，再把整组按位移量往下平移，用数值输入而不是拖动，避免手抖。
3.2 用 Behavior 做可复用的弹出层组件
Behavior 是 Flinto 里被低估的功能。它的本质是把一组交互逻辑打包，多个地方引用同一份。如果你的项目里有三四个不同的弹层（筛选、评论、分享），把它们都做成 Behavior，后面调参数只改一处，全部生效。
我抽 Behavior 的粒度是这样的：只把“交互逻辑”抽出来，不把“内容”抽进去。具体说，Behavior 里放的是“点击遮罩关闭”“下滑收起”“反向转场”这些行为，内容部分（列表、标题）留在各个画板里各自维护。这样做的好处是弹层长得不一样但行为一致，符合真实产品里的规范统一。
搭 Behavior 的步骤，我的习惯是先做通一个完整弹层，跑一遍真机确认手感，再把它拆成 Behavior。理由是先拆再调会来回切状态，反而慢。拆的时候，在 Behavior 内部保留面板位移、遮罩渐变、手势触发这三条线，把内容图层排除在外，然后在各个画板里“引用”这个 Behavior 并把内容层叠上去。
提示：Behavior 的调试比普通转场麻烦，因为它不直接在当前画板显示。我的做法是每改一次就在真机预览里跑一遍，不要攒着一堆改动再一次性验证，出问题找不到是哪次改坏的。
3.3 Transition 面板逐项配置
转场是核心。打开两个状态之间的 Transition，面板里的配置我按这个顺序填，逻辑是从“大块”到“细节”：
先是时长和曲线。整体时长填 320ms，曲线选轻柔减速。这里要注意，有些工具里每个图层可以单独设时长，别被“全局时长”这个说法骗了——先设全局再逐个覆盖，比反过来效率高。
然后给Sheet 整组勾位移。勾选后填 Y 轴的起止值，起始是“目标位置 + 位移量”，结束是“目标位置”。位移量按 2.1 的公式算，70% 展开、812 高画板就是 598 左右。这个值我建议直接写数字，不要用“自动计算”，因为自动计算经常会把阴影算进去导致差几个像素。
接着给Mask 勾透明度。起始 0，结束 0.45，时长设 240ms，曲线标准化。如果软件支持设延迟，给面板加 20ms 的起步延迟，遮罩从 0 开始，视觉层次会更清楚。
再给内部内容勾透明度或延迟。列表内容在 60ms 后开始淡入，时长 200ms。这一步是“锦上添花”，不做也能用，但做了以后弹层会明显显得“有呼吸”，尤其是内容比较多的列表型弹层，内容跟着面板一起糊上来会显得沉重。
最后处理反向转场。绝大多数工具支持“一键生成反向”，生成后要检查两处：遮罩的曲线是否还是减速（关闭时遮罩应该用加速的感觉，或者说更快消失），以及手势触发的反向是否绑定了下拉方向。这两个不检查，关闭动效十有八九是别扭的。
整套配下来，第一版通常在软件里看着还行，一到真机就觉得“快了”或者“钝了”。这不是你的错，屏幕尺寸和视距会改变体感，所以 3.5 的校准环节不能省。
3.4 手势触发、拖拽跟随与反向转场
手势这块我在 2.3 讲了参数逻辑，这里说具体接法。Flinto 的拖拽手势配置有几项关键值：方向、触发距离、触发速度。我的常规配置是方向为“向下”，触发距离填面板高度的 30%（按 2.1 的例子约 170），触发速度填 500 左右。
跟随效果的实现有两种思路，我两种都用过：一种是手势直接绑定到面板的位移属性，让面板跟着手指走，松手时判断阈值决定走向；另一种是不跟随，只做手势触发——手指一拖，直接播放收起动效。第一种手感真实但配置复杂，第二种省事但体感差，像“滑了一下才反应过来”。底部弹层我建议用第一种，毕竟它是用户会反复用的组件，值得多花时间。
跟随做完，一定要测三个动作：慢拖到一半松手（应该回弹）、快滑到底松手（应该收起）、拖到一半再往回拖（应该能反向跟随不卡住）。第三个动作最容易出 Bug，很多原型拖到一半往回拖，面板会僵住或者跳一下，原因是跟随逻辑写成了单向的。修法是把跟随做成双向绑定，位移量随手指位置正负变化。
还有一个容易被忘的点：下拉收起的时候，内容列表应该是锁住的。如果列表还能滚，用户在收起过程中滑动，会出现面板和内容错位。我的处理是在收起动效播放期间，把内容区的滚动手势临时禁用，动效结束后再恢复。
3.5 多状态与内容滚动的冲突处理
真实产品里的底部弹层经常有多个状态：半展开（40%）、全展开（85%）、收起。做多状态比单状态难一档，因为状态之间的切换要判断“当前在哪”和“往哪去”。
我处理多状态的方法是用画板堆状态，用转场连路径，而不是在一个画板里用复杂的条件判断。具体说，做三个画板：Home（收起）、Sheet_Half（半展开）、Sheet_Full（全展开）。路径是三段：Home ↔ Sheet_Half、Sheet_Half ↔ Sheet_Full。三段转场各自配时长曲线，半展开用 280ms，全展开用 320ms（因为位移大）。手势上，向上拖触发半展开，再向上拖触发全展开，向下拖逐级收起。这样逻辑清晰，出问题也容易定位是哪一段转场坏了。
内容滚动的冲突是另一个高频坑。弹层里有列表、列表又要能滚，滚动手势和拖拽收起手势会争抢触摸事件。我的处理原则是用热区划分，而不是用条件判断：把面板顶部的标题区（Header）作为拖拽热区，列表区只滚动不拖拽。用户在标题栏上滑才收起，在列表上滑只是滚内容。这个方案牺牲了一点“全区域可拖”的便利，但换来的是零冲突，我认为非常值。
如果一定要做“列表滚到顶部再下拉收起”的效果（很多产品有），在原型里也能做，但要用到“滚动位置判断”，配置量大、调试成本高。我的建议是：原型阶段不做这个，标注给开发去实现。原型的作用是让对方看懂手感，不是替代工程实现，把精力花在刀刃上。
4. 真机调试：还原度差的真正原因
4.1 预览链路与设备缩放
在电脑上看着对的动效，到手机上往往“变快”了。原因不神秘：视距和屏幕尺寸变了。桌面显示器 27 寸、距离 60 厘米，手机 6 寸、距离 30 厘米，同样的 320ms 在手上会显得更急促。所以所有时长参数我都以真机为准，桌面预览只用来检查结构有没有错。
预览链路要提前打通。设备要和电脑在同一网络下（或者用数据线），软件里选择对应设备，然后在手机上打开预览客户端。这里踩过的坑是：预览时如果图层特别多，会掉帧，掉帧会让你的动效显得“卡”，你会误以为是参数问题，改半天没效果。判断方法是把这个动效单独拎出来放到一个干净画板里跑一遍，如果流畅了，那就是性能问题而不是设计问题。
设备上的显示比例也要注意。有些原型工具会按设备实际分辨率渲染，如果你的画板是按 375 宽设计的，在宽屏设备上会被等比放大，位移距离跟着放大，看起来位置是对的，但体感会变。我一般会准备两个画板：一个 375 宽的常规尺寸，一个 414 宽的大屏尺寸，分别验证一遍，只调一次参数是不够的。
4.2 逐帧比对与手感微调
校准手感我有套笨办法但很有效：录屏 + 慢放。在真机上把弹层开合的过程录下来，用播放器放慢到 0.25 倍速，一帧一帧看。看什么？看三个东西：面板和遮罩是不是同时开始的、面板停下来的时候有没有“顿一下”、关闭的时候有没有“先停再走”。
“顿一下”通常是因为缓动曲线的收尾太陡。减速曲线如果尾部的控制点设得太靠上，最后几帧位移量会突然变小，看起来就像提前停了然后挪了一下。修法是把曲线尾部拉平一点，比如从 (0.2, 0, 0, 1) 换成 (0.25, 0.1, 0.25, 1)。
“先停再走”是关闭动效的常见毛病，多数是反向转场的起始延迟没清掉。打开时给面板加了 20ms 延迟是为了层次感，但反向转场继承了这个延迟，关闭时就会先愣 20ms 才动。这个 20ms 人眼其实感知不到，但在慢放里很明显，而且累积到多次开合会觉得“不利索”。修法很简单：反向转场的延迟一律归零。
我自己的校准流程是这样的：先在真机上跑 5 遍开合，凭直觉判断“快了/慢了/软了/硬了”，只调一个参数（通常是总时长），再跑 5 遍。最多调三轮，三轮还不对就说明方向错了，得换曲线而不是继续调时长。这个“一次只改一个变量”的原则，能让你清楚知道是哪个改动起了作用。
4.3 性能边界：什么时候原型会卡
原型卡顿的原因，八成跟图层数量、模糊效果、阴影这三样有关。底部弹层里最容易出问题的是大面积阴影和背景模糊。阴影半径设到 30 以上、模糊效果铺满全屏，预览时就会明显掉帧，尤其在旧设备上。
我的处理原则是：原型阶段能用纯色就不加模糊，能用细边框就不加大阴影。视觉上的“高级感”可以留到设计稿里，原型要的是跑得动的真实手感。如果确实需要阴影，把半径控制在 12~16，透明度 0.08~0.12，视觉上够用，性能压力小很多。
另外一个隐蔽的性能杀手是图层嵌套过深。一个弹层套了五层 Group，每层都开了裁剪，渲染开销会翻倍。我的习惯是嵌套不超过三层，裁剪只开在最外层容器上。如果你的原型莫名其妙卡，先做减法：把所有阴影和模糊关掉跑一遍，流畅了就一项一项加回来，加到哪项开始卡，问题就定位了。
4.4 交付标注：怎么让开发不误解你的动效
原型做得再好，交付时讲不清楚等于白做。我见过太多情况是设计师说“就那种弹出来的感觉”，开发做出来是“生硬地滑上来”，然后来回改三遍。避免这个问题的方法是把参数写成一张表，而不是让开发去看原型猜。
我交付底部弹层时固定给这几项：
| 项目 | 数值 | 说明 |
|---|---|---|
| 弹层高度 | 屏高 70% | 内容超过 6 行时用 85% |
| 面板时长 | 320ms | 进入用减速，退出 260ms |
| 面板曲线 | cubic-bezier(0.25, 0.1, 0.25, 1) | 退出时改为加速 |
| 遮罩终值 | 0.45 | 透明度 |
| 遮罩时长 | 240ms | 与面板同时结束 |
| 内容淡入 | 延迟 60ms，200ms | 可选 |
| 拖拽收起阈值 | 面板高度 30% 或速度 500 | 满足其一即可 |
| 圆角 | 顶部 16 | 跟随面板一起移动 |
这套表的写法比截图有用得多，因为它可执行。另外我会附带一句“位移距离按屏高比例换算，不要写死像素值”，这一句能省掉后面大量适配问题。
5. 常见问题速查与避坑清单
5.1 十类高频问题对照表
做这个动效这些年，遇到的问题是高度重复的。整理成表，遇到卡住的时候直接对照查：
| 现象 | 最可能的原因 | 解决方向 |
|---|---|---|
| 面板升起时边缘露出一点 | 起始位移量不够，保险量不足 | 位移量加 20~40 像素保险 |
| 遮罩比面板先完成，出现割裂 | 遮罩时长设得比面板长 | 遮罩时长压到面板的 75% 左右 |
| 弹出很“硬”，像被推上来 | 用了线性或 ease-in 曲线 | 换减速曲线 |
| 关闭时面板“啪”地消失 | 没有配反向转场 | 生成反向并检查曲线 |
| 拖到一半松手不回弹 | 只配了收起，没配回弹 | 补一个回到原位的转场 |
| 拖到一半往回拖会卡住 | 跟随逻辑是单向的 | 改成双向绑定 |
| 面板里的按钮点不动 | 遮罩层级在面板之上 | 调整图层顺序 |
| 列表滑动时弹层跟着动 | 手势热区重叠 | 用标题区做拖拽热区 |
| 真机预览掉帧 | 阴影半径过大或有全屏模糊 | 关掉或减小 |
| 大屏设备上位置跑偏 | 位移写死像素值 | 改为按屏高比例换算 |
5.2 三个我踩过的坑
第一个坑是把弹层做成两个画板。当时想着“收起是一个页面，展开是另一个页面”，结果转场时背景内容会闪一下，因为两个画板里的背景是两份图层，哪怕长得一样，渲染时也会有细微差异被人眼捕捉到。后来改成同一个画板里，遮罩和面板作为图层叠在背景上，问题就没了。这个原则我后来一直用：任何“浮在页面上的东西”都不要拆画板。
第二个坑是给面板加了回弹效果。当时觉得加点弹性会更有质感，结果真机上一试，弹层收起时抖了两下才走，特别廉价。底部弹层是功能性组件，用户一天可能开合十几次，任何多余的“花样”在重复使用中都会变成噪音。后来我把回弹全部去掉，只用干净的减速，反而被同事说“手感很正”。这件事让我明白，动效的品质感来自准确，不是来自复杂。
第三个坑是忽视反向转场的曲线方向。进入用减速是对的，但退出如果也用减速，面板会以很慢的速度离开，感觉像“舍不得走”。退出应该用加速曲线（ease-in），起步慢、收尾快，符合“东西离开视线”的自然感受。这个细节我带过的新人几乎都犯过，因为大家习惯“复制进入的参数给退出”，看起来对称，实际体感完全不对。
5.3 练习进阶路线
如果你刚上手，我建议按这个顺序练，每一步都做完再进下一步：
第一步，只做点击触发的弹出和收起，不碰手势。目标是让时长和曲线配到“自己看着舒服”，这一步大概要花两三个小时反复调，别嫌慢。
第二步，加上遮罩和内容延迟。这一步练的是多图层的时间对齐，重点体会遮罩快一点、内容慢一点带来的层次感差异。
第三步，接入手势拖拽。先做跟随，再做阈值判断，最后做回弹和收起的双路径。这一步最容易卡住，卡住的时候回到 2.3 把阈值算清楚再动手。
第四步，做多状态。半展开、全展开、收起，三段路径连通。这一步练的是状态管理和路径清晰度。
第五步，换设备验证 + 交付标注。换个尺寸跑一遍，把参数整理成表。这一步看起来最不“技术”，但实际上是整个流程里最能体现专业度的一环。
练完这五步，你对“手感”这件事的理解会跟之前完全不一样。我做完整套之后最大的变化是，拿到任何一个动效需求，第一反应不再是“打开软件试试看”，而是先算位移、定时长、挑曲线，把参数写在纸上，再进软件照着填。这个顺序换过来以后，调参的效率至少提高一倍，因为你改的是数字，不是感觉。
提示：调参的时候不要开着音乐，也不要一边聊天一边调。手感判断依赖注意力的连续性，被打断一次，前面建立的参照系就乱了。我一般会把这一段工作单独留出半小时，专心跑真机。
最后说个我个人一直在用的方法：每次做完一个动效，把它和三个成熟产品的同类动效并排放着看，只问自己一个问题——差在哪。是快了、慢了、软了还是硬了。这个对比习惯比看十篇教程都有用，因为它给你的是一把尺子，而不是一套答案。
