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
     public String fragmentCreatorClassName;
20
     public String fragmentCreatorClassName;
21
     public Bundle fragmentCreatorPassProps;
21
     public Bundle fragmentCreatorPassProps;
22
     public boolean animateScreenTransitions;
22
     public boolean animateScreenTransitions;
23
+    public String animationType;
23
 
24
 
24
     public boolean isFragmentScreen() {
25
     public boolean isFragmentScreen() {
25
         return fragmentCreatorClassName != null;
26
         return fragmentCreatorClassName != null;

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

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

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

20
 
20
 
21
 class ScreenAnimator {
21
 class ScreenAnimator {
22
     private final float translationY;
22
     private final float translationY;
23
+    private final float translationX;
23
     private Screen screen;
24
     private Screen screen;
24
 
25
 
25
     ScreenAnimator(Screen screen) {
26
     ScreenAnimator(Screen screen) {
26
         this.screen = screen;
27
         this.screen = screen;
27
         translationY = 0.08f * ViewUtils.getScreenHeight();
28
         translationY = 0.08f * ViewUtils.getScreenHeight();
29
+        translationX = 0.08f * ViewUtils.getScreenWidth();
28
     }
30
     }
29
 
31
 
30
     public void show(boolean animate, final Runnable onAnimationEnd) {
32
     public void show(boolean animate, final Runnable onAnimationEnd) {
58
         alpha.setInterpolator(new DecelerateInterpolator());
60
         alpha.setInterpolator(new DecelerateInterpolator());
59
         alpha.setDuration(200);
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
         AnimatorSet set = new AnimatorSet();
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
         set.addListener(new AnimatorListenerAdapter() {
87
         set.addListener(new AnimatorListenerAdapter() {
68
             @Override
88
             @Override
69
             public void onAnimationStart(Animator animation) {
89
             public void onAnimationStart(Animator animation) {
86
         alpha.setStartDelay(100);
106
         alpha.setStartDelay(100);
87
         alpha.setDuration(150);
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
         AnimatorSet set = new AnimatorSet();
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
         set.addListener(new AnimatorListenerAdapter() {
133
         set.addListener(new AnimatorListenerAdapter() {
96
             @Override
134
             @Override
97
             public void onAnimationEnd(Animator animation) {
135
             public void onAnimationEnd(Animator animation) {

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

13
   titleImage: require('../../img/my_image.png'), //navigation bar title image instead of the title text of the pushed screen (optional)
13
   titleImage: require('../../img/my_image.png'), //navigation bar title image instead of the title text of the pushed screen (optional)
14
   passProps: {}, // Object that will be passed as props to the pushed screen (optional)
14
   passProps: {}, // Object that will be passed as props to the pushed screen (optional)
15
   animated: true, // does the push have transition animation or does it happen immediately (optional)
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
   backButtonTitle: undefined, // override the back button title (optional)
17
   backButtonTitle: undefined, // override the back button title (optional)
18
   backButtonHidden: false, // hide the back button altogether (optional)
18
   backButtonHidden: false, // hide the back button altogether (optional)
19
   navigatorStyle: {}, // override the navigator style for the pushed screen (optional)
19
   navigatorStyle: {}, // override the navigator style for the pushed screen (optional)
28
 ```js
28
 ```js
29
 this.props.navigator.pop({
29
 this.props.navigator.pop({
30
   animated: true, // does the pop have transition animation or does it happen immediately (optional)
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
 ```js
39
 ```js
40
 this.props.navigator.popToRoot({
40
 this.props.navigator.popToRoot({
41
   animated: true, // does the popToRoot have transition animation or does it happen immediately (optional)
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
   title: undefined, // navigation bar title of the pushed screen (optional)
53
   title: undefined, // navigation bar title of the pushed screen (optional)
54
   passProps: {}, // simple serializable object that will pass as props to the pushed screen (optional)
54
   passProps: {}, // simple serializable object that will pass as props to the pushed screen (optional)
55
   animated: true, // does the resetTo have transition animation or does it happen immediately (optional)
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
   navigatorStyle: {}, // override the navigator style for the pushed screen (optional)
57
   navigatorStyle: {}, // override the navigator style for the pushed screen (optional)
58
   navigatorButtons: {} // override the nav buttons for the pushed screen (optional)
58
   navigatorButtons: {} // override the nav buttons for the pushed screen (optional)
59
 });
59
 });