@apexnative/navigation 0.0.0-stage → 1.0.0-alpha.0

package/android/src/main/java/dev/apexnative/navigation/views/animations/FadeThrough.kt

@@ -0,0 +1,57 @@
+package dev.apexnative.navigation.views.animations
+
+import android.animation.Animator
+import android.animation.AnimatorSet
+import android.animation.Keyframe
+import android.animation.ObjectAnimator
+import android.animation.PropertyValuesHolder
+import android.util.Property
+import android.view.View
+import android.view.animation.Interpolator
+import android.view.animation.LinearInterpolator
+import android.view.animation.PathInterpolator
+
+/**
+ * Material's fade through, the default of setStackRoot and of a new root (setRoot): the screens become others, not a step
+ * forward. What goes fades out in the first 35%, what comes fades in after it and grows from 92%.
+ */
+object FadeThrough {
+    const val DURATION = 300L
+    const val OUT = 0.35f
+    private const val START_SCALE = 0.92f
+
+    @JvmField
+    val CURVE: Interpolator = PathInterpolator(0.4f, 0f, 0.2f, 1f)
+
+    @JvmStatic
+    fun enter(view: View): Animator {
+        view.scaleX = START_SCALE
+        view.scaleY = START_SCALE
+        val scale = ObjectAnimator.ofPropertyValuesHolder(view,
+                PropertyValuesHolder.ofFloat(View.SCALE_X, START_SCALE, 1f),
+                PropertyValuesHolder.ofFloat(View.SCALE_Y, START_SCALE, 1f)).apply {
+            duration = DURATION
+            interpolator = CURVE
+        }
+        return AnimatorSet().apply { playTogether(fadeIn(view), scale) }
+    }
+
+    /** Transparent until what goes has faded out, from the start: a start delay doesn't apply the first value. */
+    @JvmStatic
+    @JvmOverloads
+    fun fadeIn(view: View, alpha: Property<View, Float> = View.ALPHA): Animator {
+        view.alpha = 0f
+        return ObjectAnimator.ofPropertyValuesHolder(view, PropertyValuesHolder.ofKeyframe(alpha,
+                Keyframe.ofFloat(0f, 0f), Keyframe.ofFloat(OUT, 0f), Keyframe.ofFloat(1f, 1f))).apply {
+            duration = DURATION
+            interpolator = LinearInterpolator()
+        }
+    }
+
+    /** From where it is: one still coming in, or hidden while it waited to be drawn, showed whole first. */
+    @JvmStatic
+    fun exit(view: View): Animator = ObjectAnimator.ofFloat(view, View.ALPHA, view.alpha, 0f).apply {
+        duration = (DURATION * OUT).toLong()
+        interpolator = LinearInterpolator()
+    }
+}

package/android/src/main/java/dev/apexnative/navigation/views/animations/SideAnimator.kt

@@ -0,0 +1,143 @@
+package dev.apexnative.navigation.views.animations
+
+import android.animation.Animator
+import android.animation.AnimatorListenerAdapter
+import android.animation.AnimatorSet
+import android.animation.ObjectAnimator
+import android.util.Property
+import android.view.View
+import dev.apexnative.navigation.options.ElementAnimationOptions
+import dev.apexnative.navigation.options.ElementTransitionOptions
+import dev.apexnative.navigation.options.InterpolationOptions
+import dev.apexnative.navigation.options.PropertyAnimationOptions
+import dev.apexnative.navigation.options.ViewAnimationOptions
+
+/**
+ * The animators of one side of an animation on one view: one `ObjectAnimator` per property that plays, each with its
+ * own duration, delay and curve ([Curves]), together in one `AnimatorSet` whose own duration and curve are never set. A
+ * given end is in dp for the places and shifts (pixels here), the missing end is the view's current value in pixels;
+ * `x` and `y` are the place in the view's parent. With `translationX` and `x` on one side the translation plays and `x`
+ * doesn't (they write the same field), the same for `y`. Every property's start value is written as the set starts,
+ * also of one that waits for its delay. Scale and rotations turn about the view's pivot (its center unless set), the
+ * tilts with the view's camera. Main thread only.
+ */
+internal object SideAnimator {
+    /** What a side's missing ends come from besides the view, and where the parent's origin is now. */
+    class Base(
+        /** The missing `alpha` end: the view's alpha before the core hid it; none: the view's own now. */
+        val alpha: Float? = null,
+        /** Pixels added to a given `x` end: where the parent's origin is in the view's parent now. */
+        val xOffset: Float = 0f,
+        /** Pixels added to a given `y` end. */
+        val yOffset: Float = 0f,
+    )
+
+    /**
+     * [view] at rest: every property a side or a default transition writes — no shift, opaque, full size, not
+     * turned. The one place for the stack, the modals and the bars.
+     */
+    fun rest(view: View) {
+        view.translationX = 0f
+        view.translationY = 0f
+        view.alpha = 1f
+        view.scaleX = 1f
+        view.scaleY = 1f
+        view.rotation = 0f
+        view.rotationX = 0f
+        view.rotationY = 0f
+    }
+
+    /** The animator of [side] on [view]; none when the side doesn't play (AnimationRules.sidePlays). */
+    fun build(view: View, side: ViewAnimationOptions, base: Base = Base()): Animator? {
+        if (!AnimationRules.sidePlays(side)) return null
+        return build(view, specsOf(side), base)
+    }
+
+    /** The animator of the properties of an element transition on its view; none when no property plays. */
+    fun build(view: View, element: ElementTransitionOptions, base: Base): Animator? =
+        build(view, specsOf(element), base)
+
+    private fun build(view: View, specs: List<Spec>, base: Base): Animator? {
+        val playing = specs.filter { it.from != null || it.to != null }
+        val skipX = playing.any { it.target == Target.TranslationX }
+        val skipY = playing.any { it.target == Target.TranslationY }
+        val used = playing.filterNot {
+            (it.target == Target.X && skipX) || (it.target == Target.Y && skipY)
+        }
+        if (used.isEmpty()) return null
+        val density = view.resources?.displayMetrics?.density ?: 1f
+        val starts = ArrayList<Pair<Property<View, Float>, Float>>(used.size)
+        val animators = used.map { spec ->
+            val property = spec.target.property
+            val current = when (spec.target) {
+                Target.Alpha -> base.alpha ?: view.alpha
+                else -> property.get(view)
+            }
+            val from = spec.from?.let { spec.target.toPixels(it, density, base) } ?: current
+            val to = spec.to?.let { spec.target.toPixels(it, density, base) } ?: current
+            starts += property to from
+            ObjectAnimator.ofFloat(view, property, from, to).apply {
+                duration = spec.duration
+                startDelay = spec.delay
+                interpolator = Curves.of(spec.interpolation, spec.duration)
+            }
+        }
+        return AnimatorSet().apply {
+            playTogether(animators)
+            addListener(object : AnimatorListenerAdapter() {
+                override fun onAnimationStart(animation: Animator) {
+                    for ((property, value) in starts) property.set(view, value)
+                }
+            })
+        }
+    }
+
+    // One property to animate: which, its ends as the options give them (unconverted), its time and its curve.
+    private class Spec(
+        val target: Target,
+        val from: Double?,
+        val to: Double?,
+        val duration: Long,
+        val delay: Long,
+        val interpolation: InterpolationOptions,
+    )
+
+    // In the order of the options' properties (AnimationRules.properties).
+    private enum class Target(val property: Property<View, Float>) {
+        X(View.X), Y(View.Y), TranslationX(View.TRANSLATION_X), TranslationY(View.TRANSLATION_Y), Alpha(View.ALPHA),
+        ScaleX(View.SCALE_X), ScaleY(View.SCALE_Y), RotationX(View.ROTATION_X), RotationY(View.ROTATION_Y),
+        Rotation(View.ROTATION);
+
+        // A value of the options as the view takes it: places and shifts from dp, `x` / `y` in the parent's origin.
+        fun toPixels(value: Double, density: Float, base: Base): Float = when (this) {
+            X -> value.toFloat() * density + base.xOffset
+            Y -> value.toFloat() * density + base.yOffset
+            TranslationX, TranslationY -> value.toFloat() * density
+            else -> value.toFloat()
+        }
+    }
+
+    private fun specsOf(side: ViewAnimationOptions): List<Spec> =
+        AnimationRules.properties(side).mapIndexed { index, property -> spec(Target.entries[index], property) }
+
+    private fun specsOf(element: ElementTransitionOptions): List<Spec> =
+        AnimationRules.elementProperties(element).mapIndexed { i, property -> spec(Target.entries[i], property) }
+
+    private fun spec(target: Target, property: PropertyAnimationOptions) = Spec(
+        target,
+        property.from.get(null)?.takeIf { it.isFinite() },
+        property.to.get(null)?.takeIf { it.isFinite() },
+        AnimationRules.durationOf(property.duration.get(null), AnimationRules.DEFAULT_DURATION),
+        AnimationRules.delayOf(property.startDelay.get(null)),
+        property.interpolation,
+    )
+
+    private fun spec(target: Target, property: ElementAnimationOptions) = Spec(
+        target,
+        property.from.get(null)?.takeIf { it.isFinite() },
+        property.to.get(null)?.takeIf { it.isFinite() },
+        AnimationRules.durationOf(property.duration.get(null), AnimationRules.DEFAULT_DURATION),
+        AnimationRules.delayOf(property.startDelay.get(null)),
+        property.interpolation,
+    )
+}

package/android/src/main/java/dev/apexnative/navigation/views/animations/SystemTransition.kt

@@ -0,0 +1,26 @@
+package dev.apexnative.navigation.views.animations
+
+import android.graphics.Path
+import android.view.animation.Interpolator
+import android.view.animation.PathInterpolator
+
+/**
+ * The system's transition between activities (activity_open_* and activity_close_* of Android 17, with their right to
+ * left variants), the default of a push and a pop: what moves goes 96 dp along the axis on the system's curve, what
+ * comes in on a push or goes out on a pop fades at once.
+ */
+object SystemTransition {
+    const val DISTANCE_DP = 96f
+    const val DURATION = 450L
+    const val FADE_DURATION = 83L
+    const val PUSH_FADE_DELAY = 50L
+    const val POP_FADE_DELAY = 35L
+
+    /** fast_out_extra_slow_in. */
+    @JvmField
+    val CURVE: Interpolator = PathInterpolator(Path().apply {
+        moveTo(0f, 0f)
+        cubicTo(0.05f, 0f, 0.133333f, 0.06f, 0.166666f, 0.4f)
+        cubicTo(0.208333f, 0.82f, 0.25f, 1f, 1f, 1f)
+    })
+}

package/android/src/main/java/dev/apexnative/navigation/views/animations/ValueInterpolation.kt

@@ -0,0 +1,93 @@
+package dev.apexnative.navigation.views.animations
+
+import kotlin.math.cbrt
+import kotlin.math.pow
+import kotlin.math.roundToInt
+
+/**
+ * The values between two ends: value = from + f·(to − from) per component, with f the curve's value; at the start of
+ * the time exactly `from`, at its end exactly `to`, whatever the curve gave. Numbers (places, sizes, radii, each
+ * component apart), and colors in the perceptual Lab space (D65) with the alpha linear apart. Pure: the colors are
+ * converted here, by the formulas of AndroidX's `ColorUtils` (sRGB, D65 white 95.047 / 100 / 108.883).
+ */
+internal object ValueInterpolation {
+    /** A number at [fraction] of the way (the curve's value), [time] the part of the time: its end is exactly [to]. */
+    fun number(from: Float, to: Float, fraction: Float, time: Float = fraction): Float = when {
+        time <= 0f -> from
+        time >= 1f -> to
+        else -> from + fraction * (to - from)
+    }
+
+    /**
+     * A color (an sRGB color int, as React Native keeps a background; none is transparent) at [fraction] of the way
+     * from [from] to [to]: L, a and b in Lab (D65), the alpha linear, the result rounded; at the end of the time
+     * exactly [to].
+     */
+    fun color(from: Int?, to: Int?, fraction: Float, time: Float = fraction): Int {
+        val start = from ?: TRANSPARENT
+        val end = to ?: TRANSPARENT
+        if (time <= 0f) return start
+        if (time >= 1f) return end
+        val a = toLab(start)
+        val b = toLab(end)
+        val f = fraction.toDouble()
+        val rgb = fromLab(a[0] + f * (b[0] - a[0]), a[1] + f * (b[1] - a[1]), a[2] + f * (b[2] - a[2]))
+        val alpha = (alphaOf(start) + f * (alphaOf(end) - alphaOf(start))).roundToInt().coerceIn(0, MAX)
+        return (alpha shl ALPHA_SHIFT) or (rgb and RGB_MASK)
+    }
+
+    /** L, a, b of an sRGB color int (its alpha aside). */
+    fun toLab(color: Int): DoubleArray {
+        val r = linear(channel(color, RED_SHIFT))
+        val g = linear(channel(color, GREEN_SHIFT))
+        val b = linear(channel(color, 0))
+        val x = pivot((r * 0.4124 + g * 0.3576 + b * 0.1805) * 100 / WHITE_X)
+        val y = pivot((r * 0.2126 + g * 0.7152 + b * 0.0722) * 100 / WHITE_Y)
+        val z = pivot((r * 0.0193 + g * 0.1192 + b * 0.9505) * 100 / WHITE_Z)
+        return doubleArrayOf(maxOf(0.0, 116 * y - 16), 500 * (x - y), 200 * (y - z))
+    }
+
+    /** The opaque sRGB color int of L, a, b, rounded per channel. */
+    fun fromLab(l: Double, a: Double, b: Double): Int {
+        val fy = (l + 16) / 116
+        val fx = a / 500 + fy
+        val fz = fy - b / 200
+        val xr = fx.pow(3).let { if (it > EPSILON) it else (116 * fx - 16) / KAPPA }
+        val yr = if (l > KAPPA * EPSILON) fy.pow(3) else l / KAPPA
+        val zr = fz.pow(3).let { if (it > EPSILON) it else (116 * fz - 16) / KAPPA }
+        val x = xr * WHITE_X / 100
+        val y = yr * WHITE_Y / 100
+        val z = zr * WHITE_Z / 100
+        val red = encoded(x * 3.2406 + y * -1.5372 + z * -0.4986)
+        val green = encoded(x * -0.9689 + y * 1.8758 + z * 0.0415)
+        val blue = encoded(x * 0.0557 + y * -0.2040 + z * 1.0570)
+        return (MAX shl ALPHA_SHIFT) or (red shl RED_SHIFT) or (green shl GREEN_SHIFT) or blue
+    }
+
+    private fun channel(color: Int, shift: Int): Double = ((color ushr shift) and MAX) / MAX.toDouble()
+
+    private fun alphaOf(color: Int): Int = (color ushr ALPHA_SHIFT) and MAX
+
+    // sRGB's transfer: from the encoded value to the linear light, and back to a rounded channel.
+    private fun linear(value: Double): Double =
+        if (value < 0.04045) value / 12.92 else ((value + 0.055) / 1.055).pow(2.4)
+
+    private fun encoded(value: Double): Int {
+        val v = if (value > 0.0031308) 1.055 * value.pow(1 / 2.4) - 0.055 else 12.92 * value
+        return (v * MAX).roundToInt().coerceIn(0, MAX)
+    }
+
+    private fun pivot(value: Double): Double = if (value > EPSILON) cbrt(value) else (KAPPA * value + 16) / 116
+
+    private const val TRANSPARENT = 0
+    private const val MAX = 255
+    private const val ALPHA_SHIFT = 24
+    private const val RED_SHIFT = 16
+    private const val GREEN_SHIFT = 8
+    private const val RGB_MASK = 0x00FFFFFF
+    private const val WHITE_X = 95.047
+    private const val WHITE_Y = 100.0
+    private const val WHITE_Z = 108.883
+    private const val EPSILON = 0.008856
+    private const val KAPPA = 903.3
+}

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

@@ -0,0 +1,13 @@
+package dev.apexnative.navigation.views.bottomtabs
+
+import android.graphics.drawable.Drawable
+
+/** A tab of the bottom tabs: its title, icons and testID. */
+data class BottomTabItem(
+    val title: String,
+    val icon: Drawable?,
+    val selectedIcon: Drawable?,
+    val testId: String?
+) {
+    fun hasIcon() = icon != null
+}