做移动端原型的人大概都遇到过这种场面评审会上有人指着静态稿问这个筛选面板弹出来是什么感觉你翻遍设计稿也说不清最后只能用手比划一句就是从底下唰一下上来。这种时候像 Flinto 这类专门做交互动效的软件就该上场了。这次我拿最典型的底部弹出效果做拆解——点一下按钮半透明遮罩把背景压暗一块圆角面板从屏幕底边滑上来手指按住能往下拽拽过一定距离松手就自己收回去点遮罩也能关掉。这东西看着是动效里最简单的一类真到 Flinto 里一帧一帧抠坑其实集中在三个地方图层结构怎么分、手势和滚动打架怎么解、缓动节奏怎么调才不像 PPT 动画。下面我按自己实际动手的顺序写从状态怎么切、Behavior 怎么建一直讲到拖拽跟手怎么做、参数怎么算、松手判定怎么设尽量让刚摸这软件的人能照着做出来也让已经会做转场但总觉得弹出得有点假的人找到差在哪。1. 底部弹出效果到底在解决什么问题1.1 为什么移动端偏爱从下往上这一手先说清这个模式为什么成立。手机屏幕是竖的人手握持时拇指最舒服的活动区域在屏幕下半部顶部两个角是公认的难够到区。把一层新内容从底部推上来等于把操作焦点主动送到拇指跟前用户不需要抬手、不需要改变握姿看完还能顺手往下推回去。这是纯粹的人机工程学考虑跟审美无关。再一层是方向语义。界面里的方向不是随便定的从哪来、回哪去是用户潜意识里的空间模型。底部弹窗从屏幕底边出生关闭时原路返回消失在底边用户的大脑会自动把这块内容和临时、可召回、不属于当前页面这几个标签绑在一起。反过来如果你让它从右边滑进来用户会本能地以为这是页面层级的跳转看完想按返回键。还有一个常被忽略的点位置暗示了层级的高低。底部面板天然带有覆盖但不打断的意味——它压在当前页面上面但当前页面还在遮罩半透明用户知道底下的东西没消失。这套语义在 iOS 和 Android 上都是系统级惯例用户零学习成本。所以做原型的时候这套方向语义不能被我觉得从上面掉下来更好看给破坏掉那属于设计师自嗨不是产品决策。1.2 Flinto 在这类动效里的定位它适合做哪一段活很多人搞不清 Flinto 到底该在哪一步用我见过有人拿它画视觉稿也见过有人指望它直接出可上线的代码两头都走偏了。它真正的价值区间是把静态设计稿变成能上手摸、能点、能拖的高保真动效原型用来做内部评审和给开发看效果预期。对比几种常见做法就更清楚了。纯用视频剪辑软件做动效演示缺点是只能播不能玩评审时没法验证点遮罩能不能关这种真实交互直接写代码做 Demo成本高到不现实何况很多还在方案探索阶段用通用原型工具呢做静态跳转没问题但一旦涉及手势驱动、弹簧曲线、转场随手指插值这类细节表达能力就吃紧了。Flinto 恰好卡在中间它有状态机式的 Behavior 机制能表达关闭态 / 打开态这种双状态结构有独立的手势触发器能挂拖拽有可视化的缓动和弹簧参数面板改一个数字就能立刻预览到效果。选它做底部弹窗的核心理由是它能表达过程的中间态。这个太重要了——底部弹窗最考验功力的不是打开那一下是手指按在面板上往下拖、拖到一半又松手弹回去的那段过程。静态工具做不出来视频工具演示不了只有这类带状态机的手势驱动工具能如实模拟。1.3 拆解成品一个合格的底部弹窗到底有几层动手之前得先把结构想清楚否则做到一半发现图层关系错了返工成本极高。我习惯拆成四层从上到下说。第一层是遮罩一个铺满整个屏幕的矩形纯黑或深灰初始透明度为零打开时涨到一个特定值常见 0.35 到 0.5 之间。它的职责是压暗背景、引导视线同时承担点击空白处关闭这个交互。第二层是面板容器一个圆角矩形宽度通常等于屏幕宽或左右各留 8 到 16 个点的间距做成悬浮卡片式圆角一般给到上边两个角 16 到 24。这个容器只管形状和背景色不承担任何内容。第三层是内容层贴在容器内部可以是列表、表单、筛选条件。如果内容超过面板高度就要挂滚动。这一层是最容易出问题的地方后面会专门讲手势冲突。第四层是把手和关闭按钮这类视觉提示。把手就是顶部那条几十点宽、四五点高的小灰条作用是告诉用户这玩意能拖。有些方案会省掉但我建议留着它比任何文字提示都直观。2. 上手前的结构与命名准备2.1 图层分组与命名决定后面好不好改从设计工具导入图层时最怕的就是一堆零散的未命名分组。导入进来之后你随便加一个动画、改一个位移值就可能牵动半个面板跟着乱跑找问题要找半小时。所以导入前务必在源文件里把结构整理干净命名用能一眼看懂功能的名字比如 mask、sheet-container、sheet-content、handle别用什么 Rectangle 12、Group 3 这种系统默认名。分组的逻辑我建议按动什么、不动什么来切。打开的瞬间遮罩的透明度要变、面板容器的位置要变、内容层跟着容器整体位移而对于容器内部的内容如果不是刻意要做内容延迟入场它不该有自己独立的动画。把内容和容器绑在同一组里动画一次性配完出错概率低得多。还有一个小习惯我强烈建议保持所有和这个弹窗相关的图层统一丢进一个顶层分组里命名带着统一前缀。原因很简单Flinto 的图层列表一旦超过几十个靠滚动找目标图层非常痛苦有前缀就能连着选中、整组隐藏、整组复制到另一个屏幕复用。这个习惯在你需要做第二版、第三版方案对比的时候能救命。2.2 画布尺寸、底部安全区与内容高度尺寸基准建议直接按目标机型的逻辑像素来别用缩放后的比例。常见的基准就是 375×812 这一档宽度和高度都按真实值来设这样后面算位移、算圆角、算内边距数值和设计稿完全对得上交付时也不用换算。底部安全区是新人最容易忘的一环。全面屏机型底部有一条横条指示器系统会占用大约 34 个点的高度你的面板里如果有按钮或者输入框贴着屏幕最底边放就会被遮住一部分。处理办法是给内容层底部留出这段内边距视觉上看不出突兀但真机上不出事故。我一般直接在面板内容底部加 34 的空白按钮往上提。面板高度的定法有讲究。全屏高度弹窗那种几乎占满的做法会让人产生页面跳转的错觉丧失可覆盖的语义。我的经验区间是屏幕高度的 40% 到 75% 之间超过 85% 就不如直接做页面跳转了。具体数值应该由内容决定——内容列表有五行就给能装下五行加标题加把手的高度别硬凑一个整数。以 812 高的屏幕为例如果面板定 420那打开后面板顶边就落在 812 减 420 等于 392 的位置屏幕上方还留 392 的可见区域这个比例用户能清楚看到底下是被压暗的原页面层级关系一眼分明。2.3 建 Screen 还是建 Behavior一个关键判断这是刚上手时最常犯的结构性错误。Flinto 里有两套东西Screen 代表一个页面Behavior 挂在 Screen 下面代表页面内的局部交互。有人一看要弹出一个新东西立刻新建一个 Screen 然后把底部面板画进去用页面转场来连接结果做出来的效果怎么调都不对。正确做法是底部弹窗建在当前 Screen 的一个 Behavior 里。因为它在语义上就不是新页面用户关掉之后回到的还是同一个页面、同样的滚动位置、同样的状态。如果建成新 Screen页面转场机制会顺带把原页面也做一些默认处理滚动位置丢失、返回动效叠加一堆莫名其妙的副作用。判断标准很简单这个东西关掉之后底下页面的状态要不要保持原样要就建 Behavior不要属于页面级跳转才考虑 Screen。底部弹窗、气泡提示、下拉刷新、Tab 切换全是 Behavior 的活儿。养成这个判断习惯后面能省掉大量排查时间。3. 从零搭出可拖拽的底部面板3.1 第一步把两个状态摆好Behavior 建好之后第一件事是把两个状态摆到位。关闭态是初始状态此时遮罩透明度为零面板整体位于屏幕底边之下——注意是完全在屏幕外不是贴着底边否则你会在真机预览时看到面板的边缘露在屏幕下面一条缝。位移量怎么算刚才定的面板高 420屏幕高 812面板顶边在屏幕外时的位置就是 Y 等于 812。打开态的 Y 则是 812 减 420 等于 392。两者的差值 420 就是整个动画的位移距离这个数字后面算时长和速度要用到先记下来。这一步有个细节必须注意位移的基准点要统一。Flinto 里的位置参数是相对于父级容器的如果你把面板放在了某个带偏移的分组里那么读数会和你预期不一致。我的做法是让面板容器的父级就是画布根层所有位置参数直接看绝对值不绕弯子。要是必须嵌套就统一在同一个父级下操作别一半改父级一半改子级那样调起来全是玄学。3.2 第二步Tap 触发打开转场里只动该动的属性在关闭态的触发按钮上挂一个 Tap 交互指向打开态转场类型选最朴素的那种无预设动画的溶解式转场。为什么不直接用现成的滑入预设因为预设会同时处理位移和透明度容易把你不想动的属性也带进去比如不该消失的内容被淡出了。从零手配动画属性每个数值都在自己掌控里改起来心里有数。转场里需要加的动画按优先级只有三条。第一条是面板容器的位置动画从 Y 812 到 Y 392。第二条是遮罩的透明度动画从 0 到 0.4 左右。第三条如果做了把手的高亮或者面板圆角变化再加一条。除此之外什么都别加尤其是不要给内容层单独加动画除非你确实想做那种面板先上来、内容后滑入的错位感。发生顺序上有个反直觉的点面板的位移通常要比遮罩的淡入慢一点。用户的心理预期是面板是被点出来的主体遮罩只是陪衬陪衬先到位、主体随后缓入节奏上才有主次。如果两者同时结束会显得整体很平像两个无关的东西一起动了。3.3 第三步遮罩的淡入与点击关闭遮罩的最终透明度给多少这个数值我踩过坑。给 0.6 以上底下的原页面几乎看不见用户会觉得这是个新页面吧覆盖语义没了给 0.2 以下压暗效果太弱面板和背景糊在一起边界不清。实测下来 0.35 到 0.45 是比较稳的区间浅色界面偏 0.3 到 0.4深色界面可以再低一点因为深色本身就有压暗效果。遮罩上挂一个 Tap 交互指回关闭态这是必须的。少了它用户只能通过拖拽关闭可发现性大打折扣——大部分人不会主动去试能不能拖。同时注意把遮罩的点击区域覆盖完整别只覆盖了可见部分有时候遮罩做了裁切或者尺寸设小了边角位置点了没反应用户会觉得软件卡了。还有一个体验细节点击遮罩关闭的时候面板要不要一起动答案是必须一起而且要走和打开时完全对称的反向动效。这一点在 Flinto 里靠反向转场就能白拿——你只要把打开那条转场配好从打开态回关闭态的交互选中那条已有转场反向播放所有属性动画会自动倒放位置、透明度全部对上不需要重新配一遍。这个机制能省掉至少一半工作量务必用上。前提是打开和关闭的时长要一致如果时长不同反向播放会显得节奏突兀。3.4 第四步缓动曲线的选择与参数计算这里是决定像不像的分水岭。默认的线性缓动位移速度全程恒定观感上非常机械像电梯门在匀速平移。现实中任何被手推动的东西都不是匀速的——起步有加速、临近终点有减速减速段通常比加速段更长这是物体带阻尼运动的天然特征。所以打开动画的曲线应该用减速型也就是前快后慢。如果软件里给了预设选带减速语义的那一档如果支持自定义贝塞尔我常用的一组控制点大概是起步时斜率较陡、末端缓慢收敛的形状。下面这组数值可以当作起点交付给前端时也能直接抄/* 底部面板上滑减速型末端收敛 */ --sheet-ease-out: cubic-bezier(0.32, 0.72, 0, 1); /* 遮罩淡入稍微更快收敛一点让压暗先到位 */ --mask-ease-out: cubic-bezier(0.4, 0, 0.2, 1); --sheet-duration: 320ms; --mask-duration: 240ms;时长怎么定我用一个简单粗暴的算法做校验位移距离除以时长得到平均速度再看这个速度在人眼舒适区间里合不合适。刚才算的位移是 420 点如果时长取 320 毫秒平均速度就是 420 除以 0.32约等于每秒 1312 点。这个量级在移动端的观感是干脆但不突兀。如果时长缩到 200 毫秒平均速度飙到每秒 2100 点动效会显得很急、像被弹出来的如果拉到 500 毫秒平均速度只有每秒 840 点整个动作会显得拖沓、老气。所以我的经验区间是小面板高度 300 以内用 250 到 280 毫秒中等面板300 到 500用 300 到 350 毫秒大面板500 以上用 350 到 420 毫秒再长就该考虑分段动效了。这个算法的好处是它不依赖感觉换个人来算也能得出相近结论团队里定规范的时候好用。3.5 第五步拖拽跟手与松手判定最后这块是整个效果里技术含量最高的。目标是手指按住面板往下拖面板实时跟着手指的位置走拖多少跟多少没有延迟松手的时候判断——拖得够远就顺势关掉拖得不够就弹回原位。Flinto 里给面板容器挂一个拖拽手势方向限定为向下。关键是这个手势要走手势驱动的转场也就是面板位移和手指位移做实时映射而不是松手之后才播放一段预设动画。这两种做法的观感天差地别前者是你拽着它后者是你告诉它该动了用户一上手就能感觉出来。跟手的比例可以调常见是 1 比 1手指拖多少面板走多少。有些方案会做阻尼越过边界之后位移速度减半制造出拽到头了的阻力感。这个细节对质感提升很大尤其是面板往下拖过某个点之后开始变沉用户的手指会自然收到到头了的反馈比生硬地卡住舒服得多。松手判定用两个条件叠加别只看位移。第一个条件看距离拖拽距离超过面板高度的 25% 左右就判定为关闭否则回弹。第二个条件看速度如果松手瞬间手指还在快速下划哪怕距离只到 15% 也应该关掉因为用户意图很明确就是甩掉它。只按距离判断会显得迟钝只按速度判断又会让轻轻一碰就误关。两个条件做或运算命中任一就关闭。注意面板不同版本里拖拽行程、判定的菜单叫法会有出入参数位置大致在手势属性或者转场属性里找的时候优先看跟距离阈值跟手相关的选项别被名字绕晕。4. 让动效有质感的细节调优4.1 遮罩与位移的节奏配比前面提过遮罩要比面板快但快多少是有讲究的。我试过三种配比效果差异挺明显。第一种是完全同步两者同起同落。观感是整体在动像贴图平移很平但也不算错适合极简风格。第二种是遮罩先起、面板稍后。给面板的位移动画加 40 到 60 毫秒的延迟遮罩立刻开始淡入面板稍等一下再上来。这样做的效果是压暗先行、主体随后入场层次感明显更强用户的眼睛会先感知到背景变暗接着注意力被吸引到上来的面板上。这个 40 到 60 毫秒的延迟量很微妙多了会显得两件事没关系少了又看不出差别建议在这个区间里微调后定死。第三种是面板先起、遮罩稍后。这个组合我基本不用因为背景还没来得及压暗面板就已经闯进来了视觉上会觉得多了个东西而不是打开了一层。时长方面遮罩因为只做透明度变化、位移距离为零时长短一点不会显得突兀240 到 260 毫秒足够。面板因为位移距离长按前面那套速度算法300 到 350 毫秒比较稳。两者结束时间不用刻意对齐稍微错开反而更自然。4.2 弹簧参数的调法如果这个软件的动画类型里带弹簧模式一定要试。弹簧和缓动曲线的区别在于它能产生过冲——物体冲过目标位置一点点再弹回来这个微小的回弹是真实感的重要来源。弹簧参数一般有两个旋钮一个管劲大不大一个管散得快不快。直白点说劲越大冲过头的幅度可能越大、动作越猛阻尼越大晃动衰减越快、回弹次数越少。调的时候我按这个顺序来。先把阻尼放到比较高的位置让整个动作干脆不晃只保留一点点尾声确认面板不会冲出屏幕底边——这个必须检查因为过冲是双刃的往上冲那侧如果没有约束面板顶边可能会冲出屏幕外露出底下的空白非常难看。然后慢慢调劲道从偏软开始往上加加到看起来有力量但不过火为止。判断标准是打开动作完成的那一刻面板应该有一个几乎察觉不到的下沉回稳而不是明显地砸到位。如果一眼就能看出在回弹说明过冲太多该加阻尼了。还要注意弹簧不一定只能用在位移上。遮罩的透明度如果也用弹簧会出现透明度短暂超过目标值的情况这在某些场景下是瑕疵本该 0.4 的遮罩冲到 0.5 再回落所以透明度这类有明确上限的属性老老实实用缓动曲线别凑热闹。4.3 圆角、阴影与边缘处理这三样是纯视觉的但对高级感的贡献相当大而且成本极低。圆角容器只做上面两个角的圆角下面两个角是直角因为面板底部贴着屏幕底边做了圆角反而会露出背景。圆角半径 16 到 24 之间跟整体设计语言保持一致。如果做成悬浮卡片式的左右留白四个角都要圆。阴影面板顶部建议加一层很淡的向上阴影颜色用黑、透明度很低、模糊半径大、Y 轴偏移为负。它的作用是让面板和下面的原页面之间产生厚度差面板像是浮在上面的一张纸而不是从底边长出来的一块。这层阴影很容易做过头透明度给到 0.08 到 0.12 就够多了会显脏。边缘处理还有一个容易忽略的点如果面板顶部有内容紧贴着边缘比如标题文字注意别让它撞上圆角的弧线。视觉上留出至少 16 个点的水平内边距标题和圆角之间才不会别扭。4.4 内容滚动区和拖拽手势的冲突这块是重灾区我敢说十个做底部弹窗的人里有八个在这栽过。矛盾在于面板要响应向下拖拽关闭但面板里的内容如果比面板高它又要响应上下滚动。同一根手指同一个方向的滑动到底听谁的常见的错误做法是把两个手势都挂在同一个容器上结果是拖内容的时候面板跟着跑或者拖面板的时候内容在滚两种都很难受。我的解决方案是分区承担。面板顶部留出一块大约 48 到 56 高的区域只放把手这块区域专门承担拖拽关闭的手势不响应滚动。内容区的滚动交给滚动容器且滚动方向上做限制让它在内容到顶、继续往下拉的时候不把滚动事件传导出去。用户的心理预期其实很清楚——抓住顶部那条把手拖是关在内容区滑动是滚。分区之后两件事互不干扰学习成本也低。还有一种情况要处理内容不够长根本不需要滚动。这时候整个面板都可以承担拖拽体验更连贯。所以做的时候可以按内容高度分两套逻辑内容短就全区域可拖内容长就顶部把手区可拖。提示做完一定要在真机上试。模拟窗口里的鼠标拖拽和真实手指的滑动差异很大尤其是纵向滚动的判定阈值鼠标感觉不出来的问题手指一碰就暴露。5. 常见问题与排查实录5.1 现象、原因、处理 速查表下面这张表是我自己踩过、也帮别人排查过的典型问题汇总遇到不对劲先扫一遍能省不少时间。现象大概率原因处理办法面板打开了但底下背景没变暗遮罩层被放在了面板图层的上方或者遮罩尺寸没铺满把遮罩移到面板之下检查宽高是否等于画布尺寸面板边缘露出一条缝在屏幕下方关闭态的位置算错了没完全移出画布关闭态 Y 值设为屏幕高度别用接近屏幕高度点遮罩没反应点上去什么都不发生遮罩的点击区域被面板或者其它透明层挡住了检查图层顺序和点击区域重叠把遮挡层设为不接收点击关闭之后回不到原页面跳到别的画面上底部弹窗被建成了独立 Screen走了页面转场改成在当前 Screen 内建 Behavior用状态切换拖拽跟手但松手后不知道去哪缺少位移阈值和速度判定补上距离 25% 左右和甩动速度两个条件面板上滑时内容跟着抖一下内容层被单独加了动画和容器动画打架删掉内容层独立的位移或透明度动画弹簧动画时面板冲出屏幕过冲量太大缺少上限约束加大阻尼减少劲道或改用减速曲线滚动内容和拖拽关闭互相干扰两个手势挂在同一个容器上分区处理顶部把手区专管拖拽5.2 预览端和设计端不一致怎么办这个问题极高频。你在编辑器里调到自我感觉良好连着手机一看节奏完全不对——要么快了要么面板颜色发灰要么滚动卡顿。第一个排查方向是预览链路本身。真机预览靠的是同一局域网内的连接网络质量会直接影响帧率卡顿的时候人眼会误判成动效不流畅。所以判断节奏之前先确认预览画面本身是流畅的别把网络问题当动效问题改。第二个方向是机型差异。你在 375 宽的基准上按比例调好的数值换到大屏机上逻辑像素变了视觉观感会跟着变面板显得更扁、动效显得更快因为屏幕更大、位移距离相对更短。解决办法是准备好两套尺寸的基准页面或者至少在目标机型尺寸的画布上核对一遍关键数值。第三个方向是颜色。半透明遮罩叠在不同背景上成品颜色会不一样编辑器里的背景可能是纯白真机上的页面可能是浅灰遮罩叠上去的效果会差一档。核对的时候要在真实页面内容上盖遮罩看效果别在空白画布上判断。5.3 交付给开发时该带哪些东西原型做完不是终点得让人能照着实现。我的交付清单一般包括四样。一是动效录制把打开、拖拽中、松手回弹、点击遮罩关闭这几个状态都录一遍最好是慢放版本加正常速度版本各一份慢放用来看清细节顺序。二是参数清单位移距离、时长、缓动曲线控制点、遮罩透明度、判定阈值全部写成表格别让开发去视频里估数值。三是状态图标明哪两个状态之间怎么切换、由什么触发、用哪条转场。这一项很多人省掉结果开发实现出来两个方向的动效不对称回头还要返工。四是边界说明明确写清楚哪些是可调的时长、圆角、透明度可以按设计规范微调哪些是不可动的手势方向、分区逻辑、判定条件的组合方式因为后者涉及交互逻辑改了就不成立。最后分享一个我自己反复验证的小习惯把这个底部弹窗的单次动效时长卡在 320 毫秒上下、让遮罩比面板早结束一点点、拖拽判定同时看距离和速度这三个数定下来之后几乎不用再大改后面所有类似的底部面板、筛选抽屉、操作菜单都能套同一套参数一致性也就顺带解决了。