Support declaring interpolation per shared element transition (#6139)

* Implement startDelay + fix image scale transition

This commit adds support to the startDelay option in shared element transitions on Android. It also fixes image scale transition which only animated the image's scale type, but not its bounds.

* Support declaring interpolator per element transition

lib/android/app/src/main/java/com/reactnativenavigation/parse/SharedElementTransitionOptions.java

 package com.reactnativenavigation.parse;
 
+import com.reactnativenavigation.parse.params.Interpolation;
 import com.reactnativenavigation.parse.params.NullNumber;
 import com.reactnativenavigation.parse.params.NullText;
 import com.reactnativenavigation.parse.params.Number;
 import com.reactnativenavigation.parse.params.Text;
+import com.reactnativenavigation.parse.parsers.InterpolationParser;
 import com.reactnativenavigation.parse.parsers.NumberParser;
 import com.reactnativenavigation.parse.parsers.TextParser;
 
     public Text fromId = new NullText();
     public Text toId = new NullText();
     public Number duration = new NullNumber();
+    public Number startDelay = new NullNumber();
+    public Interpolation interpolation = Interpolation.NO_VALUE;
 
     public static SharedElementTransitionOptions parse(@Nullable JSONObject json) {
         SharedElementTransitionOptions transition = new SharedElementTransitionOptions();
         transition.fromId = TextParser.parse(json, "fromId");
         transition.toId = TextParser.parse(json, "toId");
         transition.duration = NumberParser.parse(json, "duration");
+        transition.startDelay = NumberParser.parse(json, "startDelay");
+        transition.interpolation = InterpolationParser.parse(json, "interpolation");
 
         return transition;
     }
         if (other.fromId.hasValue()) fromId = other.fromId;
         if (other.toId.hasValue()) toId = other.toId;
         if (other.duration.hasValue()) duration = other.duration;
+        if (other.startDelay.hasValue()) startDelay = other.startDelay;
     }
 
     void mergeWithDefault(SharedElementTransitionOptions defaultOptions) {
         if (!fromId.hasValue()) fromId = defaultOptions.fromId;
         if (!toId.hasValue()) toId = defaultOptions.toId;
         if (!duration.hasValue()) duration = defaultOptions.duration;
+        if (!startDelay.hasValue()) startDelay = defaultOptions.startDelay;
     }
 
     public long getDuration() {
         return duration.get(0).longValue();
     }
+
+    public long getStartDelay() {
+        return startDelay.get(0).longValue();
+    }
 }

lib/android/app/src/main/java/com/reactnativenavigation/utils/Animator.kt

+package com.reactnativenavigation.utils
+
+import android.animation.Animator
+import android.animation.TimeInterpolator
+import android.view.animation.Interpolator
+
+fun Animator.withStartDelay(delay: Long): Animator {
+    startDelay = delay
+    return this
+}
+
+fun Animator.withDuration(duration: Long): Animator {
+    this.duration = duration
+    return this
+}
+
+fun Animator.withInterpolator(interpolator: TimeInterpolator): Animator {
+    this.interpolator = interpolator
+    return this
+}

lib/android/app/src/main/java/com/reactnativenavigation/views/element/SharedElementTransition.kt

 
     private fun animators(): List<PropertyAnimatorCreator<*>> {
         return listOf(
+                MatrixAnimator(from, to),
+                ClipBoundsAnimator(from, to),
                 XAnimator(from, to),
                 YAnimator(from, to),
-                MatrixAnimator(from, to),
                 ScaleXAnimator(from, to),
                 ScaleYAnimator(from, to),
                 BackgroundColorAnimator(from, to),

lib/android/app/src/main/java/com/reactnativenavigation/views/element/TransitionAnimatorCreator.kt

 import androidx.core.animation.doOnCancel
 import androidx.core.animation.doOnEnd
 import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.views.image.ReactImageView
 import com.reactnativenavigation.R
 import com.reactnativenavigation.parse.AnimationOptions
 import com.reactnativenavigation.utils.ViewTags
     private fun reparentViews(transitions: TransitionSet) {
         transitions.transitions
                 .sortedBy { ViewGroupManager.getViewZIndex(it.view) }
-                .forEach {
-                    reparent(it)
-                }
+                .forEach { reparent(it) }
     }
 
     private fun createSharedElementTransitionAnimators(transitions: List<SharedElementTransition>): List<AnimatorSet> {
     }
 
     private fun createSharedElementAnimator(transition: SharedElementTransition): AnimatorSet {
-        val set = AnimatorSet()
-        set.playTogether(transition.createAnimators())
-        set.addListener(object : AnimatorListenerAdapter() {
-            override fun onAnimationStart(animation: Animator) {
-                transition.from.alpha = 0f
-            }
-        })
-        return set
+        return transition
+                .createAnimators()
+                .apply {
+                    addListener(object : AnimatorListenerAdapter() {
+                        override fun onAnimationStart(animation: Animator) {
+                            transition.from.alpha = 0f
+                        }
+                    })
+                }
     }
 
     private fun createElementTransitionAnimators(transitions: List<ElementTransition>): List<AnimatorSet> {
             lp.topMargin = loc.y + viewController.topInset
             lp.topMargin = loc.y
             lp.leftMargin = loc.x
-            lp.width = view.width
-            lp.height = view.height
+            if (view !is ReactImageView) {
+                lp.width = view.width
+                lp.height = view.height
+            }
             view.layoutParams = lp
             transition.viewController.requireParentController().addOverlay(view)
         }

lib/android/app/src/main/java/com/reactnativenavigation/views/element/animators/BackgroundColorAnimator.kt

 package com.reactnativenavigation.views.element.animators
 
 import android.animation.Animator
+import android.animation.AnimatorListenerAdapter
 import android.animation.ObjectAnimator
 import android.view.View
 import android.view.ViewGroup
+import androidx.core.animation.addListener
+import androidx.core.animation.doOnStart
 import com.facebook.react.views.text.ReactTextView
 import com.facebook.react.views.view.ReactViewBackgroundDrawable
 import com.reactnativenavigation.parse.SharedElementTransitionOptions
 import com.reactnativenavigation.utils.ColorUtils
 import com.reactnativenavigation.utils.ViewUtils
+import com.reactnativenavigation.utils.withInterpolator
+import com.reactnativenavigation.utils.withStartDelay
 
 class BackgroundColorAnimator(from: View, to: View) : PropertyAnimatorCreator<ViewGroup>(from, to) {
     override fun shouldAnimateProperty(fromChild: ViewGroup, toChild: ViewGroup): Boolean {
     override fun excludedViews() = listOf(ReactTextView::class.java)
 
     override fun create(options: SharedElementTransitionOptions): Animator {
-        return ObjectAnimator.ofObject(
-                BackgroundColorEvaluator(to.background as ReactViewBackgroundDrawable),
-                ColorUtils.colorToLAB(ViewUtils.getBackgroundColor(from)),
-                ColorUtils.colorToLAB(ViewUtils.getBackgroundColor(to))
-        ).setDuration(options.getDuration())
+        val backgroundColorEvaluator = BackgroundColorEvaluator(to.background as ReactViewBackgroundDrawable)
+        val fromColor = ColorUtils.colorToLAB(ViewUtils.getBackgroundColor(from))
+        val toColor = ColorUtils.colorToLAB(ViewUtils.getBackgroundColor(to))
+
+        backgroundColorEvaluator.evaluate(0f, fromColor, toColor)
+        return ObjectAnimator
+                .ofObject(
+                        backgroundColorEvaluator,
+                        fromColor,
+                        toColor
+                )
+                .setDuration(options.getDuration())
+                .withStartDelay(options.getStartDelay())
+                .withInterpolator(options.interpolation.interpolator)
     }
 }

lib/android/app/src/main/java/com/reactnativenavigation/views/element/animators/ClipBoundsAnimator.kt

+package com.reactnativenavigation.views.element.animators
+
+import android.animation.Animator
+import android.animation.ObjectAnimator
+import android.graphics.Rect
+import android.view.View
+import com.facebook.react.views.image.ReactImageView
+import com.reactnativenavigation.parse.SharedElementTransitionOptions
+import com.reactnativenavigation.utils.ViewUtils
+import com.reactnativenavigation.utils.withDuration
+import com.reactnativenavigation.utils.withInterpolator
+import com.reactnativenavigation.utils.withStartDelay
+
+class ClipBoundsAnimator(from: View, to: View) : PropertyAnimatorCreator<ReactImageView>(from, to) {
+    override fun shouldAnimateProperty(fromChild: ReactImageView, toChild: ReactImageView): Boolean {
+        return !ViewUtils.areDimensionsEqual(from, to)
+    }
+
+    override fun create(options: SharedElementTransitionOptions): Animator {
+        val startDrawingRect = Rect(); from.getDrawingRect(startDrawingRect)
+        val endDrawingRect = Rect(); to.getDrawingRect(endDrawingRect)
+        return ObjectAnimator.ofObject(
+                ClipBoundsEvaluator(),
+                startDrawingRect,
+                endDrawingRect
+        )
+                .setDuration(options.getDuration())
+                .withStartDelay(options.getStartDelay())
+                .withInterpolator(options.interpolation.interpolator)
+    }
+
+}

lib/android/app/src/main/java/com/reactnativenavigation/views/element/animators/ClipBoundsEvaluator.kt

+package com.reactnativenavigation.views.element.animators
+
+import android.animation.TypeEvaluator
+import android.graphics.Rect
+
+class ClipBoundsEvaluator : TypeEvaluator<Rect> {
+    private var fromWidth = 0
+    private var fromHeight = 0
+    private var toWidth = 0
+    private var toHeight = 0
+    private val result = Rect()
+
+    override fun evaluate(ratio: Float, from: Rect, to: Rect): Rect {
+        sync(from, to)
+        if (toHeight == fromHeight) {
+            result.bottom = toHeight
+        } else {
+            if (toHeight > fromHeight) {
+                result.bottom = (toHeight - (toHeight - fromHeight) * (1 - ratio)).toInt()
+            } else {
+                result.bottom = (toHeight + (fromHeight - toHeight) * (1 - ratio)).toInt()
+            }
+        }
+        if (toWidth == fromWidth) {
+            result.right = toWidth
+        } else {
+            if (toWidth > fromWidth) {
+                result.right = (toWidth - (toWidth - fromWidth) * (1 - ratio)).toInt()
+            } else {
+                result.right = (toWidth + (fromWidth - toWidth) * (1 - ratio)).toInt()
+            }
+        }
+        return result
+    }
+
+    private fun sync(from: Rect, to: Rect) {
+        fromWidth = from.right
+        fromHeight = from.bottom
+        toWidth = to.right
+        toHeight = to.bottom
+    }
+}

lib/android/app/src/main/java/com/reactnativenavigation/views/element/animators/MatrixAnimator.kt

 package com.reactnativenavigation.views.element.animators
 
 import android.animation.Animator
+import android.animation.AnimatorListenerAdapter
 import android.animation.ObjectAnimator
 import android.animation.TypeEvaluator
 import android.graphics.Rect
 import android.view.View
+import androidx.core.animation.addListener
+import androidx.core.animation.doOnStart
 import com.facebook.drawee.drawable.ScalingUtils.InterpolatingScaleType
 import com.facebook.react.views.image.ReactImageView
 import com.reactnativenavigation.parse.SharedElementTransitionOptions
 import com.reactnativenavigation.utils.ViewUtils
+import com.reactnativenavigation.utils.withDuration
+import com.reactnativenavigation.utils.withInterpolator
+import com.reactnativenavigation.utils.withStartDelay
 
 class MatrixAnimator(from: View, to: View) : PropertyAnimatorCreator<ReactImageView>(from, to) {
     override fun shouldAnimateProperty(fromChild: ReactImageView, toChild: ReactImageView): Boolean {
                     calculateBounds(from),
                     calculateBounds(to)
             )
-            return ObjectAnimator.ofObject(TypeEvaluator<Float> { fraction: Float, _: Any, _: Any ->
-                hierarchy.actualImageScaleType?.let {
-                    (hierarchy.actualImageScaleType as InterpolatingScaleType?)!!.value = fraction
-                    to.invalidate()
-                }
-                null
-            }, 0, 1).setDuration(options.getDuration())
+
+            return ObjectAnimator
+                    .ofObject(TypeEvaluator<Float> { fraction: Float, _: Any, _: Any ->
+                        hierarchy.actualImageScaleType?.let {
+                            (hierarchy.actualImageScaleType as InterpolatingScaleType?)!!.value = fraction
+                            to.invalidate()
+                        }
+                        null
+                    }, 0, 1)
+                    .setDuration(options.getDuration())
+                    .withStartDelay(options.getStartDelay())
+                    .withInterpolator(options.interpolation.interpolator)
         }
     }
 

lib/android/app/src/main/java/com/reactnativenavigation/views/element/animators/ScaleXAnimator.kt

 import android.animation.ObjectAnimator
 import android.view.View
 import android.view.ViewGroup
+import androidx.core.animation.addListener
+import androidx.core.animation.doOnStart
 import com.facebook.react.views.text.ReactTextView
 import com.reactnativenavigation.parse.SharedElementTransitionOptions
+import com.reactnativenavigation.utils.withDuration
+import com.reactnativenavigation.utils.withInterpolator
+import com.reactnativenavigation.utils.withStartDelay
 
 class ScaleXAnimator(from: View, to: View) : PropertyAnimatorCreator<ViewGroup>(from, to) {
     override fun shouldAnimateProperty(fromChild: ViewGroup, toChild: ViewGroup): Boolean {
     override fun excludedViews(): List<Class<*>> = listOf<Class<*>>(ReactTextView::class.java)
 
     override fun create(options: SharedElementTransitionOptions): Animator {
+        to.scaleX = from.width.toFloat() / to.width
         return ObjectAnimator
                 .ofFloat(to, View.SCALE_X, from.width.toFloat() / to.width, 1f)
                 .setDuration(options.getDuration())
+                .withStartDelay(options.getStartDelay())
+                .withInterpolator(options.interpolation.interpolator)
     }
 }

lib/android/app/src/main/java/com/reactnativenavigation/views/element/animators/ScaleYAnimator.kt

 import android.animation.ObjectAnimator
 import android.view.View
 import android.view.ViewGroup
+import androidx.core.animation.addListener
+import androidx.core.animation.doOnStart
 import com.facebook.react.views.text.ReactTextView
 import com.reactnativenavigation.parse.SharedElementTransitionOptions
+import com.reactnativenavigation.utils.withDuration
+import com.reactnativenavigation.utils.withInterpolator
+import com.reactnativenavigation.utils.withStartDelay
 
 class ScaleYAnimator(from: View, to: View) : PropertyAnimatorCreator<ViewGroup>(from, to) {
     override fun shouldAnimateProperty(fromChild: ViewGroup, toChild: ViewGroup): Boolean {
     override fun excludedViews() = listOf(ReactTextView::class.java)
 
     override fun create(options: SharedElementTransitionOptions): Animator {
+        to.scaleY = from.height.toFloat() / to.height
         return ObjectAnimator
                 .ofFloat(to, View.SCALE_Y, from.height.toFloat() / to.height, 1f)
                 .setDuration(options.getDuration())
+                .withStartDelay(options.getStartDelay())
+                .withInterpolator(options.interpolation.interpolator)
     }
 }

lib/android/app/src/main/java/com/reactnativenavigation/views/element/animators/TextChangeAnimator.kt

 import android.widget.TextView
 import com.facebook.react.views.text.ReactTextView
 import com.reactnativenavigation.parse.SharedElementTransitionOptions
-import com.reactnativenavigation.utils.TextViewUtils
-import com.reactnativenavigation.utils.ViewUtils
+import com.reactnativenavigation.utils.*
 import com.shazam.android.widget.text.reflow.ReflowTextAnimatorHelper
 
 class TextChangeAnimator(from: View, to: View) : PropertyAnimatorCreator<ReactTextView>(from, to) {
                 }
                 .buildAnimator()
                 .setDuration(options.getDuration())
+                .withInterpolator(options.interpolation.interpolator)
     }
 }

lib/android/app/src/main/java/com/reactnativenavigation/views/element/animators/XAnimator.kt

 package com.reactnativenavigation.views.element.animators
 
 import android.animation.Animator
+import android.animation.AnimatorListenerAdapter
 import android.animation.ObjectAnimator
 import android.view.View
 import android.view.View.TRANSLATION_X
+import androidx.core.animation.addListener
+import androidx.core.animation.doOnStart
 import com.facebook.react.views.text.ReactTextView
 import com.reactnativenavigation.parse.SharedElementTransitionOptions
 import com.reactnativenavigation.utils.ViewUtils
+import com.reactnativenavigation.utils.withInterpolator
+import com.reactnativenavigation.utils.withStartDelay
 
 class XAnimator(from: View, to: View) : PropertyAnimatorCreator<View>(from, to) {
     private val dx: Int
     override fun shouldAnimateProperty(fromChild: View, toChild: View) = dx != 0
 
     override fun create(options: SharedElementTransitionOptions): Animator {
-        return ObjectAnimator.ofFloat(to, TRANSLATION_X, dx.toFloat(), 0f).setDuration(options.getDuration())
+        to.translationX = dx.toFloat()
+        return ObjectAnimator
+                .ofFloat(to, TRANSLATION_X, dx.toFloat(), 0f)
+                .setDuration(options.getDuration())
+                .withStartDelay(options.getStartDelay())
+                .withInterpolator(options.interpolation.interpolator)
     }
 }

lib/android/app/src/main/java/com/reactnativenavigation/views/element/animators/YAnimator.kt

 package com.reactnativenavigation.views.element.animators
 
 import android.animation.Animator
+import android.animation.AnimatorListenerAdapter
 import android.animation.ObjectAnimator
 import android.view.View
 import android.view.View.TRANSLATION_Y
 import android.view.ViewGroup
+import androidx.core.animation.addListener
+import androidx.core.animation.doOnStart
 import com.facebook.react.views.text.ReactTextView
 import com.reactnativenavigation.parse.SharedElementTransitionOptions
 import com.reactnativenavigation.utils.ViewUtils
+import com.reactnativenavigation.utils.withInterpolator
+import com.reactnativenavigation.utils.withStartDelay
 
 class YAnimator(from: View, to: View) : PropertyAnimatorCreator<View>(from, to) {
     private val dy: Int
     override fun excludedViews() = listOf(ReactTextView::class.java)
 
     override fun create(options: SharedElementTransitionOptions): Animator {
-        return ObjectAnimator.ofFloat(to, TRANSLATION_Y, dy.toFloat(), 0f).setDuration(options.getDuration())
+        to.translationY = dy.toFloat()
+        return ObjectAnimator
+                .ofFloat(to, TRANSLATION_Y, dy.toFloat(), 0f)
+                .setDuration(options.getDuration())
+                .withStartDelay(options.getStartDelay())
+                .withInterpolator(options.interpolation.interpolator)
     }
 }

playground/src/screens/sharedElementTransition/CocktailDetailsScreen.js

 module.exports = CocktailDetailsScreen;
 const SIZE = 120;
 const HEADER = 150;
-const IMAGE_OFFSET = 52
 const styles = StyleSheet.create({
   root: {
     marginTop: 0