Lottie 与微交互

细节动效提升体验：关键帧矢量动画（Lottie 原理）、点赞粒子、开关与涟漪反馈，画布逐帧复现并读出动画数值。

技术栈: Canvas 2D, 关键帧插值, spring 弹簧

• Lottie 动画 — Lottie 原理：按关键帧时刻对每个图层的位置、缩放、旋转做插值播放。
• 点赞与反馈 — 点赞粒子爆发、收藏、计数滚动。
• 开关与涟漪 — Toggle、Checkbox 描边、Material 涟漪与加载按钮。
• 心跳赞 — 已点赞的爱心像心脏一样有节奏地跳动——快速放大再回落，像「扑通」一声。
• 勾选弹跳 — 点击复选框时，方框先缩小一下、再超过原大小弹回来（弹簧），同时对勾沿着笔画从左到右「画」出来，文字加上删除线…
• 发送纸飞机 — 点击「发送」后，按钮里的纸飞机图标沿一条二次贝塞尔曲线飞出画面并留下尾迹，按钮文字变成「已发送 ✓」，稍后恢…
• 复制成功 — 点击代码块右上角的复制按钮，代码会被高亮扫过一次（表示已选中），按钮图标从「两张纸」变成「对勾」，底部弹出「…
• 下载进度 — 每个文件一条进度条，进度从 0% 增长到 100%。
• 骨架屏 — 数据还在加载时，先用灰色的圆和长条画出页面的大致轮廓，再让一道高光从左往右扫过，告诉用户「正在加载」。
• 轻提示 Toast — 操作后在屏幕底部弹出一条短提示，几秒后自动消失，不打断用户。
• 徽章跳动 — 图标右上角的红色小圆显示未读数量。
• 拖动卡片 — 按住卡片可以拖着走，卡片会稍微放大、加深阴影并跟随拖动方向倾斜；松手后，卡片像被弹簧拉着一样弹回原来的位置。
• 长按确认 — 危险操作（比如删除）不希望被误点，于是要求按住一段时间。
• 摇一摇提示 — 密码输错时，输入框会像摇头一样左右快速晃几下并变红，同时下方出现错误提示。
• 滑动验证 — 图片上有一个拼图形状的缺口，用户拖动下方滑块，拼图块跟着横向移动，松手时如果拼图与缺口的距离小于容差，就验证…
• 双击放大 — 在图片上快速点两下，图片会以双击的位置为中心平滑放大（就像手机相册），再双击一次缩回。
• 悬停磁吸 — 指针进入按钮周围的感应范围后，按钮朝指针方向偏移一点，按钮上的文字偏移得更多（产生层次感），离开后弹回原位。
• 按压波纹 — 点击按钮时，从点击的位置画一个圆，圆的半径迅速变大、颜色逐渐变淡，并被裁剪在按钮的圆角矩形内部。
• 开关弹簧 — 开关的圆钮不是匀速滑过去，而是像挂在弹簧上一样冲过头一点再弹回来，最后停稳。