RefactorComponents to use connectAnimation

shoutem · Oct 31, 2016 · b2719d7 · b2719d7
1 parent 78ea551
commit b2719d7
Show file tree

Hide file tree

Showing 7 changed files with 158 additions and 79 deletions.
diff --git a/FadeIn.js b/FadeIn.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Animated, View } from 'react-native';
+import { View } from './View';
 import { DriverShape } from './DriverShape';
 /*
  * FadeIn Component adds fade in effect to its children components.
@@ -47,17 +47,14 @@ export class FadeIn extends Component {
     const { driver, children, inputRange = [0, 1], style } = this.props;
 
     return (
-      <Animated.View
-        style={[style, {
-          opacity: driver.value.interpolate({
-            inputRange,
-            outputRange: [0, 1],
-            extrapolate: 'clamp',
-          }),
-        }]}
+      <View
+        driver={driver}
+        animationName="fadeIn"
+        animationOptions={{ inputRange }}
+        style={style}
       >
         {children}
-      </Animated.View>
+      </View>
     );
   }
 }
diff --git a/FadeOut.js b/FadeOut.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Animated, View } from 'react-native';
+import { View } from './View';
 import { DriverShape } from './DriverShape';
 /*
  * FadeOut Component adds fade out effect to its children components.
@@ -48,17 +48,14 @@ export class FadeOut extends Component {
     const { driver, children, inputRange = [0, 1], style } = this.props;
 
     return (
-      <Animated.View
-        style={[style, {
-          opacity: driver.value.interpolate({
-            inputRange,
-            outputRange: [1, 0],
-            extrapolate: 'clamp',
-          }),
-        }]}
+      <View
+        driver={driver}
+        animationName="fadeOut"
+        animationOptions={{ inputRange }}
+        style={style}
       >
         {children}
-      </Animated.View>
+      </View>
     );
   }
 }
diff --git a/HeroHeader.js b/HeroHeader.js
@@ -1,7 +1,5 @@
 import React, { Component } from 'react';
-import { View } from 'react-native';
-import { ZoomOut } from './ZoomOut';
-import { Parallax } from './Parallax';
+import { View } from './View';
 import { DriverShape } from './DriverShape';
 /*
  * HeroHeader adds complex effect to its children components.
@@ -36,38 +34,12 @@ export class HeroHeader extends Component {
      */
     children: React.PropTypes.node,
   }
-  constructor(props) {
-    super(props);
-    this.onLayout = this.onLayout.bind(this);
-    this.state = {
-      height: 240,
-    };
-  }
-  onLayout(event) {
-    const { height } = event.nativeEvent.layout;
-    this.setState({ height });
-  }
-
   render() {
     const { driver, children } = this.props;
 
     return (
-      <View onLayout={this.onLayout}>
-        <ZoomOut
-          driver={driver}
-          inputRange={[-(0.9 * this.state.height), 0]}
-          maxFactor={3}
-        >
-          <Parallax
-            driver={driver}
-            scrollSpeed={0.5}
-            insideScroll
-            header
-            extrapolation={{ extrapolateLeft: 'clamp' }}
-          >
-            {children}
-          </Parallax>
-        </ZoomOut>
+      <View animationName="hero" driver={driver}>
+        {children}
       </View>
     );
   }

diff --git a/View.js b/View.js
@@ -0,0 +1,5 @@
+import { View as RNView, } from 'react-native';
+import { connectAnimation } from './connectAnimation';
+import { animations } from './animations';
+
+export const View = connectAnimation(RNView, animations);
diff --git a/ZoomIn.js b/ZoomIn.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Animated, View } from 'react-native';
+import { View } from './View';
 import { DriverShape } from './DriverShape';
 /*
  * ZoomIn Component adds zoom in effect to its children components.
@@ -53,21 +53,14 @@ export class ZoomIn extends Component {
     const { driver, children, inputRange = [0, 1], maxFactor = 1.5, style } = this.props;
 
     return (
-      <Animated.View
-        style={[style, {
-          transform: [
-            {
-              scale: driver.value.interpolate({
-                inputRange,
-                outputRange: [1, maxFactor],
-                extrapolate: 'clamp',
-              }),
-            },
-          ],
-        }]}
+      <View
+        driver={driver}
+        animationName="zoomIn"
+        animationOptions={{ inputRange, maxFactor }}
+        style={style}
       >
         {children}
-      </Animated.View>
+      </View>
     );
   }
 }
diff --git a/ZoomOut.js b/ZoomOut.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Animated, View } from 'react-native';
+import { View } from './View';
 import { DriverShape } from './DriverShape';
 /*
  * ZoomOut Component adds zoom out effect to its children components.
@@ -53,21 +53,14 @@ export class ZoomOut extends Component {
     const { driver, children, inputRange = [0, 1], maxFactor = 1.5, style } = this.props;
 
     return (
-      <Animated.View
-        style={[style, {
-          transform: [
-            {
-              scale: driver.value.interpolate({
-                inputRange,
-                outputRange: [maxFactor, 1],
-                extrapolateRight: 'clamp',
-              }),
-            },
-          ],
-        }]}
+      <View
+        driver={driver}
+        animationName="zoomIn"
+        animationOptions={{ inputRange, maxFactor }}
+        style={style}
       >
         {children}
-      </Animated.View>
+      </View>
     );
   }
 }
diff --git a/animations.js b/animations.js
@@ -0,0 +1,122 @@
+export const animations = {
+  heroAnimation(driver, { layout, animationOptions }) {
+    return {
+      transform: [
+        {
+          scale: driver.value.interpolate({
+            inputRange: [-0.9 * layout.height, 0],
+            outputRange: [3, 1],
+            extrapolateRight: 'clamp',
+          }),
+        }, {
+          translateY: driver.value.interpolate({
+            inputRange: [-100, 100],
+            outputRange: [-50, 50],
+            extrapolateLeft: 'clamp',
+          }),
+        },
+      ],
+    };
+  },
+  zoomOutAnimation(driver, { layout, animationOptions }) {
+    const { inputRange, maxFactor } = animationOptions;
+    return {
+      transform: [
+        {
+          scale: driver.value.interpolate({
+            inputRange,
+            outputRange: [maxFactor, 1],
+            extrapolateRight: 'clamp',
+          }),
+        },
+      ],
+    };
+  },
+  zoomInAnimation(driver, { layout, animationOptions }) {
+    const { inputRange, maxFactor } = animationOptions;
+    return {
+      transform: [
+        {
+          scale: driver.value.interpolate({
+            inputRange,
+            outputRange: [1, maxFactor],
+            extrapolateRight: 'clamp',
+          }),
+        },
+      ],
+    };
+  },
+  fadeOutAnimation(driver, { layout, animationOptions }) {
+    const { inputRange } = animationOptions;
+    return {
+      opacity: driver.value.interpolate({
+        inputRange,
+        outputRange: [1, 0],
+        extrapolate: 'clamp',
+      }),
+    };
+  },
+  fadeInAnimation(driver, { layout, animationOptions }) {
+    const { inputRange } = animationOptions;
+    return {
+      opacity: driver.value.interpolate({
+        inputRange,
+        outputRange: [0, 1],
+        extrapolate: 'clamp',
+      }),
+    };
+  },
+  slideInAnimation(driver, { layout, animationOptions }) {
+    const { offset, inputRange } = animationOptions;
+    const { x, y } = offset;
+    return {
+      transform: [
+        {
+          translateY: driver.value.interpolate({
+            inputRange,
+            outputRange: [y, 0],
+          }),
+          translateX: driver.value.interpolate({
+            inputRange,
+            outputRange: [x, 0],
+          }),
+        }
+      ],
+    };
+  },
+  slideOutAnimation(driver, { layout, animationOptions }) {
+    const { offset, inputRange } = animationOptions;
+    const { x, y } = offset;
+    return {
+      transform: [
+        {
+          translateY: driver.value.interpolate({
+            inputRange,
+            outputRange: [0, y],
+          }),
+          translateX: driver.value.interpolate({
+            inputRange,
+            outputRange: [0, x],
+          }),
+        }
+      ],
+    };
+  },
+  rotateAnimation(driver, { layout, animationOptions }) {
+    const {
+      inputRange,
+      dimension = '',
+      angle
+    } = animationOptions;
+    return {
+      transform: [
+        {
+          [`rotate${dimension}`]: driver.value.interpolate({
+            inputRange,
+            outputRange: [0, angle],
+          }),
+        },
+      ],
+    };
+  },
+};