@apexnative/navigation 1.0.0-alpha.4 → 1.0.0-alpha.6

package/android/src/main/java/dev/apexnative/navigation/views/bottomtabs/BottomTabsLayout.kt

@@ -10,13 +10,15 @@ import androidx.annotation.RestrictTo
 import androidx.core.view.ViewCompat
 import androidx.core.view.WindowInsetsCompat
 import dev.apexnative.navigation.utils.MaterialTheme
+import dev.apexnative.navigation.viewcontrollers.bottomtabs.CustomTabRowGeometry
 
 /**
  * The view of bottom tabs: the view of each tab made so far fills it, the selected one visible and the others invisible
  * but laid out, so a switch shows a tab at once and its screens render; the bar's [container] lies over them at the
  * bottom, the module's bar ([bar], `R.id.bottomTabs`) in it. The container's distance from the bottom ([barOffset]:
  * `bottomMargin`, and the navigation bar under a compact bar) is this view's own inset, not a layout parameter a root
- * may ignore. The window insets go on to every child as they came. Main thread only.
+ * may ignore. The custom [row], when the tabs have one, lies right after the container and over the bar. The window
+ * insets go on to every child as they came. Main thread only.
  */
 @SuppressLint("ViewConstructor")
 @RestrictTo(RestrictTo.Scope.LIBRARY)
@@ -34,8 +36,25 @@ class BottomTabsLayout(context: Context) : FrameLayout(context) {
     /** The window insets reached this view: the bar's room and the screens' room may have changed. */
     internal var onInsets: (() -> Unit)? = null
 
-    /** The custom row of the tabs, when every tab draws its cell (`bottomTab.component`); the placer puts it. */
+    /**
+     * The custom row of the tabs, when every tab draws its cell (`bottomTab.component`): a child right after the
+     * container, laid out over the bar, going with the container.
+     */
     internal var row: CustomTabRow? = null
+        set(value) {
+            if (field === value) return
+            field?.let {
+                removeView(it)
+                it.container = null
+            }
+            field = value
+            if (value == null) return
+            (value.parent as? ViewGroup)?.removeView(value)
+            value.container = container
+            value.place = null
+            // Its frame is absolute: the layout below puts it in its parameters.
+            addView(value, indexOfChild(container) + 1, LayoutParams(0, 0, Gravity.TOP or Gravity.LEFT))
+        }
 
     /** The container's distance from the bottom, in pixels. */
     internal var barOffset = 0
@@ -59,6 +78,16 @@ class BottomTabsLayout(context: Context) : FrameLayout(context) {
         }
     }
 
+    /**
+     * How far the container goes down to leave the screen whole: from the top of what the bar shows — the container, or
+     * the custom row that rises above it — to this view's bottom, in pixels.
+     */
+    internal val hideDistance: Int
+        get() {
+            val rowTop = row?.takeIf { it.visibility != View.GONE }?.top ?: container.top
+            return (height - minOf(container.top, rowTop)).coerceAtLeast(0)
+        }
+
     /** [view] of a tab joins under the bar, invisible until its tab shows. */
     internal fun addTab(view: View) {
         if (view.parent === this) return
@@ -85,5 +114,35 @@ class BottomTabsLayout(context: Context) : FrameLayout(context) {
     override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
         super.onLayout(changed, left, top, right, bottom)
         if (barOffset != 0) container.offsetTopAndBottom(-barOffset)
+        row?.let(::placeRow)
+    }
+
+    // The row over the bar where the bar rests (its container's motion the row takes before each frame), when its place
+    // changed: laid out there at once, and kept in its parameters, so the next passes measure it and put it there the
+    // same way. A hidden bar keeps the row where it was.
+    private fun placeRow(row: CustomTabRow) {
+        if (container.visibility == View.GONE || bar.width == 0) return
+        val barLeft = container.left + bar.left
+        val barTop = container.top + bar.top
+        val place = row.placeOver(
+            barLeft = barLeft,
+            barRight = barLeft + bar.width,
+            barBottom = barTop + bar.height,
+            barHeight = bar.height,
+            tabsHeight = height,
+            navigationBar = navigationBarInset,
+        )
+        if (!CustomTabRowGeometry.needsPlacing(row.place, place)) return
+        row.place = place
+        val params = row.layoutParams as LayoutParams
+        params.width = place.right - place.left
+        params.height = place.bottom - place.top
+        params.leftMargin = place.left
+        params.topMargin = place.top
+        row.measure(
+            MeasureSpec.makeMeasureSpec(params.width, MeasureSpec.EXACTLY),
+            MeasureSpec.makeMeasureSpec(params.height, MeasureSpec.EXACTLY),
+        )
+        row.layout(place.left, place.top, place.right, place.bottom)
     }
 }

package/android/src/main/java/dev/apexnative/navigation/views/bottomtabs/CustomBottomTabItemView.kt

@@ -22,9 +22,6 @@ open class CustomBottomTabItemView(context: Context) : FrameLayout(context) {
     private var state: TabCellState? = null
     private var destroyed = false
 
-    /** Runs once as the cell stops: what was kept for its content's id goes. */
-    internal var onDestroyed: (() -> Unit)? = null
-
     /** The content the cell shows, filling it, made with [state] as its first props. */
     internal fun show(view: IReactView, state: TabCellState) {
         content = view
@@ -68,8 +65,6 @@ open class CustomBottomTabItemView(context: Context) : FrameLayout(context) {
         didDisappear()
         destroyed = true
         content?.destroy()
-        onDestroyed?.invoke()
-        onDestroyed = null
     }
 
     /** The props of [state] as React Native takes them. */

package/android/src/main/java/dev/apexnative/navigation/views/bottomtabs/CustomTabRow.kt

@@ -11,18 +11,21 @@ import android.view.MotionEvent
 import android.view.View
 import android.view.ViewGroup
 import android.view.ViewOutlineProvider
+import android.view.ViewTreeObserver
 import android.widget.FrameLayout
 import android.widget.LinearLayout
 import dev.apexnative.navigation.customrow.BottomTabsCustomRowOptions
 import dev.apexnative.navigation.utils.TestIds
+import dev.apexnative.navigation.utils.UiUtils
 import dev.apexnative.navigation.viewcontrollers.bottomtabs.CustomTabRowGeometry
 
 /**
- * The custom row of bottom tabs on Android (`bottomTabs.customRow`): a container over the bar, in the window's content,
- * that holds the tabs' cells in one row of equal widths in tab order. It owns its place, its look, its visibility and
- * the touches: each cell's place takes them, the React elements in the cell don't, and a tap or a long press of a place
- * goes to [onPress] or [onLongPress] with the tab's index. Where it lies is the placer's to say (`CustomTabRowPlacer`);
- * what it looks like its tabs'. Main thread only.
+ * The custom row of bottom tabs on Android (`bottomTabs.customRow`): a container over the bar, a child of the tabs'
+ * view right after the bar's container, that holds the tabs' cells in one row of equal widths in tab order. It owns its
+ * look, its visibility and the touches: each cell's place takes them, the React elements in the cell don't, and a tap
+ * or a long press of a place goes to [onPress] or [onLongPress] with the tab's index. The tabs' view lays it out over
+ * the bar ([placeOver]); before each frame it goes with the bar's [container]. What it looks like is its tabs'. Main
+ * thread only.
  */
 @SuppressLint("ViewConstructor")
 internal class CustomTabRow(context: Context) : FrameLayout(context) {
@@ -42,11 +45,23 @@ internal class CustomTabRow(context: Context) : FrameLayout(context) {
     /** A cell's place was long-pressed. */
     var onLongPress: ((Int) -> Unit)? = null
 
-    /** `bottomTabs.customRow` of the tabs, resolved: the placer reads its height and margins. */
+    /** `bottomTabs.customRow` of the tabs, resolved: its height and margins say where the row lies. */
     var options = BottomTabsCustomRowOptions()
 
     /**
-     * Where the placer put the row last, in its parent; none before it did. The frame holds `bottomMargin` below the
+     * The bar's container the row goes with: its motion (a ride, a slide, the hide on scroll), its alpha, its height
+     * over the screens and whether it shows. The tabs' view sets it as the row joins it.
+     */
+    var container: View? = null
+
+    // Before each frame of the window the row is in: it goes with the container.
+    private val following = ViewTreeObserver.OnPreDrawListener {
+        container?.let(::follow)
+        true
+    }
+
+    /**
+     * Where the tabs' view put the row last, in it; none before it did. The frame holds `bottomMargin` below the
      * content: the row draws, clips, casts its shadow, lays its cells and takes touches only over the content, and the
      * margin below lets the touches through to what is under it.
      */
@@ -117,10 +132,57 @@ internal class CustomTabRow(context: Context) : FrameLayout(context) {
         return super.dispatchTouchEvent(event)
     }
 
-    /** Whether the row shows its cells: it hides with the bar. */
-    fun showWith(bar: View) {
-        val wanted = if (bar.visibility != View.GONE) View.VISIBLE else View.GONE
+    /**
+     * Where the row lies over the bar whose edges are [barLeft], [barRight] and [barBottom] and whose height is
+     * [barHeight], in the tabs' view of [tabsHeight] with the navigation bar's [navigationBar] at its bottom: its
+     * height and margins from [options].
+     */
+    fun placeOver(barLeft: Int, barRight: Int, barBottom: Int, barHeight: Int, tabsHeight: Int, navigationBar: Int) =
+        CustomTabRowGeometry.inTabs(
+            barLeft = barLeft,
+            barRight = barRight,
+            barBottom = barBottom,
+            tabsHeight = tabsHeight,
+            navigationBar = navigationBar,
+            margin = UiUtils.dpToPixels(
+                context,
+                options.horizontalMargin.get(CustomTabRowGeometry.HORIZONTAL_MARGIN_DP.toDouble()),
+            ),
+            content = CustomTabRowGeometry.content(
+                barHeight = barHeight,
+                height = options.height.get(null)?.let { UiUtils.dpToPixels(context, it) },
+                extra = UiUtils.dpToPixels(context, CustomTabRowGeometry.EXTRA_HEIGHT_DP.toDouble()),
+            ),
+            bottomMargin = UiUtils.dpToPixels(context, options.bottomMargin.get(0.0)),
+        )
+
+    override fun onAttachedToWindow() {
+        super.onAttachedToWindow()
+        viewTreeObserver.addOnPreDrawListener(following)
+    }
+
+    override fun onDetachedFromWindow() {
+        viewTreeObserver.removeOnPreDrawListener(following)
+        super.onDetachedFromWindow()
+    }
+
+    // The row hides with the bar and takes its motion and its alpha (the tabs' own alpha and motion, and their
+    // parents', the row has as their child); it stands as high as the container, and leaves accessibility while its
+    // tabs wait to show.
+    private fun follow(container: View) {
+        val wanted = if (container.visibility != View.GONE) View.VISIBLE else View.GONE
         if (visibility != wanted) visibility = wanted
+        if (alpha != container.alpha) alpha = container.alpha
+        if (translationX != container.translationX) translationX = container.translationX
+        if (translationY != container.translationY) translationY = container.translationY
+        val lift = CustomTabRowGeometry.lift(container.z, elevation)
+        if (translationZ != lift) translationZ = lift
+        val mode = if (hiddenFromAccessibility()) {
+            View.IMPORTANT_FOR_ACCESSIBILITY_NO_HIDE_DESCENDANTS
+        } else {
+            View.IMPORTANT_FOR_ACCESSIBILITY_AUTO
+        }
+        if (importantForAccessibility != mode) importantForAccessibility = mode
     }
 
     /** Draws [look]; nothing changes when it is the one drawn. */

package/android/src/main/java/dev/apexnative/navigation/views/element/ElementTransitions.kt

@@ -15,6 +15,7 @@ import dev.apexnative.navigation.react.events.AppearanceDispatcher
 import dev.apexnative.navigation.utils.DevelopmentLog
 import dev.apexnative.navigation.utils.NavigationLog
 import dev.apexnative.navigation.viewcontrollers.viewcontroller.ViewController
+import dev.apexnative.navigation.views.animations.AnimationLayer
 import dev.apexnative.navigation.views.animations.SideAnimator
 import dev.apexnative.navigation.views.element.animators.SharedAnimatorFactory
 
@@ -161,9 +162,15 @@ internal class ElementTransition private constructor(private val layer: Transiti
         }
     }
 
+    // An element with views in it fades through a hardware layer only where its alpha would draw it into an offscreen
+    // buffer at every frame (AnimationLayer: its rendering overlaps). React's views overlap only with
+    // `needsOffscreenAlphaCompositing`, so most elements fade without one and nothing they draw outside their bounds (a
+    // box shadow) is clipped. A view without children fades its own drawing at no extra cost.
     private fun addElement(options: ElementTransitionOptions, item: Moved) {
         val base = SideAnimator.Base(xOffset = item.originX.toFloat(), yOffset = item.originY.toFloat())
-        SideAnimator.build(item.view, options, base)?.let(animators::add)
+        val animator = SideAnimator.build(item.view, options, base) ?: return
+        if (item.view is ViewGroup) AnimationLayer.during(item.view, animator)
+        animators += animator
     }
 
     // The pair's flight: `to` hidden until it starts, `from` hidden from its start; false when it doesn't fly.
@@ -176,7 +183,7 @@ internal class ElementTransition private constructor(private val layer: Transiti
     ): Boolean {
         val to = item.view
         val flight = SharedAnimatorFactory.create(
-            from, to, toParent, layer, options, fallbackDuration, DevelopmentLog::warn,
+            from, to, toParent, item.stub, layer, options, fallbackDuration, DevelopmentLog::warn,
         ) ?: return false
         val alpha = item.values[ALPHA]
         val fromAlpha = from.alpha

package/android/src/main/java/dev/apexnative/navigation/views/element/animators/ElementPictures.kt

@@ -45,6 +45,13 @@ internal class MoveAnimator : ValueAnimator() {
     private val frames = ArrayList<(Float) -> Unit>()
     private val ends = ArrayList<() -> Unit>()
     private var failed = false
+    private var cancelled = false
+
+    /**
+     * Whether the flight ran to its end: it wasn't cancelled and nothing in it failed. Read at its end; a flight that
+     * landed may keep showing its last frame until the transition gives its views back.
+     */
+    val landed: Boolean get() = !cancelled
 
     init {
         setFloatValues(0f, 1f)
@@ -52,6 +59,10 @@ internal class MoveAnimator : ValueAnimator() {
         addListener(object : AnimatorListenerAdapter() {
             override fun onAnimationStart(animation: Animator) = guarded { for (start in starts) start() }
 
+            override fun onAnimationCancel(animation: Animator) {
+                cancelled = true
+            }
+
             override fun onAnimationEnd(animation: Animator) {
                 for (end in ends) elementStep(element) { end() }
             }

package/android/src/main/java/dev/apexnative/navigation/views/element/animators/FlightGeometry.kt

@@ -1,46 +1,339 @@
 package dev.apexnative.navigation.views.element.animators
 
-import android.graphics.RectF
 import android.view.View
 import android.view.ViewGroup
-import dev.apexnative.navigation.utils.ViewUtils
-import dev.apexnative.navigation.utils.computeInheritedScale
-import dev.apexnative.navigation.views.element.TransitionLayer
+import dev.apexnative.navigation.views.animations.ValueInterpolation
+import kotlin.math.abs
+import kotlin.math.cos
+import kotlin.math.min
+import kotlin.math.roundToInt
+import kotlin.math.sin
 
 /**
- * Where a shared element flies in its transition's layer: from where `from` is on the screen, at the scale of its
- * parents, to `to`'s place in the layer (its margins and size). Pixels of the layer.
+ * How a view lies in its parent and is drawn there: its frame's corner, its translation, scale and rotation about its
+ * pivot, and its parent's scroll. What `View.getMatrix` does, the scale first, without the tilts (`rotationX`,
+ * `rotationY`) but for a half turn about x or y: React Native draws a mirror that way ([of]). Pixels and degrees,
+ * clockwise.
+ */
+internal class ViewPlacement(
+    val left: Float,
+    val top: Float,
+    val translationX: Float = 0f,
+    val translationY: Float = 0f,
+    val scaleX: Float = 1f,
+    val scaleY: Float = 1f,
+    val rotation: Float = 0f,
+    val pivotX: Float = 0f,
+    val pivotY: Float = 0f,
+    val parentScrollX: Float = 0f,
+    val parentScrollY: Float = 0f,
+) {
+    /** The point [x], [y] of the view in its parent's coordinates. */
+    fun toParent(x: Float, y: Float): FloatArray {
+        val dx = (x - pivotX) * scaleX
+        val dy = (y - pivotY) * scaleY
+        val radians = Math.toRadians(rotation.toDouble())
+        val cos = cos(radians).toFloat()
+        val sin = sin(radians).toFloat()
+        return floatArrayOf(
+            dx * cos - dy * sin + pivotX + translationX + left - parentScrollX,
+            dx * sin + dy * cos + pivotY + translationY + top - parentScrollY,
+        )
+    }
+
+    /** Whether the view shows mirrored: one of its scales is negative. */
+    val mirrors: Boolean get() = scaleX * scaleY < 0
+
+    companion object {
+        // How close to half a turn a tilt counts as a flip, in degrees.
+        private const val FLIP_TOLERANCE = 0.5f
+        private const val HALF_TURN = 180f
+
+        /** [view] as it lies now; [frameOf] the view whose frame and parent it takes (a stand-in where it was). */
+        fun of(view: View, frameOf: View = view): ViewPlacement {
+            val parent = frameOf.parent as? View
+            return withTilts(
+                left = frameOf.left.toFloat(),
+                top = frameOf.top.toFloat(),
+                translationX = view.translationX,
+                translationY = view.translationY,
+                scaleX = view.scaleX,
+                scaleY = view.scaleY,
+                rotation = view.rotation,
+                rotationX = view.rotationX,
+                rotationY = view.rotationY,
+                pivotX = view.pivotX,
+                pivotY = view.pivotY,
+                parentScrollX = parent?.scrollX?.toFloat() ?: 0f,
+                parentScrollY = parent?.scrollY?.toFloat() ?: 0f,
+            )
+        }
+
+        /**
+         * The placement of a view with these properties. React Native splits a mirror (`scaleX: -1`) into both scales
+         * negated and half a turn about x: a view turns about z after its scale and tilts about y, then x, last, and
+         * half a turn about x flips y after the turn, which is the same as flipping y first and turning the other way.
+         * Other tilts are left out.
+         */
+        fun withTilts(
+            left: Float,
+            top: Float,
+            translationX: Float,
+            translationY: Float,
+            scaleX: Float,
+            scaleY: Float,
+            rotation: Float,
+            rotationX: Float,
+            rotationY: Float,
+            pivotX: Float,
+            pivotY: Float,
+            parentScrollX: Float,
+            parentScrollY: Float,
+        ): ViewPlacement {
+            val flipsY = abs(abs(rotationX) - HALF_TURN) < FLIP_TOLERANCE
+            val flipsX = abs(abs(rotationY) - HALF_TURN) < FLIP_TOLERANCE
+            return ViewPlacement(
+                left = left,
+                top = top,
+                translationX = translationX,
+                translationY = translationY,
+                scaleX = if (flipsX) -scaleX else scaleX,
+                scaleY = if (flipsY) -scaleY else scaleY,
+                rotation = if (flipsX != flipsY) -rotation else rotation,
+                pivotX = pivotX,
+                pivotY = pivotY,
+                parentScrollX = parentScrollX,
+                parentScrollY = parentScrollY,
+            )
+        }
+    }
+}
+
+/**
+ * Where the points of a view are drawn in a transition's layer: through its own placement and each parent's ([chain],
+ * the view first, up to the top view of the window but not it), then moved by [offsetX], [offsetY] (where the top view
+ * is from the layer's corner). The angle and the scale are those of the whole chain: a turned or scaled parent turns
+ * or scales what is in it.
+ */
+internal class LayerPlace(
+    private val chain: List<ViewPlacement>,
+    private val offsetX: Float,
+    private val offsetY: Float,
+) {
+    /** The angle the view is drawn at, degrees, clockwise: a mirrored parent turns what is in it the other way. */
+    val rotation: Float = chain.fold(0f) { inner, placement ->
+        placement.rotation + if (placement.mirrors) -inner else inner
+    }
+
+    /** The scale it is drawn at along its own x (a mirror is negative). */
+    val scaleX: Float = chain.fold(1f) { product, placement -> product * placement.scaleX }
+
+    /** The scale it is drawn at along its own y. */
+    val scaleY: Float = chain.fold(1f) { product, placement -> product * placement.scaleY }
+
+    /** The point [x], [y] of the view in the layer. */
+    fun point(x: Float, y: Float): FloatArray {
+        var point = floatArrayOf(x, y)
+        for (placement in chain) point = placement.toParent(point[0], point[1])
+        return floatArrayOf(point[0] + offsetX, point[1] + offsetY)
+    }
+
+    /** The flight's end of a view of [width] × [height] drawn here. */
+    fun end(width: Int, height: Int): FlightEnd {
+        val center = point(width / 2f, height / 2f)
+        return FlightEnd(
+            centerX = center[0],
+            centerY = center[1],
+            width = width * abs(scaleX),
+            height = height * abs(scaleY),
+            rotation = rotation,
+            mirrorX = if (scaleX < 0) -1f else 1f,
+            mirrorY = if (scaleY < 0) -1f else 1f,
+            scale = min(abs(scaleX), abs(scaleY)),
+        )
+    }
+
+    companion object {
+        /**
+         * Where [view] is drawn in [layer]. With [standIn], [view] counts as lying where that one lies (its frame and
+         * parents) with its own properties: an element that moved into the layer, at the place it goes back to.
+         */
+        fun of(view: View, layer: View, standIn: View? = null): LayerPlace {
+            val placed = standIn ?: view
+            val chain = arrayListOf(ViewPlacement.of(view, placed))
+            var parent = placed.parent as? View
+            while (parent != null) {
+                val above = parent.parent as? View ?: break
+                chain += ViewPlacement.of(parent)
+                parent = above
+            }
+            // The window's top view (no parent view) lies where it is on the screen, with no properties of its own.
+            val base = parent ?: placed
+            val screen = IntArray(2)
+            base.getLocationOnScreen(screen)
+            val origin = IntArray(2)
+            layer.getLocationOnScreen(origin)
+            return LayerPlace(chain, (screen[0] - origin[0]).toFloat(), (screen[1] - origin[1]).toFloat())
+        }
+    }
+}
+
+/**
+ * One end of a shared element's flight in its layer: where its center is drawn, the size it shows (its own at the
+ * scale of its chain), its angle, whether it shows mirrored, and its scale (what its corners shrink by). Pixels.
+ */
+internal class FlightEnd(
+    val centerX: Float,
+    val centerY: Float,
+    val width: Float,
+    val height: Float,
+    val rotation: Float,
+    val mirrorX: Float = 1f,
+    val mirrorY: Float = 1f,
+    val scale: Float = 1f,
+) {
+    /** Whether [other] is drawn at the same place, size, angle and mirror: within half a pixel and 0.1°. */
+    fun sameAs(other: FlightEnd): Boolean =
+        abs(centerX - other.centerX) < SAME_PLACE && abs(centerY - other.centerY) < SAME_PLACE &&
+            abs(width - other.width) < SAME_PLACE && abs(height - other.height) < SAME_PLACE &&
+            abs(rotation - other.rotation) < SAME_ANGLE && mirrorX == other.mirrorX && mirrorY == other.mirrorY
+
+    companion object {
+        private const val SAME_PLACE = 0.5f
+        private const val SAME_ANGLE = 0.1f
+
+        /**
+         * Whether `to` shows elsewhere in its screen than in the layer with its own properties alone ([standIn] is
+         * where it was): a parent of its scales or turns it. A flight that landed then keeps it where it lands until
+         * the transition gives it back, or it would jump to its place in the layer meanwhile.
+         */
+        fun holdsAtEnd(to: View, standIn: View?, layer: View): Boolean {
+            if (standIn == null) return false
+            val inScreen = LayerPlace.of(to, layer, standIn).end(to.width, to.height)
+            return !inScreen.sameAs(LayerPlace.of(to, layer).end(to.width, to.height))
+        }
+    }
+}
+
+/**
+ * Where a shared element flies in its transition's layer: from where `from` is drawn to where `to` is drawn once it
+ * is back in its screen, both through their own and their parents' translation, scale and rotation. The center, the
+ * size and the mirror go evenly, the angle along the shorter arc (as on iOS). `to` lies in the layer at its margins
+ * ([toLeft], [toTop]) meanwhile.
  */
 internal class FlightGeometry(
-    /** `from`'s place and size in the layer. */
-    val from: RectF,
-    /** `to`'s place and size in the layer. */
-    val to: RectF,
-    /** The scale `from`'s parents give it along x: its corners shrink with it. */
-    val fromScale: Float,
+    val from: FlightEnd,
+    val to: FlightEnd,
+    val toLeft: Int,
+    val toTop: Int,
+    /** Whether `to` keeps the flight's last frame at the end ([FlightEnd.holdsAtEnd]). */
+    val holdsAtEnd: Boolean = false,
 ) {
     /** The width and height `to` is laid out at meanwhile: the larger of the two sizes. */
     val largest: Pair<Int, Int>
-        get() = maxOf(from.width(), to.width()).toInt() to maxOf(from.height(), to.height()).toInt()
+        get() = maxOf(from.width, to.width).roundToInt() to maxOf(from.height, to.height).roundToInt()
+
+    /** The flight at [fraction] of the way (the curve's value), [time] the part of the time. */
+    fun at(fraction: Float, time: Float): FlightEnd = FlightEnd(
+        centerX = ValueInterpolation.number(from.centerX, to.centerX, fraction, time),
+        centerY = ValueInterpolation.number(from.centerY, to.centerY, fraction, time),
+        width = ValueInterpolation.number(from.width, to.width, fraction, time),
+        height = ValueInterpolation.number(from.height, to.height, fraction, time),
+        rotation = ValueInterpolation.angle(from.rotation, to.rotation, fraction, time),
+        mirrorX = ValueInterpolation.number(from.mirrorX, to.mirrorX, fraction, time),
+        mirrorY = ValueInterpolation.number(from.mirrorY, to.mirrorY, fraction, time),
+        scale = ValueInterpolation.number(from.scale, to.scale, fraction, time),
+    )
+
+    /**
+     * The translation and pivot that draw a view laid out at its margins with [width] × [height] (or showing that part
+     * of a larger layout from its corner) at [frame]'s center and angle, unscaled: x, y of the translation, then of
+     * the pivot.
+     */
+    fun moveOf(frame: FlightEnd, width: Int, height: Int): FloatArray = floatArrayOf(
+        frame.centerX - (toLeft + width / 2f),
+        frame.centerY - (toTop + height / 2f),
+        width / 2f,
+        height / 2f,
+    )
 
     companion object {
-        /** The flight of [from] to [to], which is in [layer] already; none when [to] has no place there. */
-        fun of(from: View, to: View, layer: TransitionLayer): FlightGeometry? {
+        /**
+         * The flight of [from] to [to], which is in [layer] already in place of [toStandIn] (the stub where it was);
+         * none when [to] has no place there.
+         */
+        fun of(from: View, to: View, toStandIn: View?, layer: View): FlightGeometry? {
             val place = to.layoutParams as? ViewGroup.MarginLayoutParams ?: return null
-            val origin = layer.originOnScreen
-            val onScreen = ViewUtils.getLocationOnScreen(from)
-            val (scaleX, scaleY) = computeInheritedScale(from)
-            val left = (onScreen.x - origin.x).toFloat()
-            val top = (onScreen.y - origin.y).toFloat()
-            val fromRect = RectF(left, top, left + from.width * scaleX, top + from.height * scaleY)
-            val toLeft = place.leftMargin.toFloat()
-            val toTop = place.topMargin.toFloat()
-            val toRect = RectF(toLeft, toTop, toLeft + to.width, toTop + to.height)
-            return FlightGeometry(fromRect, toRect, scaleX)
+            val fromEnd = LayerPlace.of(from, layer).end(from.width, from.height)
+            val toEnd = LayerPlace.of(to, layer, toStandIn).end(to.width, to.height)
+            val holds = FlightEnd.holdsAtEnd(to, toStandIn, layer)
+            return FlightGeometry(fromEnd, toEnd, place.leftMargin, place.topMargin, holds)
         }
     }
 }
 
+/**
+ * The properties a moving `to` is drawn with in the layer when its flight starts, put back when it ends: the
+ * flight draws it unscaled (but mirrored where an end is) and untilted at the flight's angle about the middle of what
+ * shows.
+ */
+internal class MovedProperties(private val view: View) {
+    private val translationX = view.translationX
+    private val translationY = view.translationY
+    private val scaleX = view.scaleX
+    private val scaleY = view.scaleY
+    private val rotation = view.rotation
+    private val rotationX = view.rotationX
+    private val rotationY = view.rotationY
+    private val pivotX = view.pivotX
+    private val pivotY = view.pivotY
+    private val ownWidth = view.width
+    private val ownHeight = view.height
+
+    /** [view] at [frame], laid out at [width] × [height] from its margins (or showing that part from its corner). */
+    fun show(geometry: FlightGeometry, frame: FlightEnd, width: Int, height: Int) {
+        val move = geometry.moveOf(frame, width, height)
+        view.pivotX = move[2]
+        view.pivotY = move[3]
+        view.translationX = move[0]
+        view.translationY = move[1]
+        view.scaleX = frame.mirrorX
+        view.scaleY = frame.mirrorY
+        view.rotation = frame.rotation
+        view.rotationX = 0f
+        view.rotationY = 0f
+    }
+
+    /**
+     * [view] at the end of a flight that [landed]: kept at the flight's last frame, laid out by [layOut] at the size it
+     * shows, when the geometry holds it there; else as it was at the start, laid out by [layOut] at its own size.
+     */
+    fun end(geometry: FlightGeometry, landed: Boolean, layOut: (width: Int, height: Int) -> Unit) {
+        if (geometry.holdsAtEnd && landed) {
+            val width = geometry.to.width.roundToInt()
+            val height = geometry.to.height.roundToInt()
+            layOut(width, height)
+            show(geometry, geometry.to, width, height)
+        } else {
+            restore()
+            layOut(ownWidth, ownHeight)
+        }
+    }
+
+    /** [view] as it was at the start. */
+    fun restore() {
+        view.translationX = translationX
+        view.translationY = translationY
+        view.scaleX = scaleX
+        view.scaleY = scaleY
+        view.rotation = rotation
+        view.rotationX = rotationX
+        view.rotationY = rotationY
+        view.pivotX = pivotX
+        view.pivotY = pivotY
+    }
+}
+
 /** An outline of the size and corners a flying view shows meanwhile: its own bounds are larger. */
 internal class FlightOutline : android.view.ViewOutlineProvider() {
     var width = 0