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

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

@@ -1,78 +0,0 @@
-package dev.apexnative.navigation.views.element.animators
-
-import android.animation.Animator
-import android.view.View
-import android.view.ViewOutlineProvider
-import com.facebook.react.uimanager.BackgroundStyleApplicator
-import com.facebook.react.uimanager.style.BorderRadiusProp
-import dev.apexnative.navigation.utils.borderRadius
-import dev.apexnative.navigation.views.animations.ValueInterpolation
-import dev.apexnative.navigation.views.element.TransitionLayer
-import kotlin.math.roundToInt
-
-/**
- * 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, 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 ownRadius = BackgroundStyleApplicator.getBorderRadius(to, RADIUS)
-        val outline = FlightOutline()
-        val moved = MovedProperties(to)
-        var savedProvider: ViewOutlineProvider? = null
-        var savedClip = false
-        val (width, height) = geometry.largest
-        return MoveAnimator().apply {
-            fun frame(time: Float) {
-                val f = curve.getInterpolation(time)
-                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)
-                }
-            }
-            onStart {
-                savedProvider = to.outlineProvider
-                savedClip = to.clipToOutline
-                if (ownRadius != null) BackgroundStyleApplicator.setBorderRadius(to, RADIUS, null)
-                to.outlineProvider = outline
-                to.clipToOutline = true
-                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 {
-                if (fromColor != toColor) BackgroundStyleApplicator.setBackgroundColor(to, toColor)
-                if (ownRadius != null) BackgroundStyleApplicator.setBorderRadius(to, RADIUS, ownRadius)
-                to.outlineProvider = savedProvider
-                to.clipToOutline = savedClip
-                moved.end(geometry, landed) { w, h -> layer.place(to, geometry.toLeft, geometry.toTop, w, h) }
-            }
-        }
-    }
-
-    private companion object {
-        val RADIUS = BorderRadiusProp.BORDER_RADIUS
-    }
-}

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

@@ -1,33 +0,0 @@
-package dev.apexnative.navigation.views.element.animators
-
-import android.animation.Animator
-import android.view.View
-import dev.apexnative.navigation.options.SharedElementTransitionOptions
-
-/**
- * One animator of a shared element: how [from], on the screen that goes, becomes [to], on the screen that comes, when
- * both are of [type]. The core picks one by the views' classes (`SharedAnimatorFactory`) and runs it in the
- * transition's layer.
- */
-abstract class PropertyAnimatorCreator<T : View>(
-    protected val from: View,
-    protected val to: View,
-    private val type: Class<T>,
-) {
-    /** Whether this animator takes part: both views are of its type and differ in what it animates. */
-    fun shouldAnimate(): Boolean {
-        if (!type.isInstance(from) || !type.isInstance(to)) return false
-        val fromChild = type.cast(from) ?: return false
-        val toChild = type.cast(to) ?: return false
-        return shouldAnimateProperty(fromChild, toChild)
-    }
-
-    /** Whether [fromChild] and [toChild] differ in what this animator animates. */
-    abstract fun shouldAnimateProperty(fromChild: T, toChild: T): Boolean
-
-    /**
-     * The animator of the pair for [options]; the core gives it the pair's duration, delay and curve (each animator
-     * its own, never through a set around it).
-     */
-    abstract fun create(options: SharedElementTransitionOptions): Animator
-}

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

@@ -1,57 +0,0 @@
-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.element.TransitionLayer
-import kotlin.math.roundToInt
-
-/**
- * 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, 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 moved = MovedProperties(to)
-        var savedFade = 0
-        return MoveAnimator().apply {
-            fun frame(time: Float) {
-                val f = curve.getInterpolation(time)
-                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.invalidate()
-            }
-            onStart {
-                savedFade = to.hierarchy.fadeDuration
-                to.hierarchy.fadeDuration = 0
-                to.hierarchy.setActualImageScaleType(scale)
-                frame(0f)
-            }
-            onFrame { frame(it) }
-            onEnd {
-                to.hierarchy.setActualImageScaleType(toType)
-                to.hierarchy.fadeDuration = savedFade
-                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/ViewChangeAnimator.kt

@@ -1,146 +0,0 @@
-package dev.apexnative.navigation.views.element.animators
-
-import android.animation.Animator
-import android.graphics.Canvas
-import android.graphics.ColorFilter
-import android.graphics.Paint
-import android.graphics.Picture
-import android.graphics.PixelFormat
-import android.graphics.PorterDuff
-import android.graphics.PorterDuffXfermode
-import android.graphics.RectF
-import android.graphics.drawable.Drawable
-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.borderRadius
-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 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 =
-            (fromChild.childCount > 0 || toChild.childCount > 0) && pictures != null
-
-    override fun create(options: SharedElementTransitionOptions): Animator {
-        val (start, end) = checkNotNull(pictures)
-        val layer = to.parent as ViewGroup
-        val drawable = ViewMorphDrawable(start, end)
-        // Everything changes between the start and the end of the animation: a cancelled one ends too.
-        return MoveAnimator().apply {
-            onStart {
-                drawable.setBounds(0, 0, layer.width, layer.height)
-                layer.overlay.add(drawable)
-                to.alpha = 0f
-            }
-            onFrame {
-                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 {
-                if (!holds || !landed) {
-                    layer.overlay.remove(drawable)
-                    layer.invalidate()
-                    to.alpha = end.alpha
-                }
-            }
-        }
-    }
-
-    // `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>? {
-        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, 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, place: LayerPlace): ViewPicture? {
-            if (view.width <= 0 || view.height <= 0) return null
-            val picture = recordPicture(view) ?: return null
-            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 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() {
-    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(-at.width / 2, -at.height / 2, at.width / 2, at.height / 2)
-        if (rect.isEmpty) return
-        val radius = lerp(start.radius, end.radius)
-        // 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)
-        draw(canvas, end, end.alpha * progress)
-        canvas.restoreToCount(count)
-    }
-
-    // A picture fills the copy, as on iOS.
-    private fun draw(canvas: Canvas, view: ViewPicture, shown: Float) {
-        val alpha = (shown * 255).roundToInt().coerceIn(0, 255)
-        if (alpha == 0) return
-        val width = view.picture.width.toFloat()
-        val height = view.picture.height.toFloat()
-        val count = canvas.save()
-        canvas.translate(rect.left, rect.top)
-        canvas.scale(rect.width() / width, rect.height() / height)
-        // The picture fades as a whole: its children and background don't show through each other.
-        if (alpha < 255) canvas.saveLayerAlpha(0f, 0f, width, height, alpha)
-        canvas.drawPicture(view.picture)
-        canvas.restoreToCount(count)
-    }
-
-    private fun lerp(from: Float, to: Float) = from + (to - from) * progress
-
-    override fun setAlpha(alpha: Int) = Unit
-
-    override fun setColorFilter(colorFilter: ColorFilter?) = Unit
-
-    @Deprecated("Deprecated in Java")
-    override fun getOpacity(): Int = PixelFormat.TRANSLUCENT
-}