SharedElement bounds and scale animator (#1096)

Animate image scale and bounds

This commit properly animates images with different aspect ratios.
By default, regular scale animator is used which scales up or down the entire ImageView.
If `animateClipBounds={true}` is specified on the **to** `SharedElementTransition`, instead of scaling the View, the actual Drawable bounds and scale is animated which prevents the image from appearing distorted during the transition.

android/app/build.gradle

@@ -47,7 +47,7 @@ android {
 dependencies {
     compile fileTree(dir: "libs", include: ["*.jar"])
 
-	  compile 'com.android.support:design:25.0.1'
+	compile 'com.android.support:design:25.0.1'
     compile "com.android.support:appcompat-v7:25.0.1"
 
     // node_modules

android/app/src/main/java/com/reactnativenavigation/utils/ViewUtils.java

@@ -168,11 +168,11 @@ public class ViewUtils {
     public static Point getLocationOnScreen(View view) {
         int[] xy = new int[2];
         view.getLocationOnScreen(xy);
-        xy[1] -= getStatusBarPixelHeight();
+        xy[1] -= getStatusBarHeight();
         return new Point(xy[0], xy[1]);
     }
 
-    private static int getStatusBarPixelHeight() {
+    private static int getStatusBarHeight() {
         if (statusBarHeight > 0) {
             return statusBarHeight;
         }

android/app/src/main/java/com/reactnativenavigation/views/sharedElementTransition/AnimatorValuesResolver.java

@@ -3,13 +3,17 @@ package com.reactnativenavigation.views.sharedElementTransition;
 import android.graphics.Rect;
 import android.widget.TextView;
 
+import com.facebook.drawee.drawable.ScalingUtils;
+import com.facebook.drawee.generic.GenericDraweeHierarchy;
+import com.facebook.drawee.view.DraweeView;
+import com.facebook.react.views.image.ReactImageView;
 import com.reactnativenavigation.params.InterpolationParams;
 import com.reactnativenavigation.params.PathInterpolationParams;
 import com.reactnativenavigation.params.parsers.SharedElementTransitionParams;
 import com.reactnativenavigation.utils.ViewUtils;
 import com.reactnativenavigation.views.utils.Point;
 
-class AnimatorValuesResolver {
+public class AnimatorValuesResolver {
 
     final Point fromXy;
     final Point toXy;
@@ -31,44 +35,41 @@ class AnimatorValuesResolver {
     int endColor;
     Rect startDrawingRect = new Rect();
     Rect endDrawingRect = new Rect();
+    final Rect fromBounds;
+    final Rect toBounds;
+    final ScalingUtils.ScaleType fromScaleType;
+    final ScalingUtils.ScaleType toScaleType;
 
     AnimatorValuesResolver(SharedElementTransition from, SharedElementTransition to, SharedElementTransitionParams params) {
-        fromXy = calculateFromXY(from, to, params);
-        toXy = calculateToXY(to, from, params);
+        fromXy = ViewUtils.getLocationOnScreen(from.getSharedView());
+        toXy = ViewUtils.getLocationOnScreen(to.getSharedView());
         startScaleX = calculateStartScaleX(from, to);
         endScaleX = calculateEndScaleX(from, to);
         startScaleY = calculateStartScaleY(from, to);
         endScaleY = calculateEndScaleY(from, to);
         calculateColor(from, to);
         calculate(params.interpolation);
+        fromBounds = calculateBounds(from);
+        toBounds = calculateBounds(to);
+        fromScaleType = getScaleType(from);
+        toScaleType = getScaleType(to);
         calculateDrawingReacts(from, to);
     }
 
-    private Point calculateFromXY(SharedElementTransition from, SharedElementTransition to, SharedElementTransitionParams params) {
-        Point loc = ViewUtils.getLocationOnScreen(from.getSharedView());
-        if (params.animateClipBounds) {
-            if (from.getHeight() != to.getHeight()) {
-                if (from.getHeight() < to.getHeight()) {
-                    loc.y -= (to.getHeight() - from.getHeight()) / 2;
-                }
-            }
+    private ScalingUtils.ScaleType getScaleType(SharedElementTransition view) {
+        if (view.getSharedView() instanceof ReactImageView) {
+            return ((DraweeView<GenericDraweeHierarchy>) view.getSharedView()).getHierarchy().getActualImageScaleType();
         }
-        return loc;
+        return null;
     }
 
-    private Point calculateToXY(SharedElementTransition to, SharedElementTransition from, SharedElementTransitionParams params) {
-        Point loc = ViewUtils.getLocationOnScreen(to.getSharedView());
-        if (params.animateClipBounds) {
-            if (from.getHeight() != to.getHeight()) {
-                if (from.getHeight() > to.getHeight()) {
-                    loc.y -= (from.getHeight() - to.getHeight()) / 2;
-                }
-            }
+    private Rect calculateBounds(SharedElementTransition view) {
+        if (view.getSharedView() instanceof ReactImageView) {
+            return new Rect(0, 0, view.getSharedView().getWidth(), view.getSharedView().getHeight());
         }
-        return loc;
+        return null;
     }
 
-
     protected float calculateEndScaleY(SharedElementTransition from, SharedElementTransition to) {
         return 1;
     }
@@ -122,7 +123,6 @@ class AnimatorValuesResolver {
             endColor = ViewUtils.getForegroundColorSpans((TextView) to.getSharedView())[0].getForegroundColor();
         }
     }
-
     private void calculateDrawingReacts(SharedElementTransition from, SharedElementTransition to) {
         from.getDrawingRect(startDrawingRect);
         to.getDrawingRect(endDrawingRect);

android/app/src/main/java/com/reactnativenavigation/views/sharedElementTransition/SharedElementAnimatorCreator.java

@@ -5,6 +5,9 @@ import android.animation.ObjectAnimator;
 import android.support.annotation.NonNull;
 import android.view.View;
 
+import com.facebook.drawee.drawable.ScalingUtils;
+import com.facebook.drawee.generic.GenericDraweeHierarchy;
+import com.facebook.drawee.view.DraweeView;
 import com.reactnativenavigation.params.InterpolationParams;
 import com.reactnativenavigation.params.PathInterpolationParams;
 import com.reactnativenavigation.params.parsers.SharedElementTransitionParams;
@@ -49,54 +52,47 @@ class SharedElementAnimatorCreator {
                 result.add(createYAnimator(resolver, params));
             }
         }
-        if (shouldCreateScaleXAnimator(resolver, params)) {
+        if (shouldAddScaleXAnimator(resolver, params)) {
             result.add(createScaleXAnimator(resolver, params));
         }
-        if (shouldCreateScaleYAnimator(resolver, params)) {
+        if (shouldAddScaleYAnimator(resolver, params)) {
             result.add(createScaleYAnimator(resolver, params));
         }
-        if (shouldCreateColorAnimator(resolver)) {
+        if (shouldAddColorAnimator(resolver)) {
             result.add(createColorAnimator(resolver, params.duration));
         }
-        if (shouldCreateImageClipBoundsAnimator(params)) {
+        if (shouldAddImageClipBoundsAnimator(params)) {
             result.add(createImageClipBoundsAnimator(resolver, params.duration));
+            result.add(createImageTransformAnimator(resolver, params));
         }
         return result;
     }
 
-    private boolean shouldCreateScaleYAnimator(AnimatorValuesResolver resolver, SharedElementTransitionParams params) {
+    private boolean shouldAddScaleYAnimator(AnimatorValuesResolver resolver, SharedElementTransitionParams params) {
         return resolver.startScaleY != resolver.endScaleY && !params.animateClipBounds;
     }
 
-    private boolean shouldCreateScaleXAnimator(AnimatorValuesResolver resolver, SharedElementTransitionParams params) {
+    private boolean shouldAddScaleXAnimator(AnimatorValuesResolver resolver, SharedElementTransitionParams params) {
         return resolver.startScaleX != resolver.endScaleX && !params.animateClipBounds;
     }
 
     private boolean shouldAddLinearMotionXAnimator(AnimatorValuesResolver resolver, SharedElementTransitionParams params) {
-        if (params.animateClipBounds) {
-            return to.getWidth() - from.getWidth() != resolver.dx * 2;
-        } else {
-            return resolver.dx != 0;
-        }
+        return params.animateClipBounds || resolver.dx != 0;
     }
 
     private boolean shouldAddLinearMotionYAnimator(AnimatorValuesResolver resolver, SharedElementTransitionParams params) {
-        if (params.animateClipBounds) {
-            return to.getHeight() - from.getHeight() != resolver.dy * 2;
-        } else {
-            return resolver.dy != 0;
-        }
+        return params.animateClipBounds || resolver.dy != 0;
     }
 
     private boolean shouldAddCurvedMotionAnimator(AnimatorValuesResolver resolver, InterpolationParams interpolation) {
         return interpolation instanceof PathInterpolationParams && (resolver.dx != 0 || resolver.dy != 0);
     }
 
-    private boolean shouldCreateColorAnimator(AnimatorValuesResolver resolver) {
+    private boolean shouldAddColorAnimator(AnimatorValuesResolver resolver) {
         return resolver.startColor != resolver.endColor;
     }
 
-    private boolean shouldCreateImageClipBoundsAnimator(SharedElementTransitionParams params) {
+    private boolean shouldAddImageClipBoundsAnimator(SharedElementTransitionParams params) {
         return params.animateClipBounds;
     }
 
@@ -130,16 +126,18 @@ class SharedElementAnimatorCreator {
 
     private ObjectAnimator createScaleXAnimator(AnimatorValuesResolver resolver, SharedElementTransitionParams params) {
         to.getSharedView().setPivotX(0);
-        ObjectAnimator animator = ofFloat(to.getSharedView(), View.SCALE_X, resolver.startScaleX, resolver.endScaleX)
-                .setDuration(params.duration);
+        ObjectAnimator animator =
+                ofFloat(to.getSharedView(), View.SCALE_X, resolver.startScaleX, resolver.endScaleX)
+                        .setDuration(params.duration);
         animator.setInterpolator(params.interpolation.easing.getInterpolator());
         return animator;
     }
 
     private ObjectAnimator createScaleYAnimator(AnimatorValuesResolver resolver, SharedElementTransitionParams params) {
         to.getSharedView().setPivotY(0);
-        ObjectAnimator animator = ofFloat(to.getSharedView(), View.SCALE_Y, resolver.startScaleY, resolver.endScaleY)
-                .setDuration(params.duration);
+        ObjectAnimator animator =
+                ofFloat(to.getSharedView(), View.SCALE_Y, resolver.startScaleY, resolver.endScaleY)
+                        .setDuration(params.duration);
         animator.setInterpolator(params.interpolation.easing.getInterpolator());
         return animator;
     }
@@ -163,4 +161,16 @@ class SharedElementAnimatorCreator {
                 resolver.endDrawingRect)
                 .setDuration(duration);
     }
+    private Animator createImageTransformAnimator(AnimatorValuesResolver resolver, SharedElementTransitionParams params) {
+        ScalingUtils.InterpolatingScaleType ist = new ScalingUtils.InterpolatingScaleType(
+                resolver.fromScaleType,
+                resolver.toScaleType,
+                resolver.fromBounds,
+                resolver.toBounds
+        );
+        ((DraweeView<GenericDraweeHierarchy>) to.getSharedView()).getHierarchy().setActualImageScaleType(ist);
+        ObjectAnimator animator = ObjectAnimator.ofFloat(to, "matrixTransform", 0, 1).setDuration(params.duration);
+        animator.setInterpolator(params.interpolation.easing.getInterpolator());
+        return animator;
+    }
 }

android/app/src/main/java/com/reactnativenavigation/views/sharedElementTransition/SharedElementTransition.java

@@ -13,6 +13,9 @@ import android.widget.FrameLayout;
 import android.widget.RelativeLayout;
 import android.widget.TextView;
 
+import com.facebook.drawee.drawable.ScalingUtils;
+import com.facebook.drawee.generic.GenericDraweeHierarchy;
+import com.facebook.drawee.view.DraweeView;
 import com.facebook.react.views.image.ReactImageView;
 import com.reactnativenavigation.params.parsers.SharedElementParamsParser;
 import com.reactnativenavigation.params.parsers.SharedElementTransitionParams;
@@ -107,6 +110,13 @@ public class SharedElementTransition extends FrameLayout {
         }
     }
 
+    @Keep
+    public void setMatrixTransform(float value) {
+        GenericDraweeHierarchy hierarchy = ((DraweeView<GenericDraweeHierarchy>) child).getHierarchy();
+        ((ScalingUtils.InterpolatingScaleType) hierarchy.getActualImageScaleType()).setValue(value);
+        child.invalidate();
+    }
+
     public void attachChildToScreen() {
         ViewUtils.performOnParentScreen(this, new Task<Screen>() {
             @Override

android/app/src/main/java/com/reactnativenavigation/views/utils/ClipBoundsEvaluator.java

@@ -18,11 +18,9 @@ public class ClipBoundsEvaluator implements TypeEvaluator<Rect> {
             result.bottom = toHeight;
         } else {
             if (toHeight > fromHeight) {
-                result.top = (int) (Math.abs(toHeight - fromHeight) / 2 * (1 - ratio));
-                result.bottom = toHeight- result.top;
+                result.bottom = (int) (toHeight - (toHeight - fromHeight) * (1 - ratio));
             } else {
-                result.top = (int) (Math.abs(toHeight - fromHeight) / 2 * ratio);
-                result.bottom = fromHeight - result.top;
+                result.bottom = (int) (toHeight + (fromHeight - toHeight) * (1 - ratio));
             }
         }
 
@@ -30,11 +28,9 @@ public class ClipBoundsEvaluator implements TypeEvaluator<Rect> {
             result.right = toWidth;
         } else {
             if (toWidth > fromWidth) {
-                result.left = (int) (Math.abs(toWidth - fromWidth) / 2 * (1 - ratio));
-                result.right = toWidth - result.left;
+                result.right = (int) (toWidth - (toWidth - fromWidth) * (1 - ratio));
             } else {
-                result.left = (int) (Math.abs(toWidth - fromWidth) / 2 * ratio);
-                result.right = fromWidth - result.left;
+                result.right = (int) (toWidth + (fromWidth - toWidth) * (1 - ratio));
             }
         }
         return result;