Browse Source

[Android] Added fade & horizontal transition animations between screens (#1371)

Ruslan.V 7 years ago
parent
commit
394e0960f8

+ 1
- 0
android/app/src/main/java/com/reactnativenavigation/params/BaseScreenParams.java View File

@@ -20,6 +20,7 @@ public class BaseScreenParams {
20 20
     public String fragmentCreatorClassName;
21 21
     public Bundle fragmentCreatorPassProps;
22 22
     public boolean animateScreenTransitions;
23
+    public String animationType;
23 24
 
24 25
     public boolean isFragmentScreen() {
25 26
         return fragmentCreatorClassName != null;

+ 3
- 0
android/app/src/main/java/com/reactnativenavigation/params/parsers/ScreenParamsParser.java View File

@@ -21,6 +21,7 @@ public class ScreenParamsParser extends Parser {
21 21
     private static final String FRAGMENT_CREATOR_CLASS_NAME = "fragmentCreatorClassName";
22 22
     private static final String FRAGMENT_CREATOR_PASS_PROPS = "fragmentCreatorPassProps";
23 23
     private static final String OVERRIDE_BACK_PRESS = "overrideBackPress";
24
+    private static final String ANIMATION_TYPE = "animationType";
24 25
 
25 26
     @SuppressWarnings("ConstantConditions")
26 27
     public static ScreenParams parse(Bundle params) {
@@ -52,6 +53,8 @@ public class ScreenParamsParser extends Parser {
52 53
         result.animateScreenTransitions = new AnimationParser(params).parse();
53 54
         result.sharedElementsTransitions = getSharedElementsTransitions(params);
54 55
 
56
+        result.animationType = params.getString(ANIMATION_TYPE);
57
+
55 58
         return result;
56 59
     }
57 60
 

+ 48
- 10
android/app/src/main/java/com/reactnativenavigation/screens/ScreenAnimator.java View File

@@ -20,11 +20,13 @@ import javax.annotation.Nullable;
20 20
 
21 21
 class ScreenAnimator {
22 22
     private final float translationY;
23
+    private final float translationX;
23 24
     private Screen screen;
24 25
 
25 26
     ScreenAnimator(Screen screen) {
26 27
         this.screen = screen;
27 28
         translationY = 0.08f * ViewUtils.getScreenHeight();
29
+        translationX = 0.08f * ViewUtils.getScreenWidth();
28 30
     }
29 31
 
30 32
     public void show(boolean animate, final Runnable onAnimationEnd) {
@@ -58,12 +60,30 @@ class ScreenAnimator {
58 60
         alpha.setInterpolator(new DecelerateInterpolator());
59 61
         alpha.setDuration(200);
60 62
 
61
-        ObjectAnimator translationY = ObjectAnimator.ofFloat(screen, View.TRANSLATION_Y, this.translationY, 0);
62
-        translationY.setInterpolator(new DecelerateInterpolator());
63
-        translationY.setDuration(280);
64
-
65 63
         AnimatorSet set = new AnimatorSet();
66
-        set.playTogether(translationY, alpha);
64
+        switch (String.valueOf(this.screen.screenParams.animationType)) {
65
+            case "fade": {
66
+                set.play(alpha);
67
+                break;
68
+            }
69
+            case "slide-horizontal": {
70
+                ObjectAnimator translationX = ObjectAnimator.ofFloat(screen, View.TRANSLATION_X, this.translationX, 0);
71
+                translationX.setInterpolator(new DecelerateInterpolator());
72
+                translationX.setDuration(280);
73
+
74
+                set.playTogether(translationX, alpha);
75
+                break;
76
+            }
77
+            default: {
78
+                ObjectAnimator translationY = ObjectAnimator.ofFloat(screen, View.TRANSLATION_Y, this.translationY, 0);
79
+                translationY.setInterpolator(new DecelerateInterpolator());
80
+                translationY.setDuration(280);
81
+
82
+                set.playTogether(translationY, alpha);
83
+                break;
84
+            }
85
+        }
86
+
67 87
         set.addListener(new AnimatorListenerAdapter() {
68 88
             @Override
69 89
             public void onAnimationStart(Animator animation) {
@@ -86,12 +106,30 @@ class ScreenAnimator {
86 106
         alpha.setStartDelay(100);
87 107
         alpha.setDuration(150);
88 108
 
89
-        ObjectAnimator translationY = ObjectAnimator.ofFloat(screen, View.TRANSLATION_Y, this.translationY);
90
-        translationY.setInterpolator(new AccelerateInterpolator());
91
-        translationY.setDuration(250);
92
-
93 109
         AnimatorSet set = new AnimatorSet();
94
-        set.playTogether(translationY, alpha);
110
+        switch (String.valueOf(this.screen.screenParams.animationType)) {
111
+            case "fade": {
112
+                set.play(alpha);
113
+                break;
114
+            }
115
+            case "slide-horizontal": {
116
+                ObjectAnimator translationX = ObjectAnimator.ofFloat(screen, View.TRANSLATION_X, this.translationX);
117
+                translationX.setInterpolator(new AccelerateInterpolator());
118
+                translationX.setDuration(250);
119
+
120
+                set.playTogether(translationX, alpha);
121
+                break;
122
+            }
123
+            default: {
124
+                ObjectAnimator translationY = ObjectAnimator.ofFloat(screen, View.TRANSLATION_Y, this.translationY);
125
+                translationY.setInterpolator(new AccelerateInterpolator());
126
+                translationY.setDuration(250);
127
+
128
+                set.playTogether(translationY, alpha);
129
+                break;
130
+            }
131
+        }
132
+
95 133
         set.addListener(new AnimatorListenerAdapter() {
96 134
             @Override
97 135
             public void onAnimationEnd(Animator animation) {

+ 4
- 4
docs/screen-api.md View File

@@ -13,7 +13,7 @@ this.props.navigator.push({
13 13
   titleImage: require('../../img/my_image.png'), //navigation bar title image instead of the title text of the pushed screen (optional)
14 14
   passProps: {}, // Object that will be passed as props to the pushed screen (optional)
15 15
   animated: true, // does the push have transition animation or does it happen immediately (optional)
16
-  animationType: 'fade', // does the push have fade transition animation, iOS only (optional)
16
+  animationType: 'fade', // 'fade' (for both) / 'slide-horizontal' (for android) does the push have different transition animation (optional)
17 17
   backButtonTitle: undefined, // override the back button title (optional)
18 18
   backButtonHidden: false, // hide the back button altogether (optional)
19 19
   navigatorStyle: {}, // override the navigator style for the pushed screen (optional)
@@ -28,7 +28,7 @@ Pop the top screen from this screen's navigation stack.
28 28
 ```js
29 29
 this.props.navigator.pop({
30 30
   animated: true, // does the pop have transition animation or does it happen immediately (optional)
31
-  animationType: 'fade', // does the pop have fade transition animation, iOS only (optional)
31
+  animationType: 'fade', // 'fade' (for both) / 'slide-horizontal' (for android) does the pop have different transition animation (optional)
32 32
 });
33 33
 ```
34 34
 
@@ -39,7 +39,7 @@ Pop all the screens until the root from this screen's navigation stack.
39 39
 ```js
40 40
 this.props.navigator.popToRoot({
41 41
   animated: true, // does the popToRoot have transition animation or does it happen immediately (optional)
42
-  animationType: 'fade', // does the popToRoot have fade transition animation, iOS only (optional)
42
+  animationType: 'fade', // 'fade' (for both) / 'slide-horizontal' (for android) does the popToRoot have different transition animation (optional)
43 43
 });
44 44
 ```
45 45
 
@@ -53,7 +53,7 @@ this.props.navigator.resetTo({
53 53
   title: undefined, // navigation bar title of the pushed screen (optional)
54 54
   passProps: {}, // simple serializable object that will pass as props to the pushed screen (optional)
55 55
   animated: true, // does the resetTo have transition animation or does it happen immediately (optional)
56
-  animationType: 'fade', // does the resetTo have fade transition animation, iOS only (optional)
56
+  animationType: 'fade', // 'fade' (for both) / 'slide-horizontal' (for android) does the resetTo have different transition animation (optional)
57 57
   navigatorStyle: {}, // override the navigator style for the pushed screen (optional)
58 58
   navigatorButtons: {} // override the nav buttons for the pushed screen (optional)
59 59
 });