Browse Source

Some work on animation config in the playground app

Split animation config in playground to custom animations and slow animations
Guy Carmeli 4 years ago
parent
commit
8f2f353d62
2 changed files with 13 additions and 9 deletions
  1. 12
    9
      playground/src/commons/Options.js
  2. 1
    0
      playground/src/flags.js

+ 12
- 9
playground/src/commons/Options.js View File

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
 console.log('guyca', `height: ${height} width: ${width}`);
7
 const {
7
 const {
8
+  useCustomAnimations,
8
   useSlowOpenScreenAnimations,
9
   useSlowOpenScreenAnimations,
9
   useSlideAnimation
10
   useSlideAnimation
10
 } = require('../flags');
11
 } = require('../flags');
11
-const SHOW_DURATION = 310 * 2.5;
12
+const SHOW_DURATION = 250 * (useSlowOpenScreenAnimations ? 2.5 : 1);
12
 
13
 
13
 const setDefaultOptions = () => Navigation.setDefaultOptions({
14
 const setDefaultOptions = () => Navigation.setDefaultOptions({
14
   layout: {
15
   layout: {
26
   animations: {
27
   animations: {
27
     ...useSlideAnimation ?
28
     ...useSlideAnimation ?
28
         slideAnimations :
29
         slideAnimations :
29
-        useSlowOpenScreenAnimations ?
30
-          slowOpenScreenAnimations :
30
+        useCustomAnimations ?
31
+          customAnimations :
31
           {}
32
           {}
32
   },
33
   },
33
   modalPresentationStyle: 'fullScreen'
34
   modalPresentationStyle: 'fullScreen'
65
   }
66
   }
66
 }
67
 }
67
 
68
 
68
-const slowOpenScreenAnimations = {
69
+const customAnimations = {
69
   showModal: {
70
   showModal: {
70
     waitForRender: true,
71
     waitForRender: true,
71
     translationY: {
72
     translationY: {
77
     alpha: {
78
     alpha: {
78
       from: 0.65,
79
       from: 0.65,
79
       to: 1,
80
       to: 1,
80
-      duration: SHOW_DURATION * 0.5,
81
+      duration: SHOW_DURATION * 0.7,
81
       interpolation: 'accelerate'
82
       interpolation: 'accelerate'
82
     }
83
     }
83
   },
84
   },
85
     translationY: {
86
     translationY: {
86
       from: 0,
87
       from: 0,
87
       to: height,
88
       to: height,
88
-      duration: SHOW_DURATION * 0.8,
89
+      duration: SHOW_DURATION * 0.9,
89
     },
90
     },
90
     
91
     
91
   },
92
   },
93
     waitForRender: true,
94
     waitForRender: true,
94
     content: {
95
     content: {
95
       alpha: {
96
       alpha: {
96
-        from: 0.6,
97
+        from: 0.65,
97
         to: 1,
98
         to: 1,
98
-        duration: SHOW_DURATION,
99
+        duration: SHOW_DURATION * 0.7,
100
+        interpolation: 'accelerate'
99
       },
101
       },
100
       translationY: {
102
       translationY: {
101
         from: height * 0.3,
103
         from: height * 0.3,
102
         to: 0,
104
         to: 0,
103
         duration: SHOW_DURATION,
105
         duration: SHOW_DURATION,
106
+        interpolation: 'decelerate'
104
       }
107
       }
105
     }
108
     }
106
   },
109
   },
114
       translationY: {
117
       translationY: {
115
         from: 0,
118
         from: 0,
116
         to: height * 0.7,
119
         to: height * 0.7,
117
-        duration: SHOW_DURATION,
120
+        duration: SHOW_DURATION * 0.9,
118
       }
121
       }
119
     }
122
     }
120
   }
123
   }

+ 1
- 0
playground/src/flags.js View File

1
 module.exports = {
1
 module.exports = {
2
   showTextInputToTestKeyboardInteraction: false,
2
   showTextInputToTestKeyboardInteraction: false,
3
+  useCustomAnimations: false,
3
   useSlowOpenScreenAnimations: false,
4
   useSlowOpenScreenAnimations: false,
4
   useSlideAnimation: false
5
   useSlideAnimation: false
5
 };
6
 };