feat: added support for fade-in and fade-out animation types

Author: IjzerenHein

README.md

@@ -184,10 +184,12 @@ In this case you can use `resize="clip"` and `align="left-top"` to create a text
 
 #### SharedElementAnimation
 
-| Animation | Description                                     |
-| --------- | ----------------------------------------------- |
-| `move`    | Moves the start- element to the end position    |
-| `fade`    | Cross-fades between the start- and end elements |
+| Animation  | Description                                                                           |
+| ---------- | ------------------------------------------------------------------------------------- |
+| `move`     | Moves the start- element to the end position                                          |
+| `fade`     | Cross-fades between the start- and end elements                                       |
+| `fade-in`  | Fade-in the end element coming from the start position (start-element is not visible) |
+| `fade-out` | Fade-out the start element to the end position (end-element is not visible)           |
 
 
 #### SharedElementResize

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

@@ -231,28 +231,44 @@ private void updateLayout() {
         setTranslationX(parentLayout.left);
         setTranslationY(parentLayout.top);
 
+        // Determine opacity
+        float startAlpha = 1.0f;
+        float endAlpha = 1.0f;
+        switch (mAnimation) {
+        case MOVE:
+            startAlpha = interpolatedStyle.opacity;
+            endAlpha = 0.0f;
+            break;
+        case FADE:
+            startAlpha = ((startStyle != null) ? startStyle.opacity : 1) * (1 - mNodePosition);
+            endAlpha = ((endStyle != null) ? endStyle.opacity : 1) * mNodePosition;
+        case FADE_IN:
+            startAlpha = 0.0f;
+            endAlpha = ((endStyle != null) ? endStyle.opacity : 1) * mNodePosition;
+            break;
+        case FADE_OUT:
+            startAlpha = ((startStyle != null) ? startStyle.opacity : 1) * (1 - mNodePosition);
+            endAlpha = 0.0f;
+            break;
+        }
+
         // Render the start view
-        boolean isCrossFade = mAnimation != RNSharedElementAnimation.MOVE;
-        float startAlpha = !isCrossFade
-            ? interpolatedStyle.opacity
-            : ((startStyle != null) ? startStyle.opacity : 1) * (1 - mNodePosition);
-        mStartView.updateViewAndDrawable(
-            interpolatedLayout,
-            parentLayout,
-            startContent,
-            startLayout,
-            interpolatedStyle,
-            startAlpha,
-            mResize,
-            mAlign,
-            mNodePosition
-        );
+        if (mAnimation != RNSharedElementAnimation.FADE_IN) {
+            mStartView.updateViewAndDrawable(
+                interpolatedLayout,
+                parentLayout,
+                startContent,
+                startLayout,
+                interpolatedStyle,
+                startAlpha,
+                mResize,
+                mAlign,
+                mNodePosition
+            );
+        }
 
         // Render the end view as well for the "cross-fade" animations
-        if (isCrossFade) {
-
-            // Render the end view
-            float endAlpha = ((endStyle != null) ? endStyle.opacity : 1) * mNodePosition;
+        if ((mAnimation == RNSharedElementAnimation.FADE) || (mAnimation == RNSharedElementAnimation.FADE_IN)) {
             mEndView.updateViewAndDrawable(
                 interpolatedLayout,
                 parentLayout,
@@ -285,6 +301,8 @@ private void updateNodeVisibility() {
             boolean hidden = mInitialLayoutPassCompleted &&
                 (item.getStyle() != null) &&
                 (item.getContent() != null);
+            if (hidden && (mAnimation == RNSharedElementAnimation.FADE_IN) && item.getName().equals("start")) hidden = false;
+            if (hidden && (mAnimation == RNSharedElementAnimation.FADE_OUT) && item.getName().equals("end")) hidden = false;
             item.setHidden(hidden);
         }
     }

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

@@ -2,7 +2,9 @@
 
 enum RNSharedElementAnimation {
     MOVE(0),
-    FADE(1);
+    FADE(1),
+    FADE_IN(2),
+    FADE_OUT(3);
 
     private final int value;
     RNSharedElementAnimation(final int newValue) {value = newValue;}

ios/RNSharedElementTransition.m

@@ -158,7 +158,10 @@ - (void) setAlign:(RNSharedElementAlign)align
 - (void)updateNodeVisibility
 {
     for (RNSharedElementTransitionItem* item in _items) {
-        item.hidden = _initialLayoutPassCompleted && item.style != nil && item.content != nil;
+        BOOL hidden = _initialLayoutPassCompleted && item.style != nil && item.content != nil;
+        if (hidden && (_animation == RNSharedElementAnimationFadeIn) && [item.name isEqualToString:@"startNode"]) hidden = NO;
+        if (hidden && (_animation == RNSharedElementAnimationFadeOut) && [item.name isEqualToString:@"endNode"]) hidden = NO;
+        item.hidden = hidden;
     }
 }
 
@@ -539,9 +542,22 @@ - (void) updateStyle
         // Update end node
         contentView2.frame = endInterpolatedContentLayout;
 
-        // Cross-fade
-        contentView1.layer.opacity = 1.0f - MIN(MAX(_nodePosition, 0.0f), 1.0f);
-        contentView2.layer.opacity = MIN(MAX(_nodePosition, 0.0f), 1.0f);
+        // Fade
+        if (_animation == RNSharedElementAnimationFadeIn) {
+            // Fade-in
+            contentView1.layer.opacity = 0.0f;
+            contentView2.layer.opacity = MIN(MAX(_nodePosition, 0.0f), 1.0f);
+        }
+        else if (_animation == RNSharedElementAnimationFadeOut) {
+            // Fade-out
+            contentView1.layer.opacity = 1.0f - MIN(MAX(_nodePosition, 0.0f), 1.0f);
+            contentView2.layer.opacity = 0.0f;
+        }
+        else {
+            // Cross-fade
+            contentView1.layer.opacity = 1.0f - MIN(MAX(_nodePosition, 0.0f), 1.0f);
+            contentView2.layer.opacity = MIN(MAX(_nodePosition, 0.0f), 1.0f);
+        }
     }
 
     // Fire events

ios/RNSharedElementTypes.h

@@ -15,7 +15,9 @@ typedef NS_ENUM(NSInteger, RNSharedElementContentType) {
 
 typedef NS_ENUM(NSInteger, RNSharedElementAnimation) {
     RNSharedElementAnimationMove = 0,
-    RNSharedElementAnimationFade = 1
+    RNSharedElementAnimationFade = 1,
+    RNSharedElementAnimationFadeIn = 2,
+    RNSharedElementAnimationFadeOut = 3
 };
 
 typedef NS_ENUM(NSInteger, RNSharedElementResize) {

src/SharedElementTransition.tsx

@@ -79,7 +79,9 @@ if (isAvailable) {
 
 const NativeAnimationType = new Map<SharedElementAnimation, number>([
   ["move", 0],
-  ["fade", 1]
+  ["fade", 1],
+  ["fade-in", 2],
+  ["fade-out", 3]
 ]);
 
 const NativeResizeType = new Map<SharedElementResize, number>([

src/types.tsx

@@ -5,7 +5,7 @@ export type SharedElementNode = {
   parentInstance: any;
 };
 
-export type SharedElementAnimation = "move" | "fade";
+export type SharedElementAnimation = "move" | "fade" | "fade-in" | "fade-out";
 
 export type SharedElementResize = "auto" | "stretch" | "clip" | "none";