Browse Source

Shared element2 (#1012)

FadeIn ContentView and TopBar when pushing shared element screen

If the screen is pushed with `animated: false` then only TopBar is
animated in. This is a compromise until we expose means to control the
transition of each element on the screen.
Guy Carmeli 7 years ago
parent
commit
b8b0e0bad6

+ 5
- 0
android/app/src/main/java/com/reactnativenavigation/screens/FragmentScreen.java View File

31
         super(activity, screenParams, leftButtonOnClickListener);
31
         super(activity, screenParams, leftButtonOnClickListener);
32
     }
32
     }
33
 
33
 
34
+    @Override
35
+    public ContentView getContentView() {
36
+        return contentView;
37
+    }
38
+
34
     @Override
39
     @Override
35
     protected void createContent() {
40
     protected void createContent() {
36
         content = new FrameLayout(getContext());
41
         content = new FrameLayout(getContext());

+ 7
- 0
android/app/src/main/java/com/reactnativenavigation/screens/Screen.java View File

25
 import com.reactnativenavigation.params.TitleBarButtonParams;
25
 import com.reactnativenavigation.params.TitleBarButtonParams;
26
 import com.reactnativenavigation.params.TitleBarLeftButtonParams;
26
 import com.reactnativenavigation.params.TitleBarLeftButtonParams;
27
 import com.reactnativenavigation.utils.ViewUtils;
27
 import com.reactnativenavigation.utils.ViewUtils;
28
+import com.reactnativenavigation.views.ContentView;
28
 import com.reactnativenavigation.views.LeftButtonOnClickListener;
29
 import com.reactnativenavigation.views.LeftButtonOnClickListener;
29
 import com.reactnativenavigation.views.TopBar;
30
 import com.reactnativenavigation.views.TopBar;
30
 import com.reactnativenavigation.views.sharedElementTransition.SharedElementTransition;
31
 import com.reactnativenavigation.views.sharedElementTransition.SharedElementTransition;
95
 
96
 
96
     protected abstract void createContent();
97
     protected abstract void createContent();
97
 
98
 
99
+    public abstract ContentView getContentView();
100
+
101
+    public TopBar getTopBar() {
102
+        return topBar;
103
+    }
104
+
98
     private void createTitleBar() {
105
     private void createTitleBar() {
99
         addTitleBarButtons();
106
         addTitleBarButtons();
100
         topBar.setTitle(screenParams.title);
107
         topBar.setTitle(screenParams.title);

+ 35
- 2
android/app/src/main/java/com/reactnativenavigation/screens/ScreenAnimator.java View File

13
 import com.reactnativenavigation.utils.ViewUtils;
13
 import com.reactnativenavigation.utils.ViewUtils;
14
 import com.reactnativenavigation.views.sharedElementTransition.SharedElementsAnimator;
14
 import com.reactnativenavigation.views.sharedElementTransition.SharedElementsAnimator;
15
 
15
 
16
+import java.util.ArrayList;
17
+import java.util.List;
18
+
16
 import javax.annotation.Nullable;
19
 import javax.annotation.Nullable;
17
 
20
 
18
 class ScreenAnimator {
21
 class ScreenAnimator {
99
     }
102
     }
100
 
103
 
101
     void showWithSharedElementsTransitions(Runnable onAnimationEnd) {
104
     void showWithSharedElementsTransitions(Runnable onAnimationEnd) {
105
+        hideContentViewAndTopBar();
102
         screen.setVisibility(View.VISIBLE);
106
         screen.setVisibility(View.VISIBLE);
103
-        new SharedElementsAnimator(this.screen.sharedElements).show(onAnimationEnd);
107
+        new SharedElementsAnimator(this.screen.sharedElements).show(new Runnable() {
108
+            @Override
109
+            public void run() {
110
+                animateContentViewAndTopBar(1, 280);
111
+            }
112
+        }, onAnimationEnd);
113
+    }
114
+
115
+    private void hideContentViewAndTopBar() {
116
+        if (screen.screenParams.animateScreenTransitions) {
117
+            screen.getContentView().setAlpha(0);
118
+        }
119
+        screen.getTopBar().setAlpha(0);
104
     }
120
     }
105
 
121
 
106
     void hideWithSharedElementsTransition(Runnable onAnimationEnd) {
122
     void hideWithSharedElementsTransition(Runnable onAnimationEnd) {
107
-        new SharedElementsAnimator(screen.sharedElements).hide(onAnimationEnd);
123
+        new SharedElementsAnimator(screen.sharedElements).hide(new Runnable() {
124
+            @Override
125
+            public void run() {
126
+                animateContentViewAndTopBar(0, 200);
127
+            }
128
+        }, onAnimationEnd);
129
+    }
130
+
131
+    private void animateContentViewAndTopBar(int alpha, int duration) {
132
+        List<Animator> animators = new ArrayList<>();
133
+        if (screen.screenParams.animateScreenTransitions) {
134
+            animators.add(ObjectAnimator.ofFloat(screen.getContentView(), View.ALPHA, alpha));
135
+        }
136
+        animators.add(ObjectAnimator.ofFloat(screen.getTopBar(), View.ALPHA, alpha));
137
+        AnimatorSet set = new AnimatorSet();
138
+        set.playTogether(animators);
139
+        set.setDuration(duration);
140
+        set.start();
108
     }
141
     }
109
 }
142
 }

+ 0
- 1
android/app/src/main/java/com/reactnativenavigation/screens/ScreenStack.java View File

103
             if (nextScreen.screenParams.sharedElementsTransitions.isEmpty()) {
103
             if (nextScreen.screenParams.sharedElementsTransitions.isEmpty()) {
104
                 pushScreenToVisibleStack(layoutParams, nextScreen, previousScreen);
104
                 pushScreenToVisibleStack(layoutParams, nextScreen, previousScreen);
105
             } else {
105
             } else {
106
-//                pushScreenToVisibleStack(layoutParams, nextScreen, previousScreen);
107
                 pushScreenToVisibleStackWithSharedElementTransition(layoutParams, nextScreen, previousScreen);
106
                 pushScreenToVisibleStackWithSharedElementTransition(layoutParams, nextScreen, previousScreen);
108
             }
107
             }
109
         } else {
108
         } else {

+ 5
- 0
android/app/src/main/java/com/reactnativenavigation/screens/SingleScreen.java View File

22
         addView(contentView, 0, createLayoutParams());
22
         addView(contentView, 0, createLayoutParams());
23
     }
23
     }
24
 
24
 
25
+    @Override
26
+    public ContentView getContentView() {
27
+        return contentView;
28
+    }
29
+
25
     protected LayoutParams createLayoutParams() {
30
     protected LayoutParams createLayoutParams() {
26
         LayoutParams params = new LayoutParams(MATCH_PARENT, MATCH_PARENT);
31
         LayoutParams params = new LayoutParams(MATCH_PARENT, MATCH_PARENT);
27
         if (screenParams.styleParams.drawScreenBelowTopBar) {
32
         if (screenParams.styleParams.drawScreenBelowTopBar) {

+ 5
- 0
android/app/src/main/java/com/reactnativenavigation/screens/ViewPagerScreen.java View File

39
         getScreenParams().fabParams = fabParams;
39
         getScreenParams().fabParams = fabParams;
40
     }
40
     }
41
 
41
 
42
+    @Override
43
+    public ContentView getContentView() {
44
+        return contentViews.get(viewPager.getCurrentItem());
45
+    }
46
+
42
     @Override
47
     @Override
43
     protected void createContent() {
48
     protected void createContent() {
44
         TopTabs topTabs = topBar.initTabs();
49
         TopTabs topTabs = topBar.initTabs();

+ 14
- 4
android/app/src/main/java/com/reactnativenavigation/views/sharedElementTransition/SharedElementsAnimator.java View File

14
         this.sharedElements = sharedElements;
14
         this.sharedElements = sharedElements;
15
     }
15
     }
16
 
16
 
17
-    public void show(final Runnable onAnimationEnd) {
17
+    public void show(final Runnable onAnimationStart, final Runnable onAnimationEnd) {
18
         sharedElements.hideToElements();
18
         sharedElements.hideToElements();
19
         sharedElements.performWhenChildViewsAreDrawn(new Runnable()  {
19
         sharedElements.performWhenChildViewsAreDrawn(new Runnable()  {
20
             @Override
20
             @Override
21
             public void run() {
21
             public void run() {
22
-                final AnimatorSet animatorSet = createAnimatorSet();
22
+                final AnimatorSet animatorSet = createShowAnimators();
23
                 sharedElements.attachChildViewsToScreen();
23
                 sharedElements.attachChildViewsToScreen();
24
                 sharedElements.showToElements(new Runnable() {
24
                 sharedElements.showToElements(new Runnable() {
25
                     @Override
25
                     @Override
30
                 });
30
                 });
31
             }
31
             }
32
 
32
 
33
-            private AnimatorSet createAnimatorSet() {
33
+            private AnimatorSet createShowAnimators() {
34
                 final AnimatorSet animatorSet = new AnimatorSet();
34
                 final AnimatorSet animatorSet = new AnimatorSet();
35
                 animatorSet.playTogether(createTransitionAnimators());
35
                 animatorSet.playTogether(createTransitionAnimators());
36
                 animatorSet.addListener(new AnimatorListenerAdapter() {
36
                 animatorSet.addListener(new AnimatorListenerAdapter() {
37
+                    @Override
38
+                    public void onAnimationStart(Animator animation) {
39
+                        onAnimationStart.run();
40
+                    }
41
+
37
                     @Override
42
                     @Override
38
                     public void onAnimationEnd(Animator animation) {
43
                     public void onAnimationEnd(Animator animation) {
39
                         sharedElements.onShowAnimationEnd();
44
                         sharedElements.onShowAnimationEnd();
60
         });
65
         });
61
     }
66
     }
62
 
67
 
63
-    public void hide(final Runnable onAnimationEnd) {
68
+    public void hide(final Runnable onAnimationStart, final Runnable onAnimationEnd) {
64
         AnimatorSet animatorSet = new AnimatorSet();
69
         AnimatorSet animatorSet = new AnimatorSet();
65
         animatorSet.playTogether(createHideTransitionAnimators());
70
         animatorSet.playTogether(createHideTransitionAnimators());
66
         animatorSet.addListener(new AnimatorListenerAdapter() {
71
         animatorSet.addListener(new AnimatorListenerAdapter() {
72
+            @Override
73
+            public void onAnimationStart(Animator animation) {
74
+                onAnimationStart.run();
75
+            }
76
+
67
             @Override
77
             @Override
68
             public void onAnimationEnd(Animator animation) {
78
             public void onAnimationEnd(Animator animation) {
69
                 sharedElements.showToElements();
79
                 sharedElements.showToElements();