http://xmasuhai.xyz/tags/react-spring/ Recent content in React Spring on Joel in The House Hugo -- gohugo.io zh-cn xmasuhai@163.org (Joel Xu) xmasuhai@163.org (Joel Xu) Joel Xu Sun, 08 Nov 2026 04:29:00 +0800 http://xmasuhai.xyz/post/%E5%B1%B1%E7%AB%B9%E8%AE%B0%E8%B4%A6/%E7%95%AA%E5%A4%96/%E5%B1%B1%E7%AB%B9%E8%AE%B0%E8%B4%A6%E6%97%A5%E6%9C%9F%E9%80%89%E6%8B%A9%E7%BB%84%E4%BB%B6%E5%BC%B9%E6%80%A7%E5%8A%A8%E7%94%BB%E5%88%86%E6%9E%90/ Sun, 08 Nov 2026 04:29:00 +0800 xmasuhai@163.org (Joel Xu) http://xmasuhai.xyz/post/%E5%B1%B1%E7%AB%B9%E8%AE%B0%E8%B4%A6/%E7%95%AA%E5%A4%96/%E5%B1%B1%E7%AB%B9%E8%AE%B0%E8%B4%A6%E6%97%A5%E6%9C%9F%E9%80%89%E6%8B%A9%E7%BB%84%E4%BB%B6%E5%BC%B9%E6%80%A7%E5%8A%A8%E7%94%BB%E5%88%86%E6%9E%90/ <h2 id="前言-一个日期滚轮-为什么不只是修改-translatey">前言：一个日期滚轮，为什么不只是修改 translateY？</h2> <blockquote> <p><a href="https://github.com/xmasuhai/mangosteen-react-1/tree/008526615741655cb2a7eda6a8b790d33951c545">源码</a></p> </blockquote> <p>移动端的日期选择器通常由年、月、日三列组成。用户上下拖动某一列，数字跟随手指移动；拖过首项或末项时，列表还能被稍微拉出去，但越拉越费力；松手后，列表又弹回最近的合法选项。</p> <p>看上去只是几个数字在移动，实际上需要同时处理四件事：</p> <ol> <li><strong>跟手</strong>：正常范围内，手指移动多少，列表就移动多少。</li> <li><strong>越界阻尼</strong>：超过首尾边界后，不突然卡住，也不无限移动。</li> <li><strong>离散吸附</strong>：松手时，选中项必须对齐到一整行，不能停在两项中间。</li> <li><strong>弹性过渡</strong>：从松手位置到目标项之间，有自然的回弹过程，而且可以被下一次手势打断。</li> </ol> <p>本文结合山竹记账中的以下文件，拆解这套交互的实现：</p> <table> <thead> <tr> <th>文件</th> <th>职责</th> </tr> </thead> <tbody> <tr> <td><code>src/components/form/DatePickerPopup.tsx</code></td> <td>组织年月日三列、生成选项、绘制遮罩和选中框</td> </tr> <tr> <td><code>src/components/form/DateTimeColumn.tsx</code></td> <td>处理触摸生命周期、驱动动画、同步选中值</td> </tr> <tr> <td><code>src/components/form/dateTimeColumnMotion.ts</code></td> <td>提供拖动、阻尼、索引计算三个纯函数</td> </tr> <tr> <td><code>src/components/form/__test__/dateTimeColumnMotion.test.ts</code></td> <td>用 Vitest 验证核心数值规则</td> </tr> </tbody> </table> <p>动画使用 <code>@react-spring/web</code>，当前项目中的版本是 <code>10.1.2</code>。本文代码与分析以当前实现为准，不把后文讨论的改进方向描述成已经完成的功能。</p> <p>先给出全文最重要的结论：</p> <blockquote> <p><strong>拖动时的“阻力感”来自位移映射，松手后的“回弹感”来自弹簧动画。前者解决“显示在哪里”，后者解决“如何随时间到达目标”。两者不是同一件事。</strong></p> </blockquote>