feat: gap-safe settle, snappier spring, and jitter dead-zone for disappearing bars

Three refinements to the disappearing top/bottom bar animations:

- Gap-safe settle: settleToNearestEdge could snap a partially-collapsed bar to
  fully hidden whenever it was past the halfway point, even when the content had
  only scrolled part of a bar height (e.g. a gentle flick from the top). Because
  the content padding is fixed and the bar is translated, hiding it further than
  the content scrolled reopens the same blank band the reveal-damping fix removed.
  Each bar now latches whether it has actually reached its hidden edge through
  scrolling; the settle only commits to fully hidden when that latch is set,
  otherwise it settles back into view. This keeps the deliberate-reveal behavior
  (a sub-halfway reveal after fully hiding still snaps back hidden) without the gap.

- Snappier settle spring: StiffnessMediumLow -> StiffnessMedium so the bars
  resolve to their edge with a quick native snap instead of a slow float. Still
  DampingRatioNoBouncy, and overshoot stays clamped by animateOne's bounds.

- Micro-scroll dead-zone: ignore sub-pixel scroll attempts so jitter doesn't
  nudge the bars or flip the binary status-bar toggle. Kept tiny and symmetric so
  the reveal never lags the content enough to open a gap.

Proportional top/bottom collapse was intentionally left out: both bars already
move at the same pixel rate (visual lock-step for their shared travel), and
forcing the shorter bar to finish at the same time as the taller one would push
it off the 1:1 content track and reintroduce a gap.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011jbLnoWks19ottXNrMZ6DH
This commit is contained in:
Claude
2026-06-21 20:32:03 +00:00
parent 73d52401cd
commit d96d0220fb
3 changed files with 112 additions and 6 deletions
@@ -24,6 +24,7 @@ import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.input.nestedscroll.NestedScrollConnection
import androidx.compose.ui.input.nestedscroll.NestedScrollSource
import androidx.compose.ui.unit.Velocity
import kotlin.math.abs
/**
* Scroll-linked connection that hides/reveals the top and bottom bars together.
@@ -66,7 +67,10 @@ class DisappearingBarNestedScroll(
): Offset {
if (!canScroll()) return Offset.Zero
val totalY = consumed.y + available.y
if (totalY == 0f) return Offset.Zero
// Dead-zone: ignore sub-pixel jitter so the bars (and the binary status-bar toggle that
// tracks their collapse fraction) don't twitch on scroll noise. Kept symmetric and tiny so
// it never makes the reveal lag the content enough to open a visible gap.
if (abs(totalY) < MIN_SCROLL_DELTA) return Offset.Zero
// If the list did not consume any scroll and the bars are fully visible, treat
// this as a non-scrollable list and keep the bars in place. Without this, a tiny
@@ -101,4 +105,13 @@ class DisappearingBarNestedScroll(
state.topHeightOffset = (state.topHeightOffset + deltaY).coerceIn(-topLimit, 0f)
state.bottomHeightOffset = (state.bottomHeightOffset + deltaY).coerceIn(-bottomLimit, 0f)
}
companion object {
/**
* Sub-pixel dead-zone: scroll attempts smaller than this are ignored so jitter doesn't nudge
* the bars. Tiny on purpose — large enough to swallow fractional noise, small enough that the
* bar offset never measurably lags the content scroll.
*/
const val MIN_SCROLL_DELTA = 0.5f
}
}
@@ -46,8 +46,46 @@ class DisappearingBarState(
initialTopHeightOffset: Float = 0f,
initialBottomHeightOffset: Float = 0f,
) {
var topHeightOffset by mutableFloatStateOf(initialTopHeightOffset)
var bottomHeightOffset by mutableFloatStateOf(initialBottomHeightOffset)
private var _topHeightOffset by mutableFloatStateOf(initialTopHeightOffset)
private var _bottomHeightOffset by mutableFloatStateOf(initialBottomHeightOffset)
/**
* Latches that record whether each bar has been driven all the way to its hidden edge by real
* scrolling since it was last fully in view. The settle reads them to tell a deliberate hide —
* where the content has scrolled at least a full bar height, so snapping the bar fully hidden
* leaves content (not a blank band) in the slot it vacates — apart from a small near-top
* collapse, where snapping hidden would expose the background because the content hasn't
* scrolled far enough to fill the bar's slot.
*/
private var topReachedHiddenEdge = false
private var bottomReachedHiddenEdge = false
var topHeightOffset: Float
get() = _topHeightOffset
set(value) {
_topHeightOffset = value
updateLatch(value, topHeightLimit) { topReachedHiddenEdge = it }
}
var bottomHeightOffset: Float
get() = _bottomHeightOffset
set(value) {
_bottomHeightOffset = value
updateLatch(value, bottomHeightLimit) { bottomReachedHiddenEdge = it }
}
private inline fun updateLatch(
offset: Float,
limit: Float,
set: (Boolean) -> Unit,
) {
if (limit <= 0f) return
if (offset >= 0f) {
set(false)
} else if (offset <= -limit) {
set(true)
}
}
var topHeightLimit: Float = 0f
set(value) {
@@ -76,8 +114,8 @@ class DisappearingBarState(
*/
suspend fun settleToNearestEdge(initialVelocityY: Float = 0f) {
coroutineScope {
launch { settleOne({ topHeightOffset }, topHeightLimit, initialVelocityY) { topHeightOffset = it } }
launch { settleOne({ bottomHeightOffset }, bottomHeightLimit, initialVelocityY) { bottomHeightOffset = it } }
launch { settleOne({ topHeightOffset }, topHeightLimit, topReachedHiddenEdge, initialVelocityY) { topHeightOffset = it } }
launch { settleOne({ bottomHeightOffset }, bottomHeightLimit, bottomReachedHiddenEdge, initialVelocityY) { bottomHeightOffset = it } }
}
}
@@ -94,6 +132,7 @@ class DisappearingBarState(
private suspend fun settleOne(
get: () -> Float,
limit: Float,
canFullyHide: Boolean,
initialVelocityY: Float,
set: (Float) -> Unit,
) {
@@ -105,6 +144,11 @@ class DisappearingBarState(
val positionBiasToHide = -current > limit / 2f
val target =
when {
// Snapping to the hidden edge is only safe once the bar has actually been scrolled
// there (canFullyHide): the content has then moved at least a full bar height and
// fills the slot the bar vacates. From a small near-top collapse it hasn't, so
// snapping hidden would open a blank band — settle back into view instead.
!canFullyHide -> 0f
initialVelocityY < -VELOCITY_BIAS_THRESHOLD -> -limit
initialVelocityY > VELOCITY_BIAS_THRESHOLD -> 0f
positionBiasToHide -> -limit
@@ -142,10 +186,14 @@ class DisappearingBarState(
companion object {
private const val VELOCITY_BIAS_THRESHOLD = 200f
// Bounce-free so the chrome never wobbles past its edge, but stiff enough to feel like a
// quick native snap rather than a slow float once the finger lifts. Overshoot from a strong
// initial velocity is still caught by the bounds in animateOne, so a higher stiffness here
// only affects how briskly the bar resolves to its edge.
private val SETTLE_SPRING =
spring<Float>(
dampingRatio = Spring.DampingRatioNoBouncy,
stiffness = Spring.StiffnessMediumLow,
stiffness = Spring.StiffnessMedium,
)
val Saver: Saver<DisappearingBarState, *> =
@@ -93,4 +93,49 @@ class DisappearingBarStateTest {
assertTrue("top bar overshot to $peakTop", peakTop <= 0.5f)
assertTrue("bottom bar overshot to $peakBottom", peakBottom <= 0.5f)
}
@Test
fun `a partial collapse that never reached the hidden edge settles back into view`() =
runTest {
// The bar is past the halfway point but was only ever scrolled here from the top — it
// never reached -limit, so the content hasn't moved a full bar height. Snapping it fully
// hidden would expose a blank band, so it must settle back to visible instead.
val state = state(topLimit = 100f, bottomLimit = 50f)
state.topHeightOffset = -80f
peakOffsetsDuring(state) { state.settleToNearestEdge() }
assertEquals(0f, state.topHeightOffset, 0.01f)
}
@Test
fun `a small reveal after fully hiding settles back to hidden, not into view`() =
runTest {
// Drive the bar to its hidden edge first (content has now scrolled a full bar height),
// then nudge it back a little — the small reverse drag a finger makes catching a scroll.
// Because it genuinely reached the hidden edge, snapping back hidden leaves no gap, so a
// sub-halfway reveal must not pop the chrome back open.
val state = state(topLimit = 100f, bottomLimit = 50f)
state.topHeightOffset = -100f
state.topHeightOffset = -90f
peakOffsetsDuring(state) { state.settleToNearestEdge() }
assertEquals(-100f, state.topHeightOffset, 0.01f)
}
@Test
fun `returning fully into view re-arms the gap guard so the next near-top collapse settles open`() =
runTest {
// Hide fully (arms the latch), come all the way back to visible (disarms it), then do a
// small near-top collapse again. It must settle open, proving the latch resets at 0.
val state = state(topLimit = 100f, bottomLimit = 50f)
state.topHeightOffset = -100f
state.topHeightOffset = 0f
state.topHeightOffset = -80f
peakOffsetsDuring(state) { state.settleToNearestEdge() }
assertEquals(0f, state.topHeightOffset, 0.01f)
}
}