fix(island): 开合不再震动——去掉弹簧过冲 + 锚点整数化
问题(用户反馈"灵动岛开合的时候不要震动"): 之前虽然有「收回不抖动」断言,但它只看窗口宽度单调收缩,漏掉了两处真实回弹。 逐帧采样卡片真实屏幕矩形后复现: - 展开时窗口冲到 411x329(目标 404x316)→ 主进程用了 easeOutBack 弹簧缓动,尺寸超过目标再弹回 - 卡片被放大到 400.6x311.6(目标 396x310)→ 卡片入场用 cubic-bezier(0.34,1.56,0.64,1) 缩放,先超过 1 再回落 - 卡片中心左右波动 1.00px、上边缘波动 2.88px → 逐帧 Math.round 在 0.5 边界跳变 + transform 位移 修复: 1. 缓动单调化: 删除 easeOutBack,展开/收回统一 easeOutCubic(窗口与卡片都不再过冲) 2. 锚点整数化且与尺寸解耦: 新增 resolveAnchor(),停靠位置决定不动的那条边/中心,动画前算一次 3. 卡片宽度取偶数 + boundsFor 统一推导窗口矩形(消除逐帧 0.5px 抖动) 4. 卡片入场去掉 scale/translateY,只做 180ms 淡入,形变完全交给窗口尺寸 5. 顺带修掉新探针暴露的真实缺陷: 隐藏后再弹出胶囊时透明度被硬编码为 1,忽略了个性化设置 验证(verify:desktop 49/49,修复前后对比): - 展开: 卡片中心波动 0.00px / 上边缘 0.00px,最大窗口 404x316(=目标)、最大卡片 396x308,单调=true - 收回: 0.00px / 0.00px,最小窗口 268,宽度序列单调无回跳 - 透明度 0.62 生效;四个停靠位置、置顶、动画开关/速度、持久化全部通过 - verify:e2e 133/133、verify:web 19/19 不受影响 文档: README 形变动画章节更新为「单调不过冲 + 整数锚点」,并记录修复前后实测数据
This commit is contained in:
1 parent
97a89de944
commit
9c9ac69ac6
4 files changed
+295
-81
No files matched your search
@@ -832,26 +832,27 @@ body,
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* 展开态:弹簧缩放入场(配合窗口尺寸缓动) */
|
||||
/*
|
||||
* 展开 / 收回:只做轻微淡入淡出,**不做缩放与位移**。
|
||||
*
|
||||
* 之前用 `cubic-bezier(0.34, 1.56, 0.64, 1)` + `scale(0.88) translateY(-6px)` 做弹簧入场,
|
||||
* 缩放会先超过 1 再回落(实测卡片被放大到 400.6px 再回到 396px),观感就是"开合时震一下"。
|
||||
* 现在形变完全交给主进程的窗口尺寸缓动(单调 easeOutCubic),卡片保持固定尺寸与固定锚点,
|
||||
* 由窗口"揭开"卡片,全程无色块回弹、无位移抖动。
|
||||
*/
|
||||
.island-pop-enter-active {
|
||||
transition:
|
||||
opacity 0.2s ease,
|
||||
transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
transition: opacity 0.18s ease-out;
|
||||
}
|
||||
|
||||
.island-pop-leave-active {
|
||||
transition:
|
||||
opacity 0.14s ease,
|
||||
transform 0.2s ease;
|
||||
transition: opacity 0.12s ease-out;
|
||||
}
|
||||
|
||||
.island-pop-enter-from {
|
||||
opacity: 0;
|
||||
transform: scale(0.88) translateY(-6px);
|
||||
}
|
||||
|
||||
.island-pop-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0.92);
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user