Interaction Lab

全部都能点、能按、能拖。手感目标:Duolingo 的多巴胺,Money Twin 的绿。 每个演示下面标注了曲线/时长参数,定稿后逐条翻译成 Compose。

face 悬在 4dp 深色唇上,按下 translateY(-4→0) 100ms ease-out。 按压即反馈,无 ripple。Compose 里已上线,这里确认手感。

Food
Groceries
Transport
Shopping
Bills
Others

点卡:按下 scale(0.97) 160ms;选中:绿环 + spring pop (stiffness 320 / damping 16,轻微过冲)。同一张卡连点不会重启动画(transition 思维)。

Remember this merchant
Internal transfer

thumb translateX 220ms ease-out,轨道换色 160ms。 快速连打可中断(transition 从当前值重定向)。

从底部进、从底部出(对称路径),400ms ease(Sonner 性格:稍慢才优雅), 2.4s 自动退出。内容:已记住 MR DIY → Shopping——"记住"开关必须有回执。

进入 500ms ease-drawer(iOS 抽屉曲线)。按住弹层往下拖: 跟手、过界有阻尼;松手时速度 > 0.11 或位移 > 120px 就关闭, 否则 spring 回弹。甩一下就关,不用拖到底。

Safe to spend today
RM 54
Can spend today · 数字随消费实时倒数

数字用 spring(stiffness 120 / damping 20)从旧值滚到新值,到位时轻微 pulse 一下。钱变少要"看得见地变少",这是省钱反馈的第一现场。

5
天连续不超支
植物和你一起长大

rare 级庆祝预算就花在这:streak 数字 spring pop,植物弹跳 + 叶子抖动, 同时爆出 10 片叶子(WAAPI,900ms 抛物线后淡出)。每天一次,不腻。

Japan 旅行RM 1,200 / 2,000
目标达成!

fill 用 scaleX(GPU 属性,不动 layout)+ spring。 到 100% 时 "目标达成" chip 从 scale(0.9) pop 进场。点满后自动重置可再玩。

按下 scale(0.88) rotate(12°) 160ms ease-out。 ✦ 是全 App 唯一允许"皮"一下的常驻元素(Stage 4 的 Agent 入口)。

交互属性曲线/时长
Chunky 按压translateY -4→0ease-out 100ms
通用 pressscale(0.97)ease-out 160ms
分类选中 popscale springk320 / d16,微过冲
SwitchtranslateX + 背景色ease-out 220/160ms
ToasttranslateY + opacityease 400ms,对称进出
Sheet 进/出translateY(100%)ease-drawer 500ms
Sheet 拖拽跟手 + 阻尼速度 0.11 / 120px 阈值,spring 回弹
Hero 数字数值插值 + 到位 pulsespring k120 / d20
Streak 庆祝pop + 叶子爆(WAAPI)900ms,每天 ≤1 次
Goal 填充scaleX springk120 / d20;100% 时 chip pop

门禁说明(animate skill):以上全部是"偶尔/罕见"或"按压反馈"级——允许动画。 不做的:列表滚动项入场 stagger(每天看几十次,禁用)、常驻呼吸/漂浮动画 (数字是功能数据,不为风格而动)、confetti 圆点(换成叶子,守品牌)。 翻译到 Compose 时加 performHapticFeedback:chunky 确认、streak 庆祝各一下。 全部遵守系统"移除动画"开关(Motion.kt 已有纪律)。

已记住 MR DIY → Shopping

MR DIY (M) SDN BHD

这张弹层可以从任意位置按住往下拖。快速下甩直接关闭;慢慢拖超过 120px 也关闭;否则 spring 回原位。拖过顶部边界会有阻尼感。