Browse Source

Update slow animations in playground

Added pop animation and tweaked values a bit.
Guy Carmeli 4 years ago
parent
commit
d50041a170

+ 2
- 1
lib/android/app/src/main/java/com/reactnativenavigation/parse/AnimationOptions.kt View File

14
 import com.reactnativenavigation.parse.parsers.BoolParser
14
 import com.reactnativenavigation.parse.parsers.BoolParser
15
 import com.reactnativenavigation.parse.parsers.TextParser
15
 import com.reactnativenavigation.parse.parsers.TextParser
16
 import com.reactnativenavigation.utils.CollectionUtils
16
 import com.reactnativenavigation.utils.CollectionUtils
17
+import com.reactnativenavigation.utils.CollectionUtils.forEach
17
 import org.json.JSONObject
18
 import org.json.JSONObject
18
 import java.util.*
19
 import java.util.*
19
 import kotlin.math.max
20
 import kotlin.math.max
68
         if (!hasAnimation()) return defaultAnimation
69
         if (!hasAnimation()) return defaultAnimation
69
         val animationSet = AnimatorSet()
70
         val animationSet = AnimatorSet()
70
         val animators: MutableList<Animator> = ArrayList()
71
         val animators: MutableList<Animator> = ArrayList()
71
-        CollectionUtils.forEach(valueOptions) { options: ValueAnimationOptions -> animators.add(options.getAnimation(view)) }
72
+        forEach(valueOptions) { options: ValueAnimationOptions -> animators.add(options.getAnimation(view)) }
72
         animationSet.playTogether(animators)
73
         animationSet.playTogether(animators)
73
         return animationSet
74
         return animationSet
74
     }
75
     }

+ 31
- 8
playground/src/commons/Options.js View File

1
 const { Navigation } = require('react-native-navigation');
1
 const { Navigation } = require('react-native-navigation');
2
 const Colors = require('./Colors');
2
 const Colors = require('./Colors');
3
 const { Dimensions } = require('react-native');
3
 const { Dimensions } = require('react-native');
4
-const height = Math.round(Dimensions.get('window').height) * 0.7;
4
+const height = Math.round(Dimensions.get('window').height);
5
 const width = Math.round(Dimensions.get('window').width);
5
 const width = Math.round(Dimensions.get('window').width);
6
+console.log('guyca', `height: ${height} width: ${width}`);
6
 const {
7
 const {
7
   useSlowOpenScreenAnimations,
8
   useSlowOpenScreenAnimations,
8
-  useSlideAnimation: useSlideAnimation
9
+  useSlideAnimation
9
 } = require('../flags');
10
 } = require('../flags');
10
-const SHOW_DURATION = 230 * 3;
11
+const SHOW_DURATION = 310 * 2.5;
11
 
12
 
12
 const setDefaultOptions = () => Navigation.setDefaultOptions({
13
 const setDefaultOptions = () => Navigation.setDefaultOptions({
13
   layout: {
14
   layout: {
67
 const slowOpenScreenAnimations = {
68
 const slowOpenScreenAnimations = {
68
   showModal: {
69
   showModal: {
69
     waitForRender: true,
70
     waitForRender: true,
70
-    y: {
71
+    translationY: {
71
       from: height,
72
       from: height,
72
       to: 0,
73
       to: 0,
73
       duration: SHOW_DURATION,
74
       duration: SHOW_DURATION,
74
-      interpolation: 'accelerateDecelerate'
75
+      interpolation: 'decelerate'
75
     },
76
     },
76
     alpha: {
77
     alpha: {
77
-      from: 0.7,
78
+      from: 0.65,
78
       to: 1,
79
       to: 1,
79
-      duration: SHOW_DURATION,
80
+      duration: SHOW_DURATION * 0.5,
80
       interpolation: 'accelerate'
81
       interpolation: 'accelerate'
81
     }
82
     }
82
   },
83
   },
84
+  dismissModal: {
85
+    translationY: {
86
+      from: 0,
87
+      to: height,
88
+      duration: SHOW_DURATION * 0.8,
89
+    },
90
+    
91
+  },
83
   push: {
92
   push: {
84
     waitForRender: true,
93
     waitForRender: true,
85
     content: {
94
     content: {
89
         duration: SHOW_DURATION,
98
         duration: SHOW_DURATION,
90
       },
99
       },
91
       translationY: {
100
       translationY: {
92
-        from: height,
101
+        from: height * 0.3,
102
+        to: 0,
103
+        duration: SHOW_DURATION,
104
+      }
105
+    }
106
+  },
107
+  pop: {
108
+    content: {
109
+      alpha: {
110
+        from: 1,
93
         to: 0,
111
         to: 0,
94
         duration: SHOW_DURATION,
112
         duration: SHOW_DURATION,
113
+      },
114
+      translationY: {
115
+        from: 0,
116
+        to: height * 0.7,
117
+        duration: SHOW_DURATION,
95
       }
118
       }
96
     }
119
     }
97
   }
120
   }