make Easing an object, not a class

Summary:
`Easing` only has static properties and is never constructed or subclassed, so there doesn't seem to be any reason for it to be a class instead of an object.

as a class, Flow errors about `method-unbinding` on every single use of it.

Changelog: [Internal]

Reviewed By: motiz88

Differential Revision: D33774944

fbshipit-source-id: c0bd2e3d7a78e538f95b88b2b1b12d301c8f590c

Libraries/Animated/Easing.js

@@ -57,100 +57,100 @@ let ease;
  * - [`inOut`](docs/easing.html#inout) makes any easing function symmetrical
  * - [`out`](docs/easing.html#out) runs an easing function backwards
  */
-class Easing {
+const Easing = {
   /**
    * A stepping function, returns 1 for any positive value of `n`.
    */
-  static step0(n: number): number {
+  step0(n: number): number {
     return n > 0 ? 1 : 0;
-  }
+  },
 
   /**
    * A stepping function, returns 1 if `n` is greater than or equal to 1.
    */
-  static step1(n: number): number {
+  step1(n: number): number {
     return n >= 1 ? 1 : 0;
-  }
+  },
 
   /**
    * A linear function, `f(t) = t`. Position correlates to elapsed time one to
    * one.
    *
    * http://cubic-bezier.com/#0,0,1,1
    */
-  static linear(t: number): number {
+  linear(t: number): number {
     return t;
-  }
+  },
 
   /**
    * A simple inertial interaction, similar to an object slowly accelerating to
    * speed.
    *
    * http://cubic-bezier.com/#.42,0,1,1
    */
-  static ease(t: number): number {
+  ease(t: number): number {
     if (!ease) {
       ease = Easing.bezier(0.42, 0, 1, 1);
     }
     return ease(t);
-  }
+  },
 
   /**
    * A quadratic function, `f(t) = t * t`. Position equals the square of elapsed
    * time.
    *
    * http://easings.net/#easeInQuad
    */
-  static quad(t: number): number {
+  quad(t: number): number {
     return t * t;
-  }
+  },
 
   /**
    * A cubic function, `f(t) = t * t * t`. Position equals the cube of elapsed
    * time.
    *
    * http://easings.net/#easeInCubic
    */
-  static cubic(t: number): number {
+  cubic(t: number): number {
     return t * t * t;
-  }
+  },
 
   /**
    * A power function. Position is equal to the Nth power of elapsed time.
    *
    * n = 4: http://easings.net/#easeInQuart
    * n = 5: http://easings.net/#easeInQuint
    */
-  static poly(n: number): (t: number) => number {
+  poly(n: number): (t: number) => number {
     return (t: number) => Math.pow(t, n);
-  }
+  },
 
   /**
    * A sinusoidal function.
    *
    * http://easings.net/#easeInSine
    */
-  static sin(t: number): number {
+  sin(t: number): number {
     return 1 - Math.cos((t * Math.PI) / 2);
-  }
+  },
 
   /**
    * A circular function.
    *
    * http://easings.net/#easeInCirc
    */
-  static circle(t: number): number {
+  circle(t: number): number {
     return 1 - Math.sqrt(1 - t * t);
-  }
+  },
 
   /**
    * An exponential function.
    *
    * http://easings.net/#easeInExpo
    */
-  static exp(t: number): number {
+  exp(t: number): number {
     return Math.pow(2, 10 * (t - 1));
-  }
+  },
 
   /**
    * A simple elastic interaction, similar to a spring oscillating back and
@@ -162,27 +162,27 @@ class Easing {
    *
    * http://easings.net/#easeInElastic
    */
-  static elastic(bounciness: number = 1): (t: number) => number {
+  elastic(bounciness: number = 1): (t: number) => number {
     const p = bounciness * Math.PI;
     return t => 1 - Math.pow(Math.cos((t * Math.PI) / 2), 3) * Math.cos(t * p);
-  }
+  },
 
   /**
    * Use with `Animated.parallel()` to create a simple effect where the object
    * animates back slightly as the animation starts.
    *
    * https://easings.net/#easeInBack
    */
-  static back(s: number = 1.70158): (t: number) => number {
+  back(s: number = 1.70158): (t: number) => number {
     return t => t * t * ((s + 1) * t - s);
-  }
+  },
 
   /**
    * Provides a simple bouncing effect.
    *
    * http://easings.net/#easeInBounce
    */
-  static bounce(t: number): number {
+  bounce(t: number): number {
     if (t < 1 / 2.75) {
       return 7.5625 * t * t;
     }
@@ -199,7 +199,7 @@ class Easing {
 
     const t2 = t - 2.625 / 2.75;
     return 7.5625 * t2 * t2 + 0.984375;
-  }
+  },
 
   /**
    * Provides a cubic bezier curve, equivalent to CSS Transitions'
@@ -208,43 +208,43 @@ class Easing {
    * A useful tool to visualize cubic bezier curves can be found at
    * http://cubic-bezier.com/
    */
-  static bezier(
+  bezier(
     x1: number,
     y1: number,
     x2: number,
     y2: number,
   ): (t: number) => number {
     const _bezier = require('./bezier');
     return _bezier(x1, y1, x2, y2);
-  }
+  },
 
   /**
    * Runs an easing function forwards.
    */
-  static in(easing: (t: number) => number): (t: number) => number {
+  in(easing: (t: number) => number): (t: number) => number {
     return easing;
-  }
+  },
 
   /**
    * Runs an easing function backwards.
    */
-  static out(easing: (t: number) => number): (t: number) => number {
+  out(easing: (t: number) => number): (t: number) => number {
     return t => 1 - easing(1 - t);
-  }
+  },
 
   /**
    * Makes any easing function symmetrical. The easing function will run
    * forwards for half of the duration, then backwards for the rest of the
    * duration.
    */
-  static inOut(easing: (t: number) => number): (t: number) => number {
+  inOut(easing: (t: number) => number): (t: number) => number {
     return t => {
       if (t < 0.5) {
         return easing(t * 2) / 2;
       }
       return 1 - easing((1 - t) * 2) / 2;
     };
-  }
-}
+  },
+};
 
 module.exports = Easing;

Libraries/Animated/animations/TimingAnimation.js

@@ -49,7 +49,6 @@ let _easeInOut;
 function easeInOut() {
   if (!_easeInOut) {
     const Easing = require('../Easing');
-    // $FlowFixMe[method-unbinding]
     _easeInOut = Easing.inOut(Easing.ease);
   }
   return _easeInOut;

Libraries/Components/Touchable/TouchableOpacity.js

@@ -188,7 +188,6 @@ class TouchableOpacity extends React.Component<Props, State> {
     Animated.timing(this.state.anim, {
       toValue,
       duration,
-      // $FlowFixMe[method-unbinding]
       easing: Easing.inOut(Easing.quad),
       useNativeDriver: true,
     }).start();

Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.js

@@ -36,7 +36,6 @@ function LogBoxInspectorSourceMapStatus(props: Props): React.Node {
         const animation = Animated.loop(
           Animated.timing(animated, {
             duration: 2000,
-            // $FlowFixMe[method-unbinding]
             easing: Easing.linear,
             toValue: 1,
             useNativeDriver: true,

packages/rn-tester/js/examples/Animated/ComposeAnimationsWithEasingExample.js

@@ -40,7 +40,6 @@ function CompositeAnimationsWithEasingExample(): React.Node {
             // One after the other
             Animated.timing(anims[0], {
               toValue: 200,
-              // $FlowFixMe[method-unbinding]
               easing: Easing.linear,
               useNativeDriver: false,
             }),
@@ -75,14 +74,12 @@ function CompositeAnimationsWithEasingExample(): React.Node {
             Animated.delay(400),
             Animated.parallel(
               [
-                // $FlowFixMe[method-unbinding]
                 Easing.inOut(Easing.quad), // Symmetric
                 Easing.back(1.5), // Goes backwards first
                 Easing.ease, // Default bezier
               ].map((easing, ii) =>
                 Animated.timing(anims[ii], {
                   toValue: 320,
-                  // $FlowFixMe[method-unbinding]
                   easing,
                   duration: 3000,
                   useNativeDriver: false,
@@ -97,7 +94,6 @@ function CompositeAnimationsWithEasingExample(): React.Node {
                   toValue: 0,
 
                   // Like a ball
-                  // $FlowFixMe[method-unbinding]
                   easing: Easing.bounce,
 
                   duration: 2000,

packages/rn-tester/js/examples/Animated/EasingExample.js

@@ -63,12 +63,10 @@ const easingSections = [
     data: [
       {
         title: 'In + Bounce',
-        // $FlowFixMe[method-unbinding]
         easing: Easing.in(Easing.bounce),
       },
       {
         title: 'Out + Exp',
-        // $FlowFixMe[method-unbinding]
         easing: Easing.out(Easing.exp),
       },
       {

packages/rn-tester/js/examples/ScrollView/ScrollViewAnimatedExample.js

@@ -24,7 +24,6 @@ class ScrollViewAnimatedExample extends Component<{...}> {
     Animated.timing(this._scrollViewPos, {
       toValue: 100,
       duration: 10000,
-      // $FlowFixMe[method-unbinding]
       easing: Easing.linear,
       useNativeDriver: true,
     }).start();