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

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

@@ -14,15 +14,18 @@ import kotlin.math.min
 import kotlin.math.roundToInt
 
 /**
- * A shared image of another kind (an `ImageView` that isn't React Native's): its place by a translation; its image
- * matrix from `from`'s fit (`centerCrop`, `fitXY`, `fitCenter`, `centerInside`) to its own, the part seen from `from`'s
- * size to its own, the corner radius of the parent that clips it (`borderRadius` with `overflow: hidden`) by its
- * outline. Another fit: the pair moves without the change of its matrix, and a line goes to the log. Everything goes
- * back as it was at the end. Main thread only.
+ * A shared image of another kind (an `ImageView` that isn't React Native's): from where `from` is drawn to where it is
+ * drawn in its screen ([FlightGeometry]), unscaled and turned about its middle; its image matrix from `from`'s fit
+ * (`centerCrop`, `fitXY`, `fitCenter`, `centerInside`) to its own, the part seen from `from`'s size to its own, the
+ * corner radius of the parent that clips it (`borderRadius` with `overflow: hidden`) by its outline. Another fit: the
+ * pair moves without the change of its matrix, and a line goes to the log. Everything goes back as it was at the end.
+ * Main thread only.
  */
 internal class ImageMatrixAnimator(
     private val from: ImageView,
     private val to: ImageView,
+    /** Where [to] was in its screen: what it flies to. */
+    private val toStandIn: View?,
     private val layer: TransitionLayer,
     /** The parents the views are clipped by in their screens: [to]'s is the one it had before the layer. */
     private val fromParent: View?,
@@ -32,8 +35,7 @@ internal class ImageMatrixAnimator(
 ) {
     /** The animator; none when [to] has no place in the layer. */
     fun create(): Animator? {
-        val geometry = FlightGeometry.of(from, to, layer) ?: return null
-        val toRect = geometry.to
+        val geometry = FlightGeometry.of(from, to, toStandIn, layer) ?: return null
         val fromFit = from.scaleType
         val toFit = to.scaleType
         // The image whose matrix changes; none when a fit isn't one of the four or there is no image to fit.
@@ -42,9 +44,10 @@ internal class ImageMatrixAnimator(
         }
         val fits = image != null
         if (!fits) log("The image '$id' fits by ${fromFit.name} and ${toFit.name}: it moves without a change of fit")
-        val fromRadius = clipRadius(fromParent) * geometry.fromScale
-        val toRadius = clipRadius(toParent)
+        val fromRadius = clipRadius(fromParent) * geometry.from.scale
+        val toRadius = clipRadius(toParent) * geometry.to.scale
         val outline = FlightOutline()
+        val moved = MovedProperties(to)
         var savedProvider: ViewOutlineProvider? = null
         var savedClip = false
         val savedMatrix = Matrix(to.imageMatrix)
@@ -55,13 +58,11 @@ internal class ImageMatrixAnimator(
         return MoveAnimator().apply {
             fun frame(time: Float) {
                 val f = curve.getInterpolation(time)
-                val left = ValueInterpolation.number(geometry.from.left, toRect.left, f, time)
-                val top = ValueInterpolation.number(geometry.from.top, toRect.top, f, time)
-                val width = ValueInterpolation.number(geometry.from.width(), toRect.width(), f, time).roundToInt()
-                val height = ValueInterpolation.number(geometry.from.height(), toRect.height(), f, time).roundToInt()
-                layer.place(to, toRect.left.toInt(), toRect.top.toInt(), width, height)
-                to.translationX = left - toRect.left
-                to.translationY = top - toRect.top
+                val at = geometry.at(f, time)
+                val width = at.width.roundToInt()
+                val height = at.height.roundToInt()
+                layer.place(to, geometry.toLeft, geometry.toTop, width, height)
+                moved.show(geometry, at, width, height)
                 outline.width = width
                 outline.height = height
                 outline.radius = ValueInterpolation.number(fromRadius, toRadius, f, time)
@@ -92,10 +93,7 @@ internal class ImageMatrixAnimator(
                 }
                 to.outlineProvider = savedProvider
                 to.clipToOutline = savedClip
-                to.translationX = 0f
-                to.translationY = 0f
-                layer.place(to, toRect.left.toInt(), toRect.top.toInt(), toRect.width().toInt(),
-                    toRect.height().toInt())
+                moved.end(geometry, landed) { w, h -> layer.place(to, geometry.toLeft, geometry.toTop, w, h) }
             }
         }
     }

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

@@ -11,49 +11,45 @@ import dev.apexnative.navigation.views.element.TransitionLayer
 import kotlin.math.roundToInt
 
 /**
- * A shared React view without children moves itself: from `from`'s place on the screen to its own by a translation; its
- * size and corner radius by an outline that grows from `from`'s (at the scale of its parents) to its own while it is
- * laid out at the larger of the two sizes; its own radius taken off meanwhile and put back as it was; its background
- * color from `from`'s to its own in Lab, ending exactly on its own (`BackgroundStyleApplicator`); its rotation from
- * `from`'s to its own. Main thread only.
+ * A shared React view without children moves itself: from where `from` is drawn to where it is drawn in its screen
+ * ([FlightGeometry]); its size and corner radius by an outline that grows from `from`'s (at the scale it is drawn at)
+ * to its own while it is laid out at the larger of the two sizes, unscaled and turned about the outline's middle; its
+ * own radius taken off meanwhile and put back as it was; its background color from `from`'s to its own in Lab, ending
+ * exactly on its own (`BackgroundStyleApplicator`). Main thread only.
  */
 internal class PlainViewAnimator(
     private val from: View,
     private val to: View,
+    /** Where [to] was in its screen: what it flies to. */
+    private val toStandIn: View?,
     private val layer: TransitionLayer,
 ) {
     /** The animator; none when [to] has no place in the layer. */
     fun create(): Animator? {
-        val geometry = FlightGeometry.of(from, to, layer) ?: return null
-        val fromRadius = from.borderRadius * geometry.fromScale
-        val toRadius = to.borderRadius
+        val geometry = FlightGeometry.of(from, to, toStandIn, layer) ?: return null
+        val fromRadius = from.borderRadius * geometry.from.scale
+        val toRadius = to.borderRadius * geometry.to.scale
         val fromColor = BackgroundStyleApplicator.getBackgroundColor(from)
         val toColor = BackgroundStyleApplicator.getBackgroundColor(to)
-        val fromRotation = from.rotation
-        val toRotation = to.rotation
         val ownRadius = BackgroundStyleApplicator.getBorderRadius(to, RADIUS)
         val outline = FlightOutline()
+        val moved = MovedProperties(to)
         var savedProvider: ViewOutlineProvider? = null
         var savedClip = false
         val (width, height) = geometry.largest
-        val toRect = geometry.to
         return MoveAnimator().apply {
             fun frame(time: Float) {
                 val f = curve.getInterpolation(time)
-                val left = ValueInterpolation.number(geometry.from.left, toRect.left, f, time)
-                val top = ValueInterpolation.number(geometry.from.top, toRect.top, f, time)
-                to.translationX = left - toRect.left
-                to.translationY = top - toRect.top
-                val from = geometry.from
-                outline.width = ValueInterpolation.number(from.width(), toRect.width(), f, time).roundToInt()
-                outline.height = ValueInterpolation.number(from.height(), toRect.height(), f, time).roundToInt()
+                val at = geometry.at(f, time)
+                outline.width = at.width.roundToInt()
+                outline.height = at.height.roundToInt()
                 outline.radius = ValueInterpolation.number(fromRadius, toRadius, f, time)
+                moved.show(geometry, at, outline.width, outline.height)
                 to.invalidateOutline()
                 if (fromColor != toColor) {
                     val color = ValueInterpolation.color(fromColor, toColor, f, time)
                     BackgroundStyleApplicator.setBackgroundColor(to, color)
                 }
-                to.rotation = ValueInterpolation.number(fromRotation, toRotation, f, time)
             }
             onStart {
                 savedProvider = to.outlineProvider
@@ -61,21 +57,17 @@ internal class PlainViewAnimator(
                 if (ownRadius != null) BackgroundStyleApplicator.setBorderRadius(to, RADIUS, null)
                 to.outlineProvider = outline
                 to.clipToOutline = true
-                layer.place(to, toRect.left.toInt(), toRect.top.toInt(), width, height)
+                layer.place(to, geometry.toLeft, geometry.toTop, width, height)
                 frame(0f)
             }
             onFrame { frame(it) }
             // A cancelled flight ends too: the view goes back whole.
             onEnd {
-                to.translationX = 0f
-                to.translationY = 0f
-                to.rotation = toRotation
                 if (fromColor != toColor) BackgroundStyleApplicator.setBackgroundColor(to, toColor)
                 if (ownRadius != null) BackgroundStyleApplicator.setBorderRadius(to, RADIUS, ownRadius)
                 to.outlineProvider = savedProvider
                 to.clipToOutline = savedClip
-                layer.place(to, toRect.left.toInt(), toRect.top.toInt(), toRect.width().toInt(),
-                    toRect.height().toInt())
+                moved.end(geometry, landed) { w, h -> layer.place(to, geometry.toLeft, geometry.toTop, w, h) }
             }
         }
     }

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

@@ -1,46 +1,43 @@
 package dev.apexnative.navigation.views.element.animators
 
 import android.animation.Animator
+import android.view.View
 import com.facebook.drawee.drawable.ScalingUtils
 import com.facebook.react.views.image.ReactImageView
-import dev.apexnative.navigation.views.animations.ValueInterpolation
 import dev.apexnative.navigation.views.element.TransitionLayer
 import kotlin.math.roundToInt
 
 /**
- * A shared React image: its place by a translation from `from`'s on the screen; its content by Fresco's scale type
- * going from `from`'s fit to its own (`ScalingUtils.InterpolatingScaleType`); the part seen from `from`'s size to its
- * own (it is laid out at the size of each frame); its rotation from `from`'s to its own; Fresco's own fade off
- * meanwhile. Everything goes back as it was at the end. Main thread only.
+ * A shared React image: from where `from` is drawn to where it is drawn in its screen ([FlightGeometry]), laid out at
+ * the size of each frame, unscaled and turned about its middle; its content by Fresco's scale type going from `from`'s
+ * fit to its own (`ScalingUtils.InterpolatingScaleType`); Fresco's own fade off meanwhile. Everything goes back as it
+ * was at the end. Main thread only.
  */
 internal class ReactImageAnimator(
     private val from: ReactImageView,
     private val to: ReactImageView,
+    /** Where [to] was in its screen: what it flies to. */
+    private val toStandIn: View?,
     private val layer: TransitionLayer,
 ) {
     /** The animator; none when [to] has no place in the layer or no hierarchy. */
     fun create(): Animator? {
         if (!from.hasHierarchy() || !to.hasHierarchy()) return null
-        val geometry = FlightGeometry.of(from, to, layer) ?: return null
-        val toRect = geometry.to
+        val geometry = FlightGeometry.of(from, to, toStandIn, layer) ?: return null
         val toType = to.hierarchy.actualImageScaleType ?: ScalingUtils.ScaleType.CENTER_CROP
         val fromType = from.hierarchy.actualImageScaleType ?: ScalingUtils.ScaleType.CENTER_CROP
         val scale = ScalingUtils.InterpolatingScaleType(fromType, toType)
-        val fromRotation = from.rotation
-        val toRotation = to.rotation
+        val moved = MovedProperties(to)
         var savedFade = 0
         return MoveAnimator().apply {
             fun frame(time: Float) {
                 val f = curve.getInterpolation(time)
-                val left = ValueInterpolation.number(geometry.from.left, toRect.left, f, time)
-                val top = ValueInterpolation.number(geometry.from.top, toRect.top, f, time)
-                val width = ValueInterpolation.number(geometry.from.width(), toRect.width(), f, time).roundToInt()
-                val height = ValueInterpolation.number(geometry.from.height(), toRect.height(), f, time).roundToInt()
-                layer.place(to, toRect.left.toInt(), toRect.top.toInt(), width, height)
-                to.translationX = left - toRect.left
-                to.translationY = top - toRect.top
+                val at = geometry.at(f, time)
+                val width = at.width.roundToInt()
+                val height = at.height.roundToInt()
+                layer.place(to, geometry.toLeft, geometry.toTop, width, height)
+                moved.show(geometry, at, width, height)
                 scale.setValue(if (time >= 1f) 1f else f)
-                to.rotation = ValueInterpolation.number(fromRotation, toRotation, f, time)
                 to.invalidate()
             }
             onStart {
@@ -53,11 +50,7 @@ internal class ReactImageAnimator(
             onEnd {
                 to.hierarchy.setActualImageScaleType(toType)
                 to.hierarchy.fadeDuration = savedFade
-                to.translationX = 0f
-                to.translationY = 0f
-                to.rotation = toRotation
-                layer.place(to, toRect.left.toInt(), toRect.top.toInt(), toRect.width().toInt(),
-                    toRect.height().toInt())
+                moved.end(geometry, landed) { w, h -> layer.place(to, geometry.toLeft, geometry.toTop, w, h) }
             }
         }
     }

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

@@ -29,13 +29,14 @@ internal object SharedAnimatorFactory {
 
     /**
      * The flight of the pair [from] → [to]; [to] is in [layer] at its margins, at its real alpha (the pictures are
-     * taken now). [toParent] is the parent [to] had in its screen. None: the pair doesn't fly (a text that didn't
-     * change, a picture that can't be taken, no place).
+     * taken now). [toParent] is the parent [to] had in its screen, [toStandIn] the view in its place there. None: the
+     * pair doesn't fly (a text that didn't change, a picture that can't be taken, no place).
      */
     fun create(
         from: View,
         to: View,
         toParent: View?,
+        toStandIn: View?,
         layer: TransitionLayer,
         options: SharedElementTransitionOptions,
         fallbackDuration: Long,
@@ -43,17 +44,19 @@ internal object SharedAnimatorFactory {
     ): Flight? {
         val flight = when {
             from is ReactTextView && to is ReactTextView -> pictures(
-                TextChangeAnimator(from, to).takeIf { it.shouldAnimate() }?.create(options),
+                TextChangeAnimator(from, to, toStandIn).takeIf { it.shouldAnimate() }?.create(options),
             )
             hasChildren(from) || hasChildren(to) -> pictures(
-                ViewChangeAnimator(from, to).takeIf { it.shouldAnimate() }?.create(options),
-            ) ?: moves(PlainViewAnimator(from, to, layer).create())
-            from is ReactImageView && to is ReactImageView -> moves(ReactImageAnimator(from, to, layer).create())
+                ViewChangeAnimator(from, to, toStandIn).takeIf { it.shouldAnimate() }?.create(options),
+            ) ?: moves(PlainViewAnimator(from, to, toStandIn, layer).create())
+            from is ReactImageView && to is ReactImageView ->
+                moves(ReactImageAnimator(from, to, toStandIn, layer).create())
             from is ImageView && to is ImageView -> moves(
-                ImageMatrixAnimator(from, to, layer, from.parent as? View, toParent, options.toId.get(""), log)
-                    .create(),
+                ImageMatrixAnimator(
+                    from, to, toStandIn, layer, from.parent as? View, toParent, options.toId.get(""), log,
+                ).create(),
             )
-            else -> moves(PlainViewAnimator(from, to, layer).create())
+            else -> moves(PlainViewAnimator(from, to, toStandIn, layer).create())
         } ?: return null
         val animator = flight.animator
         (animator as? MoveAnimator)?.element = pairName(options.fromId.get(""), options.toId.get(""))

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

@@ -14,24 +14,30 @@ import android.widget.TextView
 import com.facebook.react.views.text.ReactTextView
 import dev.apexnative.navigation.options.SharedElementTransitionOptions
 import dev.apexnative.navigation.utils.TextViewUtils
-import dev.apexnative.navigation.utils.ViewUtils
+import dev.apexnative.navigation.views.animations.ValueInterpolation
+import kotlin.math.abs
+import kotlin.math.min
 import kotlin.math.roundToInt
 
 // The text moves as two pictures of itself, of the text that goes away and of the text that comes, the same text or
 // another. Both keep their proportions, scaled by the font size from a point of the first line, and one turns into the
 // other in a quarter of the move: at its start when the text grows, at its end when it shrinks, so the larger picture
-// shows most of the way (as on iOS). The pictures are drawing commands, not pixels: they stay sharp at any scale and
-// keep the colors, emoji and background of the text. They are drawn in the overlay of the transition layer while `to`
-// is hidden.
-class TextChangeAnimator(from: View, to: View) : PropertyAnimatorCreator<ReactTextView>(from, to, ReactTextView::class.java) {
+// shows most of the way (as on iOS). Each text is where it is drawn, at the scale and angle its parents and its own
+// properties give it; the angle goes along the shorter arc (FlightGeometry). The pictures are drawing commands, not
+// pixels: they stay sharp at any scale and keep the colors, emoji and background of the text. They are drawn in the
+// overlay of the transition layer while `to` is hidden.
+class TextChangeAnimator internal constructor(
+    from: View,
+    to: View,
+    // Where `to` was in its screen: what the text flies to.
+    private val toStandIn: View?,
+) : PropertyAnimatorCreator<ReactTextView>(from, to, ReactTextView::class.java) {
     private val pictures by lazy { pictures() }
 
     override fun shouldAnimateProperty(fromChild: ReactTextView, toChild: ReactTextView): Boolean {
-        val fromPlace = ViewUtils.getLocationOnScreen(from)
-        val toPlace = ViewUtils.getLocationOnScreen(to)
-        return (fromChild.text.toString() != toChild.text.toString() ||
-                TextViewUtils.getTextSize(fromChild) != TextViewUtils.getTextSize(toChild) || fromPlace != toPlace
-                ) && pictures != null
+        val (start, end) = pictures ?: return false
+        return fromChild.text.toString() != toChild.text.toString() ||
+            TextViewUtils.getTextSize(fromChild) != TextViewUtils.getTextSize(toChild) || start.drawnElsewhere(end)
     }
 
     override fun create(options: SharedElementTransitionOptions): Animator {
@@ -49,43 +55,63 @@ class TextChangeAnimator(from: View, to: View) : PropertyAnimatorCreator<ReactTe
                 drawable.update(it, curve.getInterpolation(it))
                 layer.invalidate()
             }
+            // A flight that landed where `to` shows only in its screen keeps its last picture: the transition takes the
+            // layer away with it and shows `to` in its place.
+            val holds = FlightEnd.holdsAtEnd(to, toStandIn, layer)
             onEnd {
-                layer.overlay.remove(drawable)
-                layer.invalidate()
-                to.alpha = end.alpha
+                if (!holds || !landed) {
+                    layer.overlay.remove(drawable)
+                    layer.invalidate()
+                    to.alpha = end.alpha
+                }
             }
         }
     }
 
-    // `to` is in the transition layer already, at its margins (the coordinates of the other animators); `from` is where
-    // it is on the screen. Texts that line up the same way go from that point of their first lines (the same text lies
-    // over itself); others from the start of the line, as on iOS: a centered text no longer sticks out of a text at the
-    // start.
+    // `to` is in the transition layer already: the pictures are drawn in its coordinates. `from` is where it is drawn
+    // on the screen, `to` where it is drawn once back in its screen. Texts that line up the same way go from that point
+    // of their first lines (the same text lies over itself); others from the start of the line, as on iOS: a centered
+    // text no longer sticks out of a text at the start.
     private fun pictures(): Pair<TextPicture, TextPicture>? {
-        if (to.parent !is ViewGroup) return null
-        val toPlace = to.layoutParams as? ViewGroup.MarginLayoutParams ?: return null
+        val layer = to.parent as? ViewGroup ?: return null
         val fromLayout = (from as TextView).layout ?: return null
         val toLayout = (to as TextView).layout ?: return null
         val edge = lineEdge(fromLayout).takeIf { it == lineEdge(toLayout) } ?: LineEdge.START
-        val fromPlace = ViewUtils.getLocationOnScreen(from)
-            .apply { ViewUtils.getLocationOnScreen(to.parent as View).let { offset(-it.x, -it.y) } }
-        val start = TextPicture.of(from, fromPlace.x, fromPlace.y, edge) ?: return null
-        val end = TextPicture.of(to, toPlace.leftMargin, toPlace.topMargin, edge) ?: return null
+        val start = TextPicture.of(from, LayerPlace.of(from, layer), edge) ?: return null
+        val end = TextPicture.of(to, LayerPlace.of(to, layer, toStandIn), edge) ?: return null
         return start to end
     }
 }
 
-// A text's picture, the point of its first line it is scaled from (in the view) and where that point is in the
-// transition layer, its font size and opacity.
+// A text's picture, the point of its first line it is scaled from (in the view) and where that point is drawn in the
+// transition layer, its font size, the scale and angle it is drawn at, and its opacity.
 private class TextPicture(
     val picture: Picture,
     val anchor: PointF,
     val position: PointF,
     val fontSize: Float,
+    val scale: Float,
+    val rotation: Float,
+    val mirrorX: Float,
+    val mirrorY: Float,
     val alpha: Float
 ) {
+    /** The font size it shows at. */
+    val shownSize: Float get() = fontSize * scale
+
+    /** Whether [other] is drawn elsewhere, larger or smaller, or turned. */
+    fun drawnElsewhere(other: TextPicture): Boolean =
+        abs(position.x - other.position.x) > SAME_PLACE || abs(position.y - other.position.y) > SAME_PLACE ||
+            abs(scale - other.scale) > SAME_SCALE || abs(rotation - other.rotation) > SAME_ANGLE ||
+            mirrorX != other.mirrorX || mirrorY != other.mirrorY
+
     companion object {
-        fun of(view: TextView, left: Int, top: Int, edge: LineEdge): TextPicture? {
+        // Within half a pixel, a thousandth of the scale and a tenth of a degree: the same.
+        private const val SAME_PLACE = 0.5f
+        private const val SAME_SCALE = 0.001f
+        private const val SAME_ANGLE = 0.1f
+
+        fun of(view: TextView, place: LayerPlace, edge: LineEdge): TextPicture? {
             val layout = view.layout ?: return null
             val fontSize = TextViewUtils.getTextSize(view).takeIf { it > 0 } ?: view.textSize
             if (view.width <= 0 || view.height <= 0 || layout.lineCount == 0 || fontSize <= 0) return null
@@ -95,7 +121,14 @@ private class TextPicture(
                 view.totalPaddingLeft + edgeX(layout, edge),
                 view.totalPaddingTop + layout.getLineBaseline(0).toFloat()
             )
-            return TextPicture(picture, anchor, PointF(left + anchor.x, top + anchor.y), fontSize, view.alpha)
+            val position = place.point(anchor.x, anchor.y)
+            val scale = min(abs(place.scaleX), abs(place.scaleY))
+            return TextPicture(
+                picture, anchor, PointF(position[0], position[1]), fontSize, scale, place.rotation,
+                mirrorX = if (place.scaleX < 0) -1f else 1f,
+                mirrorY = if (place.scaleY < 0) -1f else 1f,
+                alpha = view.alpha,
+            )
         }
 
         // That point of the first line, in the direction of the text.
@@ -127,15 +160,19 @@ private fun lineEdge(layout: Layout): LineEdge {
     }
 }
 
-// Both pictures where the move has brought the text: the font size and the point of the first line go from the start
-// to the end along the transition's curve, the pictures change over by the clock.
+// Both pictures where the move has brought the text: the font size it shows at, its angle and the point of the first
+// line go from the start to the end along the transition's curve, the pictures change over by the clock.
 private class TextMorphDrawable(private val start: TextPicture, private val end: TextPicture) : Drawable() {
-    private val grows = end.fontSize >= start.fontSize
+    private val grows = end.shownSize >= start.shownSize
     private var progress = 0f
+    private var time = 0f
     private var changeOver = 0f
+    private var mirrorX = 1f
+    private var mirrorY = 1f
 
     fun update(time: Float, progress: Float) {
         this.progress = progress
+        this.time = time
         val changeOverStart = if (grows) 0f else 1f - CHANGE_OVER
         changeOver = ((time - changeOverStart) / CHANGE_OVER).coerceIn(0f, 1f)
     }
@@ -143,18 +180,30 @@ private class TextMorphDrawable(private val start: TextPicture, private val end:
     override fun draw(canvas: Canvas) {
         val x = start.position.x + (end.position.x - start.position.x) * progress
         val y = start.position.y + (end.position.y - start.position.y) * progress
-        val fontSize = start.fontSize + (end.fontSize - start.fontSize) * progress
-        draw(canvas, start, x, y, fontSize, 1f - changeOver)
-        draw(canvas, end, x, y, fontSize, changeOver)
+        val fontSize = start.shownSize + (end.shownSize - start.shownSize) * progress
+        val rotation = ValueInterpolation.angle(start.rotation, end.rotation, progress, time)
+        mirrorX = ValueInterpolation.number(start.mirrorX, end.mirrorX, progress, time)
+        mirrorY = ValueInterpolation.number(start.mirrorY, end.mirrorY, progress, time)
+        draw(canvas, start, x, y, fontSize, rotation, 1f - changeOver)
+        draw(canvas, end, x, y, fontSize, rotation, changeOver)
     }
 
-    private fun draw(canvas: Canvas, text: TextPicture, x: Float, y: Float, fontSize: Float, shown: Float) {
+    private fun draw(
+        canvas: Canvas,
+        text: TextPicture,
+        x: Float,
+        y: Float,
+        fontSize: Float,
+        rotation: Float,
+        shown: Float,
+    ) {
         val alpha = (shown * text.alpha * 255).roundToInt().coerceIn(0, 255)
         if (alpha == 0) return
         val scale = fontSize / text.fontSize
         val count = canvas.save()
         canvas.translate(x, y)
-        canvas.scale(scale, scale)
+        canvas.rotate(rotation)
+        canvas.scale(scale * mirrorX, scale * mirrorY)
         canvas.translate(-text.anchor.x, -text.anchor.y)
         // The picture fades as a whole: its letters and background don't show through each other.
         if (alpha < 255) {

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

@@ -14,17 +14,22 @@ import android.view.View
 import android.view.ViewGroup
 import com.facebook.react.views.view.ReactViewGroup
 import dev.apexnative.navigation.options.SharedElementTransitionOptions
-import dev.apexnative.navigation.utils.ViewUtils
 import dev.apexnative.navigation.utils.borderRadius
-import dev.apexnative.navigation.utils.computeInheritedScale
 import kotlin.math.roundToInt
 
 // A view with children moves as two pictures of itself, as on iOS: of the view that goes away and of the one that
-// comes, each with its children. The copy goes from the place, size and corner radius of the one to those of the other,
-// both pictures fill it, and the picture of the destination shows over the other on the way. The pictures are drawing
-// commands: an avatar's letter grows sharp. They are drawn in the overlay of the transition layer while `to` is hidden,
-// and nothing else moves the pair. A view without children moves itself, its outline growing, as before.
-class ViewChangeAnimator(from: View, to: View) : PropertyAnimatorCreator<ReactViewGroup>(from, to, ReactViewGroup::class.java) {
+// comes, each with its children. The copy goes from where the one is drawn — its center, its size at the scale it is
+// drawn at, its angle and corner radius — to where the other is drawn in its screen (FlightGeometry), the angle along
+// the shorter arc; both pictures fill it, and the picture of the destination shows over the other on the way. The
+// pictures are drawing commands: an avatar's letter grows sharp. They are drawn in the overlay of the transition layer
+// while `to` is hidden, and nothing else moves the pair. A view without children moves itself, its outline growing, as
+// before.
+class ViewChangeAnimator internal constructor(
+    from: View,
+    to: View,
+    // Where `to` was in its screen: what the copy flies to.
+    private val toStandIn: View?,
+) : PropertyAnimatorCreator<ReactViewGroup>(from, to, ReactViewGroup::class.java) {
     private val pictures by lazy { pictures() }
 
     override fun shouldAnimateProperty(fromChild: ReactViewGroup, toChild: ReactViewGroup): Boolean =
@@ -42,68 +47,72 @@ class ViewChangeAnimator(from: View, to: View) : PropertyAnimatorCreator<ReactVi
                 to.alpha = 0f
             }
             onFrame {
-                drawable.progress = curve.getInterpolation(it)
+                drawable.update(it, curve.getInterpolation(it))
                 layer.invalidate()
             }
+            // A flight that landed where `to` shows only in its screen keeps its last picture: the transition takes the
+            // layer away with it and shows `to` in its place.
+            val holds = FlightEnd.holdsAtEnd(to, toStandIn, layer)
             onEnd {
-                layer.overlay.remove(drawable)
-                layer.invalidate()
-                to.alpha = end.alpha
+                if (!holds || !landed) {
+                    layer.overlay.remove(drawable)
+                    layer.invalidate()
+                    to.alpha = end.alpha
+                }
             }
         }
     }
 
-    // `to` is in the transition layer already, at its margins (the coordinates of the other animators); `from` is where
-    // it is on the screen, at the scale of its parents.
+    // `to` is in the transition layer already: the pictures are drawn in its coordinates. `from` is where it is drawn
+    // on the screen, `to` where it is drawn once back in its screen.
     private fun pictures(): Pair<ViewPicture, ViewPicture>? {
-        if (to.parent !is ViewGroup) return null
-        val toPlace = to.layoutParams as? ViewGroup.MarginLayoutParams ?: return null
-        val fromPlace = ViewUtils.getLocationOnScreen(from)
-            .apply { ViewUtils.getLocationOnScreen(to.parent as View).let { offset(-it.x, -it.y) } }
-        val (scaleX, scaleY) = computeInheritedScale(from)
-        val fromRect = RectF(0f, 0f, from.width * scaleX, from.height * scaleY).apply {
-            offset(fromPlace.x.toFloat(), fromPlace.y.toFloat())
-        }
-        val toRect = RectF(0f, 0f, to.width.toFloat(), to.height.toFloat()).apply {
-            offset(toPlace.leftMargin.toFloat(), toPlace.topMargin.toFloat())
-        }
-        val start = ViewPicture.of(from as ReactViewGroup, fromRect, scaleX) ?: return null
-        val end = ViewPicture.of(to as ReactViewGroup, toRect, 1f) ?: return null
+        val layer = to.parent as? ViewGroup ?: return null
+        val start = ViewPicture.of(from as ReactViewGroup, LayerPlace.of(from, layer)) ?: return null
+        val end = ViewPicture.of(to as ReactViewGroup, LayerPlace.of(to, layer, toStandIn)) ?: return null
         return start to end
     }
 }
 
-// A view's picture, its place in the transition layer, its corner radius there and its opacity.
-private class ViewPicture(val picture: Picture, val rect: RectF, val radius: Float, val alpha: Float) {
+// A view's picture, where it is drawn in the transition layer, its corner radius there and its opacity.
+private class ViewPicture(val picture: Picture, val end: FlightEnd, val radius: Float, val alpha: Float) {
     companion object {
-        fun of(view: ReactViewGroup, rect: RectF, scale: Float): ViewPicture? {
+        fun of(view: ReactViewGroup, place: LayerPlace): ViewPicture? {
             if (view.width <= 0 || view.height <= 0) return null
             val picture = recordPicture(view) ?: return null
-            return ViewPicture(picture, rect, view.borderRadius * scale, view.alpha)
+            val end = place.end(view.width, view.height)
+            return ViewPicture(picture, end, view.borderRadius * end.scale, view.alpha)
         }
     }
 }
 
-// The copy where the move has brought it: its place, size and corner radius go from the start to the end along the
-// transition's curve, and so does the picture of the end over the picture of the start.
+// The copy where the move has brought it: its center, size, angle and corner radius go from the start to the end along
+// the transition's curve, and so does the picture of the end over the picture of the start.
 private class ViewMorphDrawable(private val start: ViewPicture, private val end: ViewPicture) : Drawable() {
-    var progress = 0f
+    private val flight = FlightGeometry(start.end, end.end, 0, 0)
+    private var at = start.end
+    private var progress = 0f
     private val rect = RectF()
     private val maskPaint = Paint(Paint.ANTI_ALIAS_FLAG)
     // What is drawn over the mask keeps only the mask's pixels: the corners stay smooth (a clip path on the hardware
     // canvas is not anti-aliased).
     private val contentPaint = Paint().apply { xfermode = PorterDuffXfermode(PorterDuff.Mode.SRC_IN) }
 
+    /** The copy at [time] (the part of the time), [progress] the curve's value. */
+    fun update(time: Float, progress: Float) {
+        this.progress = progress
+        at = flight.at(progress, time)
+    }
+
     override fun draw(canvas: Canvas) {
-        rect.set(
-            lerp(start.rect.left, end.rect.left),
-            lerp(start.rect.top, end.rect.top),
-            lerp(start.rect.right, end.rect.right),
-            lerp(start.rect.bottom, end.rect.bottom)
-        )
+        rect.set(-at.width / 2, -at.height / 2, at.width / 2, at.height / 2)
         if (rect.isEmpty) return
         val radius = lerp(start.radius, end.radius)
-        val count = canvas.saveLayer(rect, null)
+        // The copy turns about its center, mirrored where a view is.
+        val count = canvas.save()
+        canvas.translate(at.centerX, at.centerY)
+        canvas.rotate(at.rotation)
+        canvas.scale(at.mirrorX, at.mirrorY)
+        canvas.saveLayer(rect, null)
         canvas.drawRoundRect(rect, radius, radius, maskPaint)
         canvas.saveLayer(rect, contentPaint)
         draw(canvas, start, start.alpha)