弹框动画丝滑化:入场加位移+弹簧曲线,修加载态打断动画 (#82)
用户:首页,弹出所有弹框,动画,都要改一下,改的跟丝滑流畅,
尤其是观影,基本上没动画,都需要修改。
先核实:把时长临时放大到 3s 后连拍,遮罩 246→210→170→153→148 逐帧压暗,
说明**动画确实在播**。所以不是没接上,而是动效本身太弱:
220ms 太短、只有 0.94→1 缩放(差 6%,且无方向感)、FastOutSlowIn 落定硬停、
进出同长。
四处改动:
① 入场加纵向位移 SHEET_RISE_VP=22 —— 竖向是人眼最敏感的方向,
纯缩放读不出从哪来;22vp 是看得出从下面来但不觉得它飞了的量。
② 时长分离:卡片 320/200、遮罩 240/160(出场必须比入场快,
用户已决定关闭,等待就是拦他);缩放起点 0.94→0.90。
③ 曲线换物理弹簧 curves.springCurve(0, 1, 228, 26)(末段自然收敛)。
⚠️ 先写的 Curve.springMotion 编译失败——本工程 SDK 6.1.1 里没这个 API,
技能包速查表也把它列在高频臆造 API里,是我没照表走。
④ 观影/日程详情卡加载态:**这是观影没动画的真凶** ——
卡片高度按内容定,加载态只有一行字(~100px),详情回来瞬间撑到 72% 屏高,
320ms 的入场动画只播了前 1/3 就被高度突变打断。
改法:加载态放固定 460vp 骨架屏(FbEventSheet 同样问题,一并修 300vp)。
用固定 vp 而非 %:builder 在 Scroll 里,百分比拿不到基准。
验证(真机):放大时长连拍 N2 卡片顶边 y=1073 → N3 y=1011,
上移 62px≈20vp,证实位移生效;临时给接口加 1.5s 延迟后抓图,
骨架屏(海报位+4 条文字条)正确撑住卡片高度;临时代码已撤除(grep 0 处)。
连开合 3 轮均正常、无 JS 崩溃、进程存活。
hvigorw assembleHap BUILD SUCCESSFUL。
FbAnim 是全站唯一动画入口,98 处引用 / 14 个页面,全部同时生效。
This commit is contained in:
@@ -370,15 +370,27 @@ export struct FbEventSheet {
|
||||
.margin({ top: 12, bottom: 4 })
|
||||
|
||||
if (this.loading) {
|
||||
Row({ space: 8 }) {
|
||||
LoadingProgress().width(18).height(18).color(FbColors.faint)
|
||||
Text('正在读取…')
|
||||
.fontSize(FbMetric.fontSmall)
|
||||
.fontColor(FbColors.faint)
|
||||
/* 🔴 2026-11-06:加载态要给足高度,别只放一行「正在读取…」。
|
||||
用户反馈"弹框动画不丝滑"。原因同 `FbMovieDetailSheet`:
|
||||
卡片高度按内容定,加载态只有一行字 ⇒ 卡片很矮;
|
||||
数据回来立刻撑成满屏,**入场动画被高度突变打断**。
|
||||
⇒ 用骨架块占住常规高度,动画期间尺寸基本恒定。
|
||||
⚠️ 固定 vp 而不是百分比:这里渲染在 Scroll 里,
|
||||
Scroll 高度按内容定,百分比拿不到基准。 */
|
||||
Column({ space: 12 }) {
|
||||
ForEach([0, 1, 2, 3], (i: number) => {
|
||||
Column()
|
||||
.width(i === 1 ? '82%' : (i === 2 ? '88%' : (i === 0 ? '44%' : '60%')))
|
||||
.height(i === 0 ? 18 : 12)
|
||||
.borderRadius(6)
|
||||
.backgroundColor(FbColors.inputBg)
|
||||
}, (i: number): string => 'evsk_' + i.toString())
|
||||
}
|
||||
.width('100%')
|
||||
.height(300)
|
||||
.padding({ top: 20, bottom: 20 })
|
||||
.justifyContent(FlexAlign.Center)
|
||||
.alignItems(HorizontalAlign.Start)
|
||||
} else if (this.event === null) {
|
||||
// 正常情况下不会走到这里(`openEvent` 一定会垫一份壳);
|
||||
// 只有"打开浮层时状态被清掉"这种瞬时态才可能空着 ——
|
||||
|
||||
Reference in New Issue
Block a user