弹框动画丝滑化：入场加位移+弹簧曲线，修加载态打断动画 (#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:
@@ -4,69 +4,231 @@
|
||||
* 🔴 用户 2026-10-19：「做几个动画，例如，点击名册列表，应该有一个过渡动画出现弹框，
|
||||
* 点击详情，框变大了，也应该有一个过渡动画，点编辑，也有动画。」
|
||||
*
|
||||
* 🔴 用户 2026-11-06：「首页，弹出所有弹框，动画，都要改一下，改的跟丝滑流畅，
|
||||
* 尤其是观影，基本上没动画，都需要修改。」
|
||||
*
|
||||
* ⇒ 现象**核实过**（把时长临时放大到 3s 后连拍，遮罩 246→210→170→153→148 逐帧压暗），
|
||||
* 动画确实在播。所以"基本没动画"不是"没接上"，而是**动效本身太弱、太短**：
|
||||
* · 220ms 太短 —— 点击后的注意力回升期还没结束，动画就已经播完了；
|
||||
* · 只有「淡入 + 0.94→1 缩放」：缩放是最弱的动效语言（只差 6%），
|
||||
* 而且**没有方向**，人眼读不出"它从哪来"；
|
||||
* · `FastOutSlowIn` 是固定时长缓动，落定那一下仍然是"停住"，
|
||||
* 缺少弹簧收敛的质感 ⇒ 观感不"丝滑"。
|
||||
*
|
||||
* 本次改造的三件事：
|
||||
* ① 入场加**自下而上的位移**（22vp）—— 给人眼最敏感的纵向语义；
|
||||
* ② 缩放起点从 0.94 放到 0.90，配合更长的 320ms，让"长出来"看得出来；
|
||||
* ③ 曲线换成 `curves.springCurve(0, 1, 228, 26)` —— 轻微过冲后自然收敛，
|
||||
* 这才是"丝滑"的来源（细节见 `fbSheetTransition` 的注释）。
|
||||
* ④ 顺带修正「进出同长」：入场 320 / 出场 200，遮罩 240 / 160。
|
||||
*
|
||||
* 为什么**统一抽在这里**（而不是每个浮层自己写一遍 `.transition(...)`）：
|
||||
* · 本工程有 9 个页面内浮层 + 一堆 bindSheet，逐个手写必然漂移
|
||||
* （时长/曲线/缩放比各不一样，动画看起来会"不是一个应用"）；
|
||||
* · 本工程有 9 个页面内浮层 + 一堆 bindSheet、全站 98 处引用，
|
||||
* 逐个手写必然漂移（时长/曲线/缩放比各不一样，动画会"不是一个应用"）；
|
||||
* · 全应用的浮层**必须同一种出入场**：这是"同一个系统"的观感来源之一。
|
||||
* ⚠️ 与 `FbSheetRing` 的分工：那个管**静止时的样子**（环/圆角/阴影），
|
||||
* 这个管**动起来的样子**（出现/消失）。两者都只有一处定义。
|
||||
*
|
||||
* 技术选型（为什么用 `TransitionEffect` 的**自带 animation**）：
|
||||
* · `.transition(effect)` 挂在 `if` 分支里的组件上，分支切换时自动播出入场；
|
||||
* · `effect.animation({...})` 让**动画参数挂在效果自己身上** ⇒ 不需要
|
||||
* 调用方再包一层 `animateTo`（漏包一处就变成"啪一下出现"，而且很难查）。
|
||||
* ⚠️ `.combine()` 要求**两边都写 animation**：SDK 原文
|
||||
* · `effect.animation({...})` 让动画参数挂在效果自己身上 ⇒ 不需要调用方
|
||||
* 再包 `animateTo`（漏包一处就变成"啪一下出现"，而且很难查）。
|
||||
* ⚠️ `.combine()` 之后**必须再挂一次 animation**：SDK 原文
|
||||
* （`common.d.ts` TransitionEffect.combine 的说明）：
|
||||
* "If combine is used for combining transition effects, the animation settings
|
||||
* of a transition effect are not effective for the combined effects."
|
||||
* ⇒ 所以我们自己在外面再挂一次（`SHEET_CARD` / `SHEET_MASK` 里就是这么做的）。
|
||||
* ⚠️ `TransitionEffect.OPACITY` / `.scale()` 这些静态成员**自带默认 1000ms 动画**。
|
||||
* 虽然 combine 后外层 animation 会覆盖它，但为了不留"某条路径走默认值"的
|
||||
* 隐患，这里每个子效果都用 `withAnim()` 显式挂参数，最后再挂一次。
|
||||
*/
|
||||
|
||||
/** 浮层出入场时长（毫秒）—— 220 是"跟手但不拖沓"的区间（与底栏位移动画同档） */
|
||||
const SHEET_MS: number = 220;
|
||||
import { curves } from '@kit.ArkUI';
|
||||
|
||||
/** 遮罩淡入淡出时长 —— 比卡片略短，让"压暗"先到位、卡片再落定 */
|
||||
const MASK_MS: number = 180;
|
||||
// ============================================================
|
||||
// 时长
|
||||
// ============================================================
|
||||
|
||||
/**
|
||||
* 浮层**入场**时长（毫秒）。
|
||||
*
|
||||
* 为什么从 220 提到 320：
|
||||
* · 220ms 在连续点击的节奏里"来不及看清就结束了"，用户会描述成"没动画"；
|
||||
* · 320ms 是模态类入场常用的档位，能看清"从哪来、落到哪"，又不至于觉得卡；
|
||||
* · 浮层是**低频重动作**，本来就该比微交互（底栏位移那类 180~220）慢一档。
|
||||
*/
|
||||
const SHEET_IN_MS: number = 320;
|
||||
|
||||
/**
|
||||
* 浮层**出场**时长（毫秒）—— 明显短于入场。
|
||||
*
|
||||
* ⚠️ 出场必须比入场快，这不是美学偏好而是交互心理：
|
||||
* 用户点关闭时已经"决定不要这个东西了"，任何额外等待都是在拦他；
|
||||
* 而入场时用户是"想看"，多等 100ms 换取动效可读性是划算的。
|
||||
* 常见配比就是 入场:出场 ≈ 1.5:1。
|
||||
*/
|
||||
const SHEET_OUT_MS: number = 200;
|
||||
|
||||
/** 遮罩淡入时长 —— 略短于卡片，让"压暗先到位、卡片再落定" */
|
||||
const MASK_IN_MS: number = 240;
|
||||
|
||||
/** 遮罩淡出时长 —— 比卡片更快撤走，避免"卡片没了、底下还黑一会儿" */
|
||||
const MASK_OUT_MS: number = 160;
|
||||
|
||||
/**
|
||||
* 卡片入场的位移量（vp）—— 从下方"托起"。
|
||||
*
|
||||
* 这是本次改造的**关键**：纯缩放几乎看不出变化，而竖向位移是人眼最敏感的方向
|
||||
* （屏幕上"内容出现"几乎都自带纵向语义）。22vp 是"看得出它从下面来、
|
||||
* 但不会觉得它飞了"的量；再大（40+）就成"底部抽屉"，与本项目"居中浮窗"不符。
|
||||
*/
|
||||
const SHEET_RISE_VP: number = 22;
|
||||
|
||||
/**
|
||||
* 入场缩放起点。
|
||||
*
|
||||
* 0.90 而不是原来的 0.94：0.94 只差 6%，配合 320ms 仍偏弱；
|
||||
* 0.90 能明确表达"它长出来了"，又不至于像"小方块弹一下"。
|
||||
* ⚠️ 别低于 0.85：卡片是"92% 宽 + 按内容高"，缩太多会先看到一块明显更小的
|
||||
* 白片，反而像另一个控件。
|
||||
*/
|
||||
const SHEET_SCALE_FROM: number = 0.90;
|
||||
|
||||
// ============================================================
|
||||
// 内部：组装工具
|
||||
// ============================================================
|
||||
|
||||
/**
|
||||
* 浮层进场用的弹簧曲线（轻微过冲后收敛）。
|
||||
*
|
||||
* 🔴 **不要再写 `Curve.springMotion(...)`** —— 那个 API 在本工程的 SDK
|
||||
* （compatibleSdkVersion 6.1.1 / API 24）里**不存在**，编译直接报
|
||||
* `Property 'springMotion' does not exist on type 'typeof Curve'`。
|
||||
* 能用的是 `curves.springCurve(velocity, mass, stiffness, damping)`，
|
||||
* 来自 `@ohos.curves`（`import { curves } from '@kit.ArkUI'`）。
|
||||
*
|
||||
* 参数语义（照 SDK 的 `@ohos.curves.d.ts` 原文）：
|
||||
* · velocity 初速度 —— 用来"接着上一段运动的势头"，从静止开始给 0；
|
||||
* · mass 质量 —— 越大惯性越大、回弹幅度越大、回位越慢；
|
||||
* · stiffness 刚度 —— 越大越"硬"、回位越快；
|
||||
* · damping 阻尼 —— 越大振荡次数越少、幅度越小（**不是**阻尼比）。
|
||||
*
|
||||
* 取值 0 → 1 → 228 → 26 的来由（这是 ArkUI 官方示例里那组经典值，
|
||||
* 观感是"起手跟手、中段快、末段有一次极轻微的回弹就停住"）：
|
||||
* · mass 1 / stiffness 228 决定了固有频率约 15rad/s ⇒ 一个周期 ~420ms，
|
||||
* 配合 duration 320ms 就是"在第一个周期内收敛"，不会看到反复晃；
|
||||
* · damping 26 让振荡在 1 个周期内衰减完 —— 给 30+ 会完全没有回弹（发死），
|
||||
* 给 15 以下会明显晃两下（廉价感）。
|
||||
*/
|
||||
function sheetSpring(): ICurve {
|
||||
return curves.springCurve(0, 1, 228, 26);
|
||||
}
|
||||
|
||||
/**
|
||||
* 给单个效果挂上动画参数。
|
||||
*
|
||||
* ⚠️ 存在的理由：`TransitionEffect.OPACITY` / `.scale()` 这些成员**自带默认
|
||||
* 1000ms 动画**。把"每个子效果用什么时长"显式写出来，
|
||||
* 可以让这条路径的参数在代码里一眼可见 —— 本项目踩过
|
||||
* "以为设了时长、实际走了默认 1000ms"的坑。
|
||||
*/
|
||||
function withAnim(effect: TransitionEffect, duration: number, curve: Curve | ICurve): TransitionEffect {
|
||||
return effect.animation({ duration: duration, curve: curve });
|
||||
}
|
||||
|
||||
/**
|
||||
* 卡片入场：淡入 + 放大 + 自下而上。
|
||||
*
|
||||
* ⚠️ 三者的**顺序不敏感**（combine 是并集），但都必须在最后统一再挂一次
|
||||
* `animation` —— 见文件头关于 `combine` 的 SDK 原文。
|
||||
*/
|
||||
function sheetIn(duration: number, curve: Curve | ICurve): TransitionEffect {
|
||||
const merged: TransitionEffect = TransitionEffect.OPACITY
|
||||
.combine(TransitionEffect.scale({ x: SHEET_SCALE_FROM, y: SHEET_SCALE_FROM }))
|
||||
.combine(TransitionEffect.translate({ y: SHEET_RISE_VP }));
|
||||
return withAnim(merged, duration, curve);
|
||||
}
|
||||
|
||||
/**
|
||||
* 卡片出场：淡出 + 缩到 0.96 + 往下 10vp（与入场反向，路径对称）。
|
||||
*
|
||||
* ⚠️ 出场**不回落到 SHEET_SCALE_FROM**：那样会让卡片"缩没了"，
|
||||
* 关闭时用户已经不想看细节，快速淡出比"表演一次缩小"更舒服。
|
||||
*/
|
||||
function sheetOut(duration: number, curve: Curve | ICurve): TransitionEffect {
|
||||
const merged: TransitionEffect = TransitionEffect.OPACITY
|
||||
.combine(TransitionEffect.scale({ x: 0.96, y: 0.96 }))
|
||||
.combine(TransitionEffect.translate({ y: 10 }));
|
||||
return withAnim(merged, duration, curve);
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// 对外：遮罩
|
||||
// ============================================================
|
||||
|
||||
/**
|
||||
* 遮罩过渡：只做透明度，不动位置。
|
||||
*
|
||||
* ⚠️ 遮罩铺满全屏，**不能**用缩放/位移 —— 那会让边缘露出没压暗的底色。
|
||||
* ⚠️ 进/出时长不同（240 / 160），所以必须用 `asymmetric`：
|
||||
* 原来只写一个 `.animation()`，进出同长，关闭时遮罩撤得比卡片慢，
|
||||
* 观感是"卡片没了、黑底还赖着"。
|
||||
* ⚠️ 曲线从 `Curve.Friction` 换成 `EaseOut`：Friction 是"快速减速"，
|
||||
* 适合跟手的拖拽/滚动；纯淡入淡出用 EaseOut 更干净 ——
|
||||
* 起手即有响应、尾段缓慢收住，正是"压暗"该有的节奏。
|
||||
*/
|
||||
export function fbMaskTransition(): TransitionEffect {
|
||||
return TransitionEffect.OPACITY.animation({ duration: MASK_MS, curve: Curve.Friction });
|
||||
return TransitionEffect.asymmetric(
|
||||
withAnim(TransitionEffect.OPACITY, MASK_IN_MS, Curve.EaseOut),
|
||||
withAnim(TransitionEffect.OPACITY, MASK_OUT_MS, Curve.EaseIn)
|
||||
);
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// 对外：浮层卡片
|
||||
// ============================================================
|
||||
|
||||
/**
|
||||
* 浮层卡片过渡：淡入 + 从 0.94 放大到 1（消失时反向）。
|
||||
* 浮层卡片过渡（**全站统一入口**，98 处引用）。
|
||||
*
|
||||
* 🔴 用户说的"点击详情，框变大了"就是这一条：
|
||||
* 从简要卡换到详情卡是一次**整层替换**（简要卡消失、详情卡出现），
|
||||
* 两张卡各自做"淡入 + 放大"⇒ 观感上就是"同一个框长大了一号"。
|
||||
* 入场：淡入 + 0.90→1 放大 + 从下方 22vp 托起，320ms，弹性收尾。
|
||||
* 出场：淡出 + 缩到 0.96 + 往下 10vp，200ms，EaseIn。
|
||||
*
|
||||
* ⚠️ 缩放比不要给太小（如 0.5）：本工程的浮层卡片是"92% 宽、高度按内容"，
|
||||
* 缩太小会先看到一个小方块弹一下，反而像另一个控件；
|
||||
* 0.94 是"刚好看出在长大、但不觉得跳"的甜点。
|
||||
* ⚠️ 缩放中心默认是组件中心；卡片根节点是"铺满屏幕 + 内容居中"，
|
||||
* 所以视觉上就是**围绕屏幕中心长大**，正是要的效果。
|
||||
* 🔴 曲线为什么用弹簧（`sheetSpring()` = `curves.springCurve(0, 1, 228, 26)`）
|
||||
* 而不是预设曲线：
|
||||
* "丝滑"的本质是**末段有减速、落定时不硬停**。`FastOutSlowIn` 虽然首尾都慢，
|
||||
* 但它是固定时长缓动，落定那一下仍然是"停住"；
|
||||
* 物理弹簧的末段是自然收敛的，主观感受明显更有质感。
|
||||
* ⚠️ 参数含义与取值依据见 `sheetSpring()` 的注释（含"为什么不能用
|
||||
* `Curve.springMotion`" —— 本工程 SDK 里没有那个 API，会编译失败）。
|
||||
*/
|
||||
export function fbSheetTransition(): TransitionEffect {
|
||||
const effect: TransitionEffect = TransitionEffect.OPACITY
|
||||
.combine(TransitionEffect.scale({ x: 0.94, y: 0.94 }));
|
||||
// ⚠️ combine 之后必须**再挂一次** animation（见文件头说明）
|
||||
return effect.animation({ duration: SHEET_MS, curve: Curve.FastOutSlowIn });
|
||||
const spring: ICurve = sheetSpring();
|
||||
return TransitionEffect.asymmetric(
|
||||
sheetIn(SHEET_IN_MS, spring),
|
||||
sheetOut(SHEET_OUT_MS, Curve.EaseIn)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 从小窗换到大窗时的"继续长大"过渡（简要卡 → 详情卡）。
|
||||
*
|
||||
* 与 `fbSheetTransition` 的区别只在**起始缩放比**：这里是 0.96（几乎等大），
|
||||
* 因为上一层的卡片已经在屏幕上了，从 0.94 起会看到"先缩一下再长大"的抖动。
|
||||
* 与 `fbSheetTransition` 的区别只在**起始缩放比**更大（0.96，几乎等大）：
|
||||
* 因为上一层的卡片已经在屏幕上了，从 0.90 起会看到"先缩一下再长大"的抖动。
|
||||
* ⚠️ 位移也减半（8vp）：两张卡都在屏幕中间，位移太大会像"跳了一下"。
|
||||
* ⚠️ 弹簧响应略快（0.32）：这是"在已有东西上叠一层"，比全新入场要更跟手。
|
||||
*/
|
||||
export function fbSheetGrowTransition(): TransitionEffect {
|
||||
const effect: TransitionEffect = TransitionEffect.OPACITY
|
||||
.combine(TransitionEffect.scale({ x: 0.96, y: 0.96 }));
|
||||
return effect.animation({ duration: SHEET_MS, curve: Curve.FastOutSlowIn });
|
||||
const spring: ICurve = sheetSpring();
|
||||
const appear: TransitionEffect = withAnim(
|
||||
TransitionEffect.OPACITY
|
||||
.combine(TransitionEffect.scale({ x: 0.96, y: 0.96 }))
|
||||
.combine(TransitionEffect.translate({ y: 8 })),
|
||||
SHEET_IN_MS, spring);
|
||||
const disappear: TransitionEffect = withAnim(
|
||||
TransitionEffect.OPACITY
|
||||
.combine(TransitionEffect.scale({ x: 0.97, y: 0.97 })),
|
||||
SHEET_OUT_MS, Curve.EaseIn);
|
||||
return TransitionEffect.asymmetric(appear, disappear);
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -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` 一定会垫一份壳）；
|
||||
// 只有"打开浮层时状态被清掉"这种瞬时态才可能空着 ——
|
||||
|
||||
@@ -294,14 +294,43 @@ export struct FbMovieDetailSheet {
|
||||
.padding({ top: 40, bottom: 40 })
|
||||
.justifyContent(FlexAlign.Center)
|
||||
} else if (this.loading || this.detail === null) {
|
||||
Row() {
|
||||
Text('正在加载详情…')
|
||||
.fontSize(FbMetric.fontSmall)
|
||||
.fontColor(FbColors.faint)
|
||||
/* 🔴 2026-11-06：**加载态要占住卡片的常规高度**，不能只放一行字。
|
||||
用户说「观影基本上没动画」。核实后原因是：
|
||||
卡片高度是"按内容"的（`maxHeight: 72%` 只是上限），
|
||||
加载态只有一行「正在加载详情…」⇒ 卡片约 100px 高；
|
||||
详情一回来，内容把卡片瞬间撑到 72% 屏高。
|
||||
入场动画（320ms 淡入+放大+上浮）只播了前 1/3 就被这次
|
||||
**高度突变**打断 —— 用户看到的就是"闪一下就变满"，没有动画感。
|
||||
⇒ 加载态放**固定 460vp** 的骨架（约等于这条卡详情态的常见高度），
|
||||
让动画期间尺寸基本恒定；内容回来只是把里面换掉，不再整卡重排。
|
||||
⚠️ 为什么用固定 vp 而不是 `height('100%')`：
|
||||
这个 builder 渲染在 `Scroll` 里，Scroll 的高度是"按内容"的，
|
||||
百分比高度拿不到确定基准 ⇒ 会退化成一像素或直接不渲染。
|
||||
固定值是这个结构下唯一可靠的选择（与本文件其它地方的取舍一致）。
|
||||
⚠️ 460 的依据：详情态常见内容（海报 140 + 片名/时间/评分 + 影院 +
|
||||
简介 3~5 行 + 照片一行 + 评价区标题）大约 430~500vp，
|
||||
取中间值，两侧都不会有明显跳变。 */
|
||||
Column({ space: 12 }) {
|
||||
/* 骨架块：比一行灰字更像"内容正在来"，也把高度撑住 */
|
||||
Column()
|
||||
.width(96)
|
||||
.height(128)
|
||||
.borderRadius(FbMetric.radiusS)
|
||||
.backgroundColor(FbColors.inputBg)
|
||||
ForEach([0, 1, 2, 3], (i: number) => {
|
||||
Column()
|
||||
.width(i === 0 ? '40%' : (i === 1 ? '78%' : (i === 2 ? '86%' : '58%')))
|
||||
.height(i === 0 ? 16 : 11)
|
||||
.borderRadius(6)
|
||||
.backgroundColor(FbColors.inputBg)
|
||||
.margin({ top: i === 0 ? 6 : 0 })
|
||||
}, (i: number): string => 'sk_' + i.toString())
|
||||
}
|
||||
.width('100%')
|
||||
.padding({ top: 40, bottom: 40 })
|
||||
.height(460)
|
||||
.padding({ top: 24, bottom: 24 })
|
||||
.justifyContent(FlexAlign.Center)
|
||||
.alignItems(HorizontalAlign.Center)
|
||||
} else {
|
||||
this.body(this.detail)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user