跨端: 写信 FAB → 写信页 共享元素转场 + morph 收成单一入口(判据两版错法都记了)
用户 2026-09-21:「webui 行为是按钮变成对应的写邮件页面或输入框吧,你做的啥?」
「都做啊」—— 两处 morph 现在都在了。
## ① 写信 FAB → 写信页(跨 NavDestination)
官方 FAQ `faqs-arkui-991` 给的正是"在 NavDestination 子页面里做共享元素转场"
的完整步骤,逐步照做:
· 两端绑同一 id `compose-morph`(FAB / ComposeDestination 的 NavDestination);
· **`pushPath` 放进 `animateTo` 闭包**(FAQ 步骤 3 原文就是这个形状);
· `follow: false`(两端互斥出现,不是"始终在树上跟随")。
## ② 把 morph 收成**单一入口** `Motion.morph(ui, mutate)`
这一步不是为了少写代码,是为了**让判据能判**。过程值得记:
**第一版判据** —— 全仓 `any()`:
/animateTo\(/.test(allHarmony) && /durMorph/.test(allHarmony) && …
变异实测(把 morph 那处的 `animateTo` 改名、把 `Theme.durMorph` 就地写 `220`)
**三条全绿** —— 因为全仓**别处**还有这些名字,"删掉这一处"永远命中不了。
**第二版判据** —— 逐站点取"文本邻域"看有没有 animateTo:
**全假红**。因为 `geometryTransition(id)` 绑在**组件树**上,而 `animateTo`
写在**另一个方法**里,文本邻域取不到隔壁的方法。
⇒ 结论不是"把判据写得更聪明",而是**把结构改成可判的**:
把"带 morph 的状态切换"收进 `Motion.morph(ui, mutate)` 一处
(`animateTo` + 时长 + 曲线都在里面),调用点只剩「我要改哪个状态」。
这与本仓既有解法同型(`PressEffectModifier` / `GlassCardModifier`:
把"每处都得记得写"收敛成"一处定义、处处引用")。
3 个调用点已全部改走它(`MainPage.openComposeWithMorph`、
`MailDetailPage.openReplyWithMorph` / `closeReplyWithMorph`)。
★ `Motion.morph` 必须收 `UIContext`:全局 `animateTo` **已废弃**
(编译器告警 `'animateTo' has been deprecated`),而静态方法里拿不到
`this.getUIContext()`(本仓纪律:静态方法里不用 `this`)。
## 判据:6 条,三条变异逐个验过
通过 每个 id 恰好绑两处(一 in 一 out) [变异:删一端 → 红 ✓]
通过 morph 只有一个入口且内部有 animateTo [变异:换成普通调用 → 红 ✓]
通过 用 ui.animateTo 而非废弃的全局 animateTo
通过 每个用 geometryTransition 的文件都走 helper [变异:自己写 animateTo → 红 ✓]
通过 页面里不再直接出现 Theme.durMorph
通过 Theme.durMorph 存在且 = 220 [变异:改成 450 → 红 ✓]
★ 期间还抓到一个**判据自己的 bug**:我重写那一段时把 `themeSrc` 的定义
一起删了 ⇒ 第 6 条抛 `ReferenceError`、**整条判据根本没跑**
(而其余 9 条照常打印"通过",退出码 1 但没人看得到那条)。
这与"守具有齿但不在位"同形:**判据崩了不会显示成失败**。
已补回定义并重跑确认。
计数棘轮 4 → 10(显式编辑,理由写在 `run-all.mjs` 里)。
## 设备验证
✓ 点 FAB → 写信页到场、取消 → 回列表,进程存活(17827),无新 jscrash
(`faultlogger` 里最新仍是 15:08 那条,即修复前的)
✗ 220ms 的**中间帧**仍看不到(`snapshot_display` 往返 1.5-3s 慢一个数量级)——
与上一条提交同样的诚实交代:动画本体只能由用户在真机上看
This commit is contained in:
@ -63,7 +63,12 @@ const SUITE = [
|
||||
['test/markdown-xss.test.mjs', [], 9],
|
||||
['test/narrow-layout.test.mjs', [], 88],
|
||||
['test/nav-merge.test.mjs', [], 9],
|
||||
['test/animation-audit.test.mjs', [], 4], // 动画全量盘点:死动画/过宽作用域/弹层接线/reduced-motion
|
||||
/*
|
||||
* 4 → 10(显式编辑)。新增 6 条是**鸿蒙侧共享元素转场**(geometryTransition)
|
||||
* 的接线判据 —— 用户「webui 行为是按钮变成对应的写邮件页面或输入框吧」。
|
||||
* 详细理由见该文件里那段「这三条第一版写错了」的注释(两版错法都记了)。
|
||||
*/
|
||||
['test/animation-audit.test.mjs', [], 10], // 动画全量盘点:死动画/过宽作用域/弹层接线/reduced-motion
|
||||
// 深色模式:色板反转 + 玻璃 alpha 档 + 底必须是暗的(2026-09-17 那次
|
||||
// 「只有通信页深色正常」的回归锁 —— 38 条里后 8 条是这次新增)。
|
||||
['test/theme.test.mjs', [], 38],
|
||||
|
||||
Reference in New Issue
Block a user