fix(android): fixed pixel rounding in transitions

Author: IjzerenHein

android/src/main/java/com/ijzerenhein/sharedelement/RNSharedElementTransition.java

@@ -7,6 +7,7 @@
 import android.util.Log;
 import android.graphics.Canvas;
 import android.graphics.Rect;
+import android.graphics.RectF;
 import android.graphics.Color;
 import android.view.View;
 import android.view.ViewGroup;
@@ -175,7 +176,7 @@ private void updateLayout() {
         RNSharedElementTransitionItem startItem = mItems.get(Item.START.getValue());
         RNSharedElementTransitionItem endItem = mItems.get(Item.END.getValue());
 
-        // Get styles & content
+        // Get styles
         RNSharedElementStyle startStyle = startItem.getStyle();
         RNSharedElementStyle endStyle = endItem.getStyle();
         if ((startStyle == null) && (endStyle == null)) return;
@@ -192,8 +193,8 @@ private void updateLayout() {
         Rect startFrame = (startStyle != null) ? startStyle.frame : EMPTY_RECT;
         Rect endLayout = (endStyle != null) ? endStyle.layout : EMPTY_RECT;
         Rect endFrame = (endStyle != null) ? endStyle.frame : EMPTY_RECT;
-        Rect parentLayout = new Rect(startLayout);
-        parentLayout.union(endLayout);
+        RectF parentLayout = new RectF(startLayout);
+        parentLayout.union(new RectF(endLayout));
 
         // Get clipped areas
         Rect startClippedLayout = (startStyle != null) ? startItem.getClippedLayout() : EMPTY_RECT;
@@ -202,25 +203,25 @@ private void updateLayout() {
         Rect endClipInsets = getClipInsets(endLayout, endClippedLayout);
 
         // Get interpolated layout
-        Rect interpolatedLayout;
-        Rect interpolatedClipInsets;
+        RectF interpolatedLayout;
+        RectF interpolatedClipInsets;
         RNSharedElementStyle interpolatedStyle;
         if ((startStyle != null) && (endStyle != null)) {
             interpolatedLayout = getInterpolatedLayout(startLayout, endLayout, mNodePosition);
             interpolatedClipInsets = getInterpolatedClipInsets(parentLayout, startClipInsets, startClippedLayout, endClipInsets, endClippedLayout, mNodePosition);
             interpolatedStyle = getInterpolatedStyle(startStyle, startContent, endStyle, endContent, mNodePosition);
         } else if (startStyle != null) {
-            interpolatedLayout = startLayout;
+            interpolatedLayout = new RectF(startLayout);
             interpolatedStyle = startStyle;
-            interpolatedClipInsets = startClipInsets;
+            interpolatedClipInsets = new RectF(startClipInsets);
         } else {
             if (!mInitialNodePositionSet) {
                 mNodePosition = 1.0f;
                 mInitialNodePositionSet = true;
             }
-            interpolatedLayout = endLayout;
+            interpolatedLayout = new RectF(endLayout);
             interpolatedStyle = endStyle;
-            interpolatedClipInsets = endClipInsets;
+            interpolatedClipInsets = new RectF(endClipInsets);
         }
 
         // Apply clipping insets
@@ -241,8 +242,8 @@ private void updateLayout() {
         super.layout(
                 -mParentOffset[0],
                 -mParentOffset[1],
-            parentLayout.width() - mParentOffset[0],
-            parentLayout.height() - mParentOffset[1]
+          (int) Math.ceil(parentLayout.width() - mParentOffset[0]),
+          (int) Math.ceil(parentLayout.height() - mParentOffset[1])
         );
         setTranslationX(parentLayout.left);
         setTranslationY(parentLayout.top);
@@ -352,22 +353,22 @@ private Rect getClipInsets(Rect layout, Rect clippedLayout) {
         );
     }
 
-    private Rect getInterpolatedClipInsets(
-        Rect interpolatedLayout,
+    private RectF getInterpolatedClipInsets(
+        RectF interpolatedLayout,
         Rect startClipInsets,
         Rect startClippedLayout,
         Rect endClipInsets,
         Rect endClippedLayout,
         float position) {
-        Rect clipInsets = new Rect();
+        RectF clipInsets = new RectF();
 
         // Top
         if ((endClipInsets.top == 0) && (startClipInsets.top != 0) && (startClippedLayout.top <= endClippedLayout.top)) {
             clipInsets.top = Math.max(0, startClippedLayout.top - interpolatedLayout.top);
         } else if ((startClipInsets.top == 0) && (endClipInsets.top != 0) && (endClippedLayout.top <= startClippedLayout.top)) {
             clipInsets.top = Math.max(0, endClippedLayout.top - interpolatedLayout.top);
         } else {
-            clipInsets.top = (int) (startClipInsets.top + ((endClipInsets.top - startClipInsets.top) * position));
+            clipInsets.top = (startClipInsets.top + ((endClipInsets.top - startClipInsets.top) * position));
         }
 
         // Bottom
@@ -376,7 +377,7 @@ private Rect getInterpolatedClipInsets(
         } else if ((startClipInsets.bottom == 0) && (endClipInsets.bottom != 0) && (endClippedLayout.bottom >= startClippedLayout.bottom)) {
             clipInsets.bottom = Math.max(0, interpolatedLayout.bottom - endClippedLayout.bottom);
         } else {
-            clipInsets.bottom = (int) (startClipInsets.bottom + ((endClipInsets.bottom - startClipInsets.bottom) * position));
+            clipInsets.bottom = (startClipInsets.bottom + ((endClipInsets.bottom - startClipInsets.bottom) * position));
         }
 
         // Left
@@ -385,7 +386,7 @@ private Rect getInterpolatedClipInsets(
         } else if ((startClipInsets.left == 0) && (endClipInsets.left != 0) && (endClippedLayout.left <= startClippedLayout.left)) {
             clipInsets.left = Math.max(0, endClippedLayout.left - interpolatedLayout.left);
         } else {
-            clipInsets.left = (int) (startClipInsets.left + ((endClipInsets.left - startClipInsets.left) * position));
+            clipInsets.left = (startClipInsets.left + ((endClipInsets.left - startClipInsets.left) * position));
         }
 
          // Right
@@ -394,18 +395,18 @@ private Rect getInterpolatedClipInsets(
         } else if ((startClipInsets.right == 0) && (endClipInsets.right != 0) && (endClippedLayout.right >= startClippedLayout.right)) {
             clipInsets.right = Math.max(0, interpolatedLayout.right - endClippedLayout.right);
         } else {
-            clipInsets.right = (int) (startClipInsets.right + ((endClipInsets.right - startClipInsets.right) * position));
+            clipInsets.right = (startClipInsets.right + ((endClipInsets.right - startClipInsets.right) * position));
         }
 
         return clipInsets;
     }
 
-    private Rect getInterpolatedLayout(Rect layout1, Rect layout2, float position) {
-        return new Rect(
-            (int) (layout1.left + ((layout2.left - layout1.left) * position)),
-            (int) (layout1.top + ((layout2.top - layout1.top) * position)),
-            (int) (layout1.right + ((layout2.right - layout1.right) * position)),
-            (int) (layout1.bottom + ((layout2.bottom - layout1.bottom) * position))
+    private RectF getInterpolatedLayout(Rect layout1, Rect layout2, float position) {
+        return new RectF(
+            (layout1.left + ((layout2.left - layout1.left) * position)),
+            (layout1.top + ((layout2.top - layout1.top) * position)),
+            (layout1.right + ((layout2.right - layout1.right) * position)),
+            (layout1.bottom + ((layout2.bottom - layout1.bottom) * position))
         );
     }
 

android/src/main/java/com/ijzerenhein/sharedelement/RNSharedElementView.java

@@ -3,6 +3,7 @@
 import android.util.Log;
 import android.view.View;
 import android.graphics.Rect;
+import android.graphics.RectF;
 
 import com.facebook.react.uimanager.ThemedReactContext;
 
@@ -29,8 +30,8 @@ void reset() {
     }
 
     void updateViewAndDrawable(
-            Rect layout,
-            Rect parentLayout,
+            RectF layout,
+            RectF parentLayout,
             Rect originalLayout,
             Rect originalFrame,
             RNSharedElementContent content,
@@ -53,8 +54,8 @@ void updateViewAndDrawable(
         }
 
         // Update view size/position/scale
-        int width = layout.width();
-        int height = layout.height();
+        float width = layout.width();
+        float height = layout.height();
         if (useGPUScaling) {
             int originalWidth = originalFrame.width();
             int originalHeight = originalFrame.height();
@@ -65,8 +66,8 @@ void updateViewAndDrawable(
             setTranslationY(layout.top - parentLayout.top);
 
             // Update scale
-            float scaleX = (float) width / (float) originalWidth;
-            float scaleY = (float) height / (float) originalHeight;
+            float scaleX = width / (float) originalWidth;
+            float scaleY = height / (float) originalHeight;
             if (!Float.isInfinite(scaleX) && !Float.isNaN(scaleX) && !Float.isInfinite(scaleY) && !Float.isNaN(scaleY)) {
 
                 // Determine si
@@ -111,7 +112,7 @@ void updateViewAndDrawable(
         } else {
 
             // Update view
-            layout(0, 0, width, height);
+            layout(0, 0, (int)Math.ceil(width), (int)Math.ceil(height));
             setTranslationX(layout.left - parentLayout.left);
             setTranslationY(layout.top - parentLayout.top);
         }