小程序自带的动画接口虽然能完成淡入淡出、缩放等基础过渡，但弹窗组件需要更细腻的节奏时，预设曲线就很难满足。比如想要一个带轻微回弹的弹出效果，或者一个先快后慢的关闭过程，只靠 linear、ease、ease-in 这些选项几乎没法精确控制。原因在于这些名称背后是固定的三次贝塞尔曲线，控制点不可修改。要把弹窗动画打磨到位，需要在项目里引入贝塞尔曲线计算能力，并封装到自定义 modal 组件中统一调用。
一、动画曲线的本质：为什么预设不够用
小程序动画 API 中的 timingFunction 属性可以接收 linear、ease、ease-in、ease-out、ease-in-out 等值，但这些值并不等于任意的缓动函数。它们本质上是一组已经定义好的三次贝塞尔曲线，例如 ease 对应的控制点约为 cubic-bezier(0.25, 0.1, 0.25, 1)，ease-in-out 对应 cubic-bezier(0.42, 0, 0.58, 1)。三次贝塞尔曲线由两个端点 P0(0,0)、P3(1,1) 和两个控制点 P1(x1,y1)、P2(x2,y2) 决定，横轴表示时间进度，纵轴表示动画进度的实际完成比例。控制点的横坐标通常限制在 0 到 1 之间，但纵坐标可以超出这个范围，这就为弹性回弹效果提供了可能。
小程序没有直接开放自定义贝塞尔曲线参数的入口，因此如果只想依赖内置 API，很难做出类似 iOS 弹窗那种带轻微过冲再回落的动画。解决办法是在 JavaScript 层自己计算曲线值，或者直接引入已经实现好的贝塞尔曲线库。这样每一帧的动画进度就不再由小程序预设决定，而是完全由你指定的控制点计算得出。
从实现角度看，我们并不需要理解贝塞尔曲线的完整数学推导，只需要知道：给四个参数 x1、y1、x2、y2，函数会返回一个 0 到 1 的进度映射值。以常见的回弹曲线 cubic-bezier(0.34, 1.56, 0.64, 1) 为例，当时间进行到 40% 时，动画实际进度可能已经超过 100%，随后再回落到最终位置，这正是回弹动画的关键。
二、集成bezier-easing库到小程序项目
bezier-easing 是一个纯 JavaScript 实现的贝塞尔曲线计算库，体积很小，没有浏览器环境依赖，非常适合在小程序中运行。如果项目已经开启了 npm 支持，可以直接在项目根目录执行安装命令，然后在开发者工具中点击「构建 npm」。这个库只负责数学计算，不会触发任何 DOM 操作，因此兼容性很好。
npm install bezier-easing
安装完成后，在自定义组件的 JS 文件中引入并创建缓动函数。这里创建一个带回弹效果的缓动函数，参数分别为两个控制点的横纵坐标。需要注意的是，控制点纵坐标 1.56 已经超过 1，这使得动画中间阶段会出现过冲。
import BezierEasing from 'bezier-easing'; const easeOutBack = BezierEasing(0.34, 1.56, 0.64, 1); // 查看在时间进度 0.3 时的实际动画进度 console.log(easeOutBack(0.3));
如果小程序项目没有启用 npm，也可以把 bezier-easing 的源码单独复制到 utils 目录下，以普通模块的方式导入。核心逻辑不会因为环境变化而失效，只要保证 ES6 模块语法能被编译即可。建议优先使用 npm 方式，后续升级和版本管理会更清晰。
引入库之后，动画曲线就不再是拍脑袋随意设置，而是可以像设计稿一样精确调整。比如关闭弹窗时希望前段快速、后段缓慢，可以使用 cubic-bezier(0.36, 0.66, 0.04, 1)；想要更明显的弹性感，可以把第二个控制点纵坐标提高到 1.8 甚至 2.0。参数调整的过程可以直接在开发者工具中配合真机预览，观察弹窗从出现到稳定的全过程。
三、在自定义Modal中用贝塞尔曲线驱动动画
自定义 modal 组件通常包括遮罩层和内容面板两部分。动画可以同时改变面板的位移和透明度，让弹出过程更有层次。下面是一个简化版的 WXML 结构，外层 <view> 负责遮罩，内层 <view> 作为弹窗主体，位移和透明度通过数据绑定动态更新。
<view class="modal-mask" wx:if="{{visible}}">
<view class="modal-panel" style="transform: translateY({{offsetY}}rpx); opacity: {{opacity}};">
<slot></slot>
</view>
</view>对应的 WXSS 只需要处理基础布局和视觉效果。遮罩层固定铺满全屏，内容面板使用 rpx 单位保持不同屏幕下的一致性。will-change 可以提前告知渲染层接下来会频繁修改 transform 和 opacity，部分真机上能减少闪烁。
.modal-mask {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
justify-content: center;
}
.modal-panel {
width: 560rpx;
background: #ffffff;
border-radius: 24rpx;
will-change: transform, opacity;
}在组件 JS 中，用 requestAnimationFrame 逐帧计算动画进度，并通过 setData 更新绑定的位移和透明度。每一帧先用 Date.now() 计算经过时间，再除以总时长得到原始进度，最后交给贝塞尔缓动函数做映射。这里选择 cubic-bezier(0.34, 1.56, 0.64, 1) 作为弹出曲线，关闭时再换另一条更缓的曲线即可。
import BezierEasing from 'bezier-easing';
Component({
data: {
visible: true,
offsetY: 80,
opacity: 0
},
lifetimes: {
attached() {
this.playShowAnimation();
}
},
methods: {
playShowAnimation() {
const easing = BezierEasing(0.34, 1.56, 0.64, 1);
const duration = 320;
const startTime = Date.now();
const startOffset = 80;
const targetOffset = 0;
const startOpacity = 0;
const targetOpacity = 1;
const frame = function () {
const elapsed = Date.now() - startTime;
const progress = Math.min(elapsed / duration, 1);
const eased = easing(progress);
this.setData({
offsetY: startOffset + (targetOffset - startOffset) * eased,
opacity: startOpacity + (targetOpacity - startOpacity) * eased
});
if (progress === 1) {
return;
}
requestAnimationFrame(frame);
}.bind(this);
requestAnimationFrame(frame);
}
}
});关闭动画也可以按照同样思路实现。先在 data 中增加一个状态标记，用户点击关闭时不再直接隐藏组件，而是播放一段 200 毫秒左右的向下位移和透明度衰减，动画结束后再通过 setData 把 visible 置为 false。这样做的好处是每个动画阶段都有独立曲线控制，不会出现突然消失的割裂感。
四、常见曲线参数与真机调优建议
贝塞尔曲线的参数没有唯一正确答案，但有一些经过验证的组合可以直接使用。弹出回弹常用 cubic-bezier(0.34, 1.56, 0.64, 1)，它的特点是在前 60% 时间快速完成大部分位移，中间产生轻微过冲，最后 20% 时间缓落到目标位置。关闭场景更推荐 cubic-bezier(0.36, 0.66, 0.04, 1)，前段迅速启动，后段自然减速，符合用户关闭弹窗时的心理预期。如果弹窗内容较多，需要减少回弹幅度，可以把第二个控制点纵坐标从 1.56 降到 1.2 左右。
真机调优时还要关注 setData 的调用频率。逐帧更新位移和透明度虽然直观，但在低端 Android 设备上可能因为 JS 与渲染层通信开销过大而导致掉帧。如果遇到这类问题，可以降低动画帧率到 30 帧，或者提前把关键帧序列计算好，再交给 wx.createAnimation 执行。不过一旦改用 wx.createAnimation，曲线控制能力就会重新受限于内置预设，因此更推荐优先优化数据量，而不是放弃贝塞尔曲线计算。
另一个容易被忽略的点是页面层与组件层的动画叠加。如果 modal 弹出时页面本身还有滚动或过渡动画，两个动画同时运行可能造成合成层压力。可以在弹出动画播放期间给页面根节点添加一个静止样式，或让遮罩层使用单独的 position: fixed 层，避免触发整个页面的重排。曲线参数再精确，最终效果还是取决于真机上的实际帧率表现。
整条实现链路并不复杂：用 bezier-easing 把设计稿中的曲线参数转换成逐帧进度，再通过 requestAnimationFrame 驱动组件数据更新。相比单纯依赖小程序内置动画，这种方式让弹窗的节奏完全可控，也方便后续把同一套曲线复用到抽屉、引导浮层、底部弹出菜单等场景中。