Some work on animation config in the playground app

Split animation config in playground to custom animations and slow animations

playground/src/commons/Options.js

@@ -5,10 +5,11 @@ const height = Math.round(Dimensions.get('window').height);
 const width = Math.round(Dimensions.get('window').width);
 console.log('guyca', `height: ${height} width: ${width}`);
 const {
+  useCustomAnimations,
   useSlowOpenScreenAnimations,
   useSlideAnimation
 } = require('../flags');
-const SHOW_DURATION = 310 * 2.5;
+const SHOW_DURATION = 250 * (useSlowOpenScreenAnimations ? 2.5 : 1);
 
 const setDefaultOptions = () => Navigation.setDefaultOptions({
   layout: {
@@ -26,8 +27,8 @@ const setDefaultOptions = () => Navigation.setDefaultOptions({
   animations: {
     ...useSlideAnimation ?
         slideAnimations :
-        useSlowOpenScreenAnimations ?
-          slowOpenScreenAnimations :
+        useCustomAnimations ?
+          customAnimations :
           {}
   },
   modalPresentationStyle: 'fullScreen'
@@ -65,7 +66,7 @@ const slideAnimations = {
   }
 }
 
-const slowOpenScreenAnimations = {
+const customAnimations = {
   showModal: {
     waitForRender: true,
     translationY: {
@@ -77,7 +78,7 @@ const slowOpenScreenAnimations = {
     alpha: {
       from: 0.65,
       to: 1,
-      duration: SHOW_DURATION * 0.5,
+      duration: SHOW_DURATION * 0.7,
       interpolation: 'accelerate'
     }
   },
@@ -85,7 +86,7 @@ const slowOpenScreenAnimations = {
     translationY: {
       from: 0,
       to: height,
-      duration: SHOW_DURATION * 0.8,
+      duration: SHOW_DURATION * 0.9,
     },
     
   },
@@ -93,14 +94,16 @@ const slowOpenScreenAnimations = {
     waitForRender: true,
     content: {
       alpha: {
-        from: 0.6,
+        from: 0.65,
         to: 1,
-        duration: SHOW_DURATION,
+        duration: SHOW_DURATION * 0.7,
+        interpolation: 'accelerate'
       },
       translationY: {
         from: height * 0.3,
         to: 0,
         duration: SHOW_DURATION,
+        interpolation: 'decelerate'
       }
     }
   },
@@ -114,7 +117,7 @@ const slowOpenScreenAnimations = {
       translationY: {
         from: 0,
         to: height * 0.7,
-        duration: SHOW_DURATION,
+        duration: SHOW_DURATION * 0.9,
       }
     }
   }

playground/src/flags.js

@@ -1,5 +1,6 @@
 module.exports = {
   showTextInputToTestKeyboardInteraction: false,
+  useCustomAnimations: false,
   useSlowOpenScreenAnimations: false,
   useSlideAnimation: false
 };