Implement rotate animation for shared element transition (#6144)

This commit adds support for animating rotate/rotationZ animation during shared element transition.

It also...
* Removes ClipBoundsAnimator - Not sure why I reintroduced it
* Sets pivotX and pivotY only if needed
* Removes "Preview" button in Navigation tab from Android
* Delete ClipBoundsAnimator

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

@@ -31,9 +31,9 @@ class SharedElementTransition(appearing: ViewController<*>, private val options:
     private fun animators(): List<PropertyAnimatorCreator<*>> {
         return listOf(
                 MatrixAnimator(from, to),
-                ClipBoundsAnimator(from, to),
                 XAnimator(from, to),
                 YAnimator(from, to),
+                RotationAnimator(from, to),
                 ScaleXAnimator(from, to),
                 ScaleYAnimator(from, to),
                 BackgroundColorAnimator(from, to),

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

@@ -8,6 +8,7 @@ import android.view.ViewGroup
 import android.widget.FrameLayout
 import androidx.core.animation.doOnCancel
 import androidx.core.animation.doOnEnd
+import androidx.core.view.marginLeft
 import com.facebook.react.uimanager.ViewGroupManager
 import com.facebook.react.views.image.ReactImageView
 import com.reactnativenavigation.R
@@ -101,19 +102,18 @@ open class TransitionAnimatorCreator {
 
     private fun reparent(transition: Transition) {
         with(transition) {
+            val loc = ViewUtils.getLocationOnScreen(view)
             val biologicalParent = view.parent as ViewGroup
             view.setTag(R.id.original_parent, biologicalParent)
             view.setTag(R.id.original_layout_params, view.layoutParams)
-            view.setTag(R.id.original_top, view.top)
+            view.setTag(R.id.original_top, loc.y - transition.topInset)
             view.setTag(R.id.original_bottom, view.bottom)
             view.setTag(R.id.original_right, view.right)
-            view.setTag(R.id.original_left, view.left)
+            view.setTag(R.id.original_left, loc.x)
 
-            val loc = ViewUtils.getLocationOnScreen(view)
             biologicalParent.removeView(view)
 
             val lp = FrameLayout.LayoutParams(view.layoutParams)
-            lp.topMargin = loc.y + viewController.topInset
             lp.topMargin = loc.y
             lp.leftMargin = loc.x
             if (view !is ReactImageView) {

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

@@ -2,31 +2,29 @@ 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) {
+class RotationAnimator(from: View, to: View) : PropertyAnimatorCreator<ReactImageView>(from, to) {
+    private val fromRotation = from.rotation
+    private val toRotation = to.rotation
+
     override fun shouldAnimateProperty(fromChild: ReactImageView, toChild: ReactImageView): Boolean {
-        return !ViewUtils.areDimensionsEqual(from, to)
+        return fromRotation != toRotation
     }
 
     override fun create(options: SharedElementTransitionOptions): Animator {
-        val startDrawingRect = Rect(); from.getDrawingRect(startDrawingRect)
-        val endDrawingRect = Rect(); to.getDrawingRect(endDrawingRect)
-        return ObjectAnimator.ofObject(
-                ClipBoundsEvaluator(),
-                startDrawingRect,
-                endDrawingRect
-        )
+        to.rotation = fromRotation
+        to.pivotX = 0f
+        to.pivotY = 0f
+        return ObjectAnimator
+                .ofFloat(to, View.ROTATION, fromRotation, toRotation)
                 .withDuration(options.getDuration())
                 .withStartDelay(options.getStartDelay())
                 .withInterpolator(options.interpolation.interpolator)
     }
-
 }

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

@@ -7,6 +7,7 @@ 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.image.ReactImageView
 import com.facebook.react.views.text.ReactTextView
 import com.reactnativenavigation.parse.SharedElementTransitionOptions
 import com.reactnativenavigation.utils.ViewUtils
@@ -21,7 +22,6 @@ class XAnimator(from: View, to: View) : PropertyAnimatorCreator<View>(from, to)
         val fromXy = ViewUtils.getLocationOnScreen(from)
         val toXy = ViewUtils.getLocationOnScreen(to)
         dx = fromXy.x - toXy.x
-        to.pivotX = 0f
     }
 
     override fun excludedViews() = listOf(ReactTextView::class.java)
@@ -30,6 +30,7 @@ class XAnimator(from: View, to: View) : PropertyAnimatorCreator<View>(from, to)
 
     override fun create(options: SharedElementTransitionOptions): Animator {
         to.translationX = dx.toFloat()
+        to.pivotX = 0f
         return ObjectAnimator
                 .ofFloat(to, TRANSLATION_X, dx.toFloat(), 0f)
                 .withDuration(options.getDuration())

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

@@ -20,7 +20,6 @@ class YAnimator(from: View, to: View) : PropertyAnimatorCreator<View>(from, to)
         val fromXy = ViewUtils.getLocationOnScreen(from)
         val toY = (to.layoutParams as ViewGroup.MarginLayoutParams).topMargin
         dy = fromXy.y - toY
-        to.pivotY = 0f
     }
 
     override fun shouldAnimateProperty(fromChild: View, toChild: View) = dy != 0
@@ -29,6 +28,7 @@ class YAnimator(from: View, to: View) : PropertyAnimatorCreator<View>(from, to)
 
     override fun create(options: SharedElementTransitionOptions): Animator {
         to.translationY = dy.toFloat()
+        to.pivotY = 0f
         return ObjectAnimator
                 .ofFloat(to, TRANSLATION_Y, dy.toFloat(), 0f)
                 .withDuration(options.getDuration())

playground/src/screens/NavigationScreen.js

@@ -1,4 +1,5 @@
 const React = require('react');
+const { Platform } = require('react-native');
 const Root = require('../components/Root');
 const Button = require('../components/Button')
 const Navigation = require('./../services/Navigation');
@@ -42,11 +43,11 @@ class NavigationScreen extends React.Component {
         <Button label='Static Events' testID={SHOW_STATIC_EVENTS_SCREEN} onPress={this.pushStaticEventsScreen} />
         <Button label='Orientation' testID={SHOW_ORIENTATION_SCREEN} onPress={this.orientation} />
         <Button label='React Context API' onPress={this.pushContextScreen} />
-        {<Button label='Shared Element' onPress={this.sharedElement} />}
-        <Navigation.TouchablePreview
+        <Button label='Shared Element' onPress={this.sharedElement} />
+        {Platform.OS === 'ios' && <Navigation.TouchablePreview
           touchableComponent={Button}
           onPressIn={this.preview}
-          label='Preview' />
+          label='Preview' />}
       </Root>
     );
   }

playground/src/screens/sharedElementTransition/CocktailDetailsScreen.js

@@ -100,6 +100,9 @@ const styles = StyleSheet.create({
     height: SIZE,
     width: SIZE,
     zIndex: 1,
+    // transform: [
+    //   { rotate: '45deg' }
+    // ],
     marginLeft: 24,
     marginBottom: -24
   }