https://saucewu.github.io/tags/animation/Recent content in Animation on Website of SauceWuHugo -- gohugo.iozhMon, 07 Apr 2025 13:15:00 +0900https://saucewu.github.io/posts/flutter-k%E7%BA%BF%E7%B3%BB%E7%BB%9F%E6%8B%86%E8%A7%A3%E5%9B%9B%E4%BA%A4%E4%BA%92%E4%BD%93%E7%B3%BB%E4%B8%8E%E6%80%A7%E8%83%BD%E5%B7%A5%E7%A8%8B/Mon, 07 Apr 2025 13:15:00 +0900https://saucewu.github.io/posts/flutter-k%E7%BA%BF%E7%B3%BB%E7%BB%9F%E6%8B%86%E8%A7%A3%E5%9B%9B%E4%BA%A4%E4%BA%92%E4%BD%93%E7%B3%BB%E4%B8%8E%E6%80%A7%E8%83%BD%E5%B7%A5%E7%A8%8B/<h1 id="flutter-k线系统拆解四交互体系与性能工程">Flutter K线系统拆解（四）：交互体系与性能工程</h1> <h2 id="为什么交互比指标更容易暴露问题">为什么交互比指标更容易暴露问题</h2> <p>很多交易页在功能上都能“跑起来”，但只要用户开始频繁缩放、拖动、长按，体验差异会立刻被放大。<br> 体感里的“丝滑”和“卡顿”，通常不来自单一 bug，而是交互链路里多个小问题叠加：</p> <ul> <li>手势事件触发过密</li> <li>状态更新范围过大</li> <li>动画和计算抢同一帧预算</li> <li>非关键绘制在高频交互里持续执行</li> </ul> <p>所以这一篇的重点不是“某个技巧”，而是如何把交互链路做成一套稳定的工程系统。</p> <hr> <h2 id="一交互设计里的三个关键决定">一、交互设计里的三个关键决定</h2> <h3 id="1-方向锁定先判断用户意图再决定谁接管手势">1) 方向锁定：先判断用户意图，再决定谁接管手势</h3> <p>在图表可编辑、页面又可滚动的场景里，方向锁是刚需。<br> 当手势轨迹偏垂直时，把事件交给外层滚动容器；偏水平时再由图表处理，这能明显减少“手势打架”。</p> <p>方向锁不是锦上添花，而是复杂页面里“能不能用”的分水岭。</p> <h3 id="2-状态分离长按拖拽缩放不要混成一个开关">2) 状态分离：长按、拖拽、缩放不要混成一个开关</h3> <p>把 <code>isLongPress</code>、<code>isDrag</code>、<code>isScale</code> 独立维护，收益很直接：<br> 状态更可控、回归更容易、边界问题更少。<br> 尤其在十字线与拖拽共存时，状态分离可以显著降低互相干扰。</p> <h3 id="3-绘制隔离高频区域和低频区域分开">3) 绘制隔离：高频区域和低频区域分开</h3> <p>给图表主体加 <code>RepaintBoundary</code>，本质是在缩小重绘传播范围。<br> 在包含导航栏、侧边信息、浮层工具条的复杂页面里，这个动作通常会带来稳定的帧率收益。</p>