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,6 +14,7 @@ import com.reactnativenavigation.parse.params.Text
14 14
 import com.reactnativenavigation.parse.parsers.BoolParser
15 15
 import com.reactnativenavigation.parse.parsers.TextParser
16 16
 import com.reactnativenavigation.utils.CollectionUtils
17
+import com.reactnativenavigation.utils.CollectionUtils.forEach
17 18
 import org.json.JSONObject
18 19
 import java.util.*
19 20
 import kotlin.math.max
@@ -68,7 +69,7 @@ open class AnimationOptions(json: JSONObject?) {
68 69
         if (!hasAnimation()) return defaultAnimation
69 70
         val animationSet = AnimatorSet()
70 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 73
         animationSet.playTogether(animators)
73 74
         return animationSet
74 75
     }

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

@@ -1,13 +1,14 @@
1 1
 const { Navigation } = require('react-native-navigation');
2 2
 const Colors = require('./Colors');
3 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 5
 const width = Math.round(Dimensions.get('window').width);
6
+console.log('guyca', `height: ${height} width: ${width}`);
6 7
 const {
7 8
   useSlowOpenScreenAnimations,
8
-  useSlideAnimation: useSlideAnimation
9
+  useSlideAnimation
9 10
 } = require('../flags');
10
-const SHOW_DURATION = 230 * 3;
11
+const SHOW_DURATION = 310 * 2.5;
11 12
 
12 13
 const setDefaultOptions = () => Navigation.setDefaultOptions({
13 14
   layout: {
@@ -67,19 +68,27 @@ const slideAnimations = {
67 68
 const slowOpenScreenAnimations = {
68 69
   showModal: {
69 70
     waitForRender: true,
70
-    y: {
71
+    translationY: {
71 72
       from: height,
72 73
       to: 0,
73 74
       duration: SHOW_DURATION,
74
-      interpolation: 'accelerateDecelerate'
75
+      interpolation: 'decelerate'
75 76
     },
76 77
     alpha: {
77
-      from: 0.7,
78
+      from: 0.65,
78 79
       to: 1,
79
-      duration: SHOW_DURATION,
80
+      duration: SHOW_DURATION * 0.5,
80 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 92
   push: {
84 93
     waitForRender: true,
85 94
     content: {
@@ -89,9 +98,23 @@ const slowOpenScreenAnimations = {
89 98
         duration: SHOW_DURATION,
90 99
       },
91 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 111
         to: 0,
94 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
   }