Browse Source

Tweaked screen and fab animation values

No major changes, just tweaked values a little bit.

* Fab animation duration changed to 120 (previously 200)
* Fab show animation: Scales from 0.6 to 1 (previously 0)
* Fab hide animation: Scales from 1 to 0.6 (previously 0)
* Removed alpha delay from screen animation
* TranslationY value changed from 8% to 5%
Guy Carmeli 6 years ago
parent
commit
35514acd27

+ 1
- 3
android/app/src/main/java/com/reactnativenavigation/layouts/BottomTabsLayout.java View File

369
             @Override
369
             @Override
370
             public void run(ScreenStack screenStack) {
370
             public void run(ScreenStack screenStack) {
371
                 screenStack.push(params, createScreenLayoutParams(params));
371
                 screenStack.push(params, createScreenLayoutParams(params));
372
-                setStyleFromScreen(params.styleParams);
373
                 if (isCurrentStack(screenStack)) {
372
                 if (isCurrentStack(screenStack)) {
374
-                    alignSnackbarContainerWithBottomTabs((LayoutParams) snackbarAndFabContainer.getLayoutParams(), params.styleParams);
373
+                    setStyleFromScreen(params.styleParams);
375
                     EventBus.instance.post(new ScreenChangedEvent(params));
374
                     EventBus.instance.post(new ScreenChangedEvent(params));
376
                 }
375
                 }
377
             }
376
             }
387
                     @Override
386
                     @Override
388
                     public void onScreenPopAnimationEnd() {
387
                     public void onScreenPopAnimationEnd() {
389
                         setBottomTabsStyleFromCurrentScreen();
388
                         setBottomTabsStyleFromCurrentScreen();
390
-                        alignSnackbarContainerWithBottomTabs((LayoutParams) snackbarAndFabContainer.getLayoutParams(), params.styleParams);
391
                         EventBus.instance.post(new ScreenChangedEvent(getCurrentScreenStack().peek().getScreenParams()));
389
                         EventBus.instance.post(new ScreenChangedEvent(getCurrentScreenStack().peek().getScreenParams()));
392
                     }
390
                     }
393
                 });
391
                 });

+ 9
- 11
android/app/src/main/java/com/reactnativenavigation/screens/ScreenAnimator.java View File

20
 
20
 
21
 class ScreenAnimator {
21
 class ScreenAnimator {
22
     private static final int DURATION = 250;
22
     private static final int DURATION = 250;
23
-    private static final int ALPHA_START_DELAY = 100;
24
-    private static final int ALPHA_SHORT_DURATION = 150;
23
+    private static final int ALPHA_HIDE_DURATION = 100;
25
     private static final DecelerateInterpolator DECELERATE_INTERPOLATOR = new DecelerateInterpolator();
24
     private static final DecelerateInterpolator DECELERATE_INTERPOLATOR = new DecelerateInterpolator();
25
+    private static final DecelerateInterpolator DECELERATE_INTERPOLATOR_1x5 = new DecelerateInterpolator(1.5f);
26
     private static final AccelerateDecelerateInterpolator ACCELERATE_DECELERATE_INTERPOLATOR = new AccelerateDecelerateInterpolator();
26
     private static final AccelerateDecelerateInterpolator ACCELERATE_DECELERATE_INTERPOLATOR = new AccelerateDecelerateInterpolator();
27
     private static final AccelerateInterpolator ACCELERATE_INTERPOLATOR = new AccelerateInterpolator();
27
     private static final AccelerateInterpolator ACCELERATE_INTERPOLATOR = new AccelerateInterpolator();
28
     private final float translationY;
28
     private final float translationY;
31
 
31
 
32
     ScreenAnimator(Screen screen) {
32
     ScreenAnimator(Screen screen) {
33
         this.screen = screen;
33
         this.screen = screen;
34
-        translationY = 0.08f * ViewUtils.getWindowHeight(screen.activity);
34
+        translationY = 0.05f * ViewUtils.getWindowHeight(screen.activity);
35
         translationX = ViewUtils.getWindowWidth(screen.activity);
35
         translationX = ViewUtils.getWindowWidth(screen.activity);
36
     }
36
     }
37
 
37
 
63
 
63
 
64
     private Animator createShowAnimator(final @Nullable Runnable onAnimationEnd) {
64
     private Animator createShowAnimator(final @Nullable Runnable onAnimationEnd) {
65
         ObjectAnimator alpha = ObjectAnimator.ofFloat(screen, View.ALPHA, 0, 1);
65
         ObjectAnimator alpha = ObjectAnimator.ofFloat(screen, View.ALPHA, 0, 1);
66
-        alpha.setInterpolator(DECELERATE_INTERPOLATOR);
67
 
66
 
68
         AnimatorSet set = new AnimatorSet();
67
         AnimatorSet set = new AnimatorSet();
69
         switch (String.valueOf(this.screen.screenParams.animationType)) {
68
         switch (String.valueOf(this.screen.screenParams.animationType)) {
70
             case "fade": {
69
             case "fade": {
71
                 alpha.setDuration(DURATION);
70
                 alpha.setDuration(DURATION);
71
+                alpha.setInterpolator(DECELERATE_INTERPOLATOR);
72
                 set.play(alpha);
72
                 set.play(alpha);
73
                 break;
73
                 break;
74
             }
74
             }
81
             }
81
             }
82
             default: {
82
             default: {
83
                 ObjectAnimator translationY = ObjectAnimator.ofFloat(screen, View.TRANSLATION_Y, this.translationY, 0);
83
                 ObjectAnimator translationY = ObjectAnimator.ofFloat(screen, View.TRANSLATION_Y, this.translationY, 0);
84
-                translationY.setInterpolator(DECELERATE_INTERPOLATOR);
85
-                translationY.setDuration(DURATION);
86
-                alpha.setDuration(ALPHA_SHORT_DURATION);
84
+                set.setInterpolator(DECELERATE_INTERPOLATOR_1x5);
85
+                set.setDuration(DURATION);
87
                 set.playTogether(translationY, alpha);
86
                 set.playTogether(translationY, alpha);
88
                 break;
87
                 break;
89
             }
88
             }
107
 
106
 
108
     private Animator createHideAnimator(final Runnable onAnimationEnd) {
107
     private Animator createHideAnimator(final Runnable onAnimationEnd) {
109
         ObjectAnimator alpha = ObjectAnimator.ofFloat(screen, View.ALPHA, 0);
108
         ObjectAnimator alpha = ObjectAnimator.ofFloat(screen, View.ALPHA, 0);
110
-        alpha.setInterpolator(DECELERATE_INTERPOLATOR);
111
 
109
 
112
         AnimatorSet set = new AnimatorSet();
110
         AnimatorSet set = new AnimatorSet();
113
         switch (String.valueOf(this.screen.screenParams.animationType)) {
111
         switch (String.valueOf(this.screen.screenParams.animationType)) {
114
             case "fade": {
112
             case "fade": {
115
                 alpha.setDuration(DURATION);
113
                 alpha.setDuration(DURATION);
114
+                alpha.setInterpolator(DECELERATE_INTERPOLATOR);
116
                 set.play(alpha);
115
                 set.play(alpha);
117
                 break;
116
                 break;
118
             }
117
             }
125
             }
124
             }
126
             default: {
125
             default: {
127
                 ObjectAnimator translationY = ObjectAnimator.ofFloat(screen, View.TRANSLATION_Y, this.translationY);
126
                 ObjectAnimator translationY = ObjectAnimator.ofFloat(screen, View.TRANSLATION_Y, this.translationY);
128
-                translationY.setInterpolator(ACCELERATE_INTERPOLATOR);
129
                 translationY.setDuration(DURATION);
127
                 translationY.setDuration(DURATION);
130
-                alpha.setStartDelay(ALPHA_START_DELAY);
131
-                alpha.setDuration(ALPHA_SHORT_DURATION);
128
+                alpha.setDuration(ALPHA_HIDE_DURATION);
129
+                set.setInterpolator(DECELERATE_INTERPOLATOR);
132
                 set.playTogether(translationY, alpha);
130
                 set.playTogether(translationY, alpha);
133
                 break;
131
                 break;
134
             }
132
             }

+ 22
- 30
android/app/src/main/java/com/reactnativenavigation/views/FloatingActionButtonAnimator.java View File

4
 import android.animation.AnimatorListenerAdapter;
4
 import android.animation.AnimatorListenerAdapter;
5
 import android.support.design.widget.FloatingActionButton;
5
 import android.support.design.widget.FloatingActionButton;
6
 import android.view.View;
6
 import android.view.View;
7
+import android.view.animation.DecelerateInterpolator;
7
 
8
 
8
 import java.util.List;
9
 import java.util.List;
9
 
10
 
10
 public class FloatingActionButtonAnimator {
11
 public class FloatingActionButtonAnimator {
12
+    private static final int SHOW_DURATION = 120;
13
+    private static final int HIDE_DURATION = 120;
14
+    private static final float SCALE = 0.6f;
15
+    private static final int ANGLE = 90;
16
+    private static final DecelerateInterpolator DECELERATE_INTERPOLATOR = new DecelerateInterpolator(1.5f);
11
 
17
 
12
     private final FloatingActionButton collapsedFab;
18
     private final FloatingActionButton collapsedFab;
13
     private final FloatingActionButton expendedFab;
19
     private final FloatingActionButton expendedFab;
14
-    private int crossFadeAnimationDuration;
15
 
20
 
16
-    private enum State{Showing, Idle, Removing}
17
-    private State state = State.Idle;
18
-
19
-    public FloatingActionButtonAnimator(FloatingActionButton collapsedFab, FloatingActionButton expendedFab, int crossFadeAnimationDuration) {
21
+    FloatingActionButtonAnimator(FloatingActionButton collapsedFab, FloatingActionButton expendedFab) {
20
         this.collapsedFab = collapsedFab;
22
         this.collapsedFab = collapsedFab;
21
         this.expendedFab = expendedFab;
23
         this.expendedFab = expendedFab;
22
-        this.crossFadeAnimationDuration = crossFadeAnimationDuration;
23
-    }
24
-
25
-    boolean isAnimating() {
26
-        return state == State.Showing || state == State.Removing;
27
     }
24
     }
28
 
25
 
29
     void show() {
26
     void show() {
30
-        state = State.Showing;
31
-        collapsedFab.setScaleX(0);
32
-        collapsedFab.setScaleY(0);
27
+        collapsedFab.setScaleX(SCALE);
28
+        collapsedFab.setScaleY(SCALE);
29
+        collapsedFab.setAlpha(0.0f);
30
+        collapsedFab.setAlpha(0.0f);
33
         collapsedFab.animate()
31
         collapsedFab.animate()
34
                 .alpha(1)
32
                 .alpha(1)
35
                 .scaleX(1)
33
                 .scaleX(1)
36
                 .scaleY(1)
34
                 .scaleY(1)
37
-                .setListener(new AnimatorListenerAdapter() {
38
-                    @Override
39
-                    public void onAnimationEnd(Animator animation) {
40
-                        state = State.Idle;
41
-                    }
42
-                })
43
-                .setDuration(crossFadeAnimationDuration)
35
+                .setInterpolator(DECELERATE_INTERPOLATOR)
36
+                .setDuration(SHOW_DURATION)
44
                 .start();
37
                 .start();
45
     }
38
     }
46
 
39
 
50
     }
43
     }
51
 
44
 
52
     void hideCollapsed() {
45
     void hideCollapsed() {
53
-        animateFab(collapsedFab, 0, 90);
46
+        animateFab(collapsedFab, 0, ANGLE);
54
     }
47
     }
55
 
48
 
56
     void showExpended() {
49
     void showExpended() {
57
         animateFab(expendedFab, 1, 0);
50
         animateFab(expendedFab, 1, 0);
58
     }
51
     }
59
 
52
 
60
-    void showCollapsed() {
53
+    private void showCollapsed() {
61
         animateFab(collapsedFab, 1, 0);
54
         animateFab(collapsedFab, 1, 0);
62
         collapsedFab.bringToFront();
55
         collapsedFab.bringToFront();
63
     }
56
     }
64
 
57
 
65
-    void hideExpended() {
66
-        animateFab(expendedFab, 0, -90);
58
+    private void hideExpended() {
59
+        animateFab(expendedFab, 0, -ANGLE);
67
     }
60
     }
68
 
61
 
69
     private void animateFab(final FloatingActionButton fab, final int alpha, int rotation) {
62
     private void animateFab(final FloatingActionButton fab, final int alpha, int rotation) {
70
         fab.animate()
63
         fab.animate()
71
                 .alpha(alpha)
64
                 .alpha(alpha)
72
-                .setDuration(crossFadeAnimationDuration)
65
+                .setDuration(HIDE_DURATION)
73
                 .rotation(rotation)
66
                 .rotation(rotation)
74
                 .setListener(new AnimatorListenerAdapter() {
67
                 .setListener(new AnimatorListenerAdapter() {
75
                     @Override
68
                     @Override
91
         if (fab == null) {
84
         if (fab == null) {
92
             return;
85
             return;
93
         }
86
         }
94
-        state = State.Removing;
95
         fab.animate()
87
         fab.animate()
96
                 .alpha(0)
88
                 .alpha(0)
97
-                .scaleX(0)
98
-                .scaleY(0)
99
-                .setDuration(crossFadeAnimationDuration)
89
+                .scaleX(SCALE)
90
+                .scaleY(SCALE)
91
+                .setDuration(HIDE_DURATION)
100
                 .setListener(new AnimatorListenerAdapter() {
92
                 .setListener(new AnimatorListenerAdapter() {
101
                     @Override
93
                     @Override
102
                     public void onAnimationEnd(Animator animation) {
94
                     public void onAnimationEnd(Animator animation) {
114
                     .alpha(0)
106
                     .alpha(0)
115
                     .scaleX(0)
107
                     .scaleX(0)
116
                     .scaleY(0)
108
                     .scaleY(0)
117
-                    .setDuration(crossFadeAnimationDuration)
109
+                    .setDuration(HIDE_DURATION)
118
                     .start();
110
                     .start();
119
         }
111
         }
120
     }
112
     }

+ 1
- 3
android/app/src/main/java/com/reactnativenavigation/views/FloatingActionButtonCoordinator.java View File

30
     private FabParams params;
30
     private FabParams params;
31
     private FloatingActionButton collapsedFab;
31
     private FloatingActionButton collapsedFab;
32
     private FloatingActionButton expendedFab;
32
     private FloatingActionButton expendedFab;
33
-    private final int crossFadeAnimationDuration;
34
     private final int actionSize;
33
     private final int actionSize;
35
     private final int margin = (int) ViewUtils.convertDpToPixel(16);
34
     private final int margin = (int) ViewUtils.convertDpToPixel(16);
36
     private FloatingActionButtonAnimator fabAnimator;
35
     private FloatingActionButtonAnimator fabAnimator;
39
     FloatingActionButtonCoordinator(CoordinatorLayout parent) {
38
     FloatingActionButtonCoordinator(CoordinatorLayout parent) {
40
         this.parent = parent;
39
         this.parent = parent;
41
         actions = new ArrayList<>();
40
         actions = new ArrayList<>();
42
-        crossFadeAnimationDuration = parent.getResources().getInteger(android.R.integer.config_shortAnimTime);
43
         actionSize = (int) ViewUtils.convertDpToPixel(40);
41
         actionSize = (int) ViewUtils.convertDpToPixel(40);
44
     }
42
     }
45
 
43
 
62
         createCollapsedFab();
60
         createCollapsedFab();
63
         createExpendedFab();
61
         createExpendedFab();
64
         setStyle();
62
         setStyle();
65
-        fabAnimator = new FloatingActionButtonAnimator(collapsedFab, expendedFab, crossFadeAnimationDuration);
63
+        fabAnimator = new FloatingActionButtonAnimator(collapsedFab, expendedFab);
66
         fabAnimator.show();
64
         fabAnimator.show();
67
     }
65
     }
68
 
66
 

+ 3
- 4
android/app/src/main/res/anim/pop.xml View File

1
 <?xml version="1.0" encoding="utf-8"?>
1
 <?xml version="1.0" encoding="utf-8"?>
2
 <set xmlns:android="http://schemas.android.com/apk/res/android"
2
 <set xmlns:android="http://schemas.android.com/apk/res/android"
3
-     android:interpolator="@android:anim/accelerate_interpolator"
3
+     android:interpolator="@android:anim/decelerate_interpolator"
4
      android:shareInterpolator="true">
4
      android:shareInterpolator="true">
5
     <translate
5
     <translate
6
         android:duration="250"
6
         android:duration="250"
7
         android:fromYDelta="0%"
7
         android:fromYDelta="0%"
8
-        android:toYDelta="8%"/>
8
+        android:toYDelta="5%"/>
9
     <alpha
9
     <alpha
10
-        android:startOffset="100"
11
-        android:duration="150"
10
+        android:duration="100"
12
         android:fromAlpha="1"
11
         android:fromAlpha="1"
13
         android:toAlpha="0"/>
12
         android:toAlpha="0"/>
14
 </set>
13
 </set>