From b2719d7129b634a1edcd33d46f82852225da4fe9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ivan=20Vukovic=CC=81?= <3.14wee@gmail.com>
Date: Mon, 31 Oct 2016 22:15:10 +0100
Subject: [PATCH] RefactorComponents to use connectAnimation
---
FadeIn.js | 17 +++----
FadeOut.js | 17 +++----
HeroHeader.js | 34 ++------------
View.js | 5 +++
ZoomIn.js | 21 +++------
ZoomOut.js | 21 +++------
animations.js | 122 ++++++++++++++++++++++++++++++++++++++++++++++++++
7 files changed, 158 insertions(+), 79 deletions(-)
create mode 100644 View.js
create mode 100644 animations.js
diff --git a/FadeIn.js b/FadeIn.js
index c6f40a4..e050616 100644
--- 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 (
-
{children}
-
+
);
}
}
diff --git a/FadeOut.js b/FadeOut.js
index c7be908..7e82ced 100644
--- 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 (
-
{children}
-
+
);
}
}
diff --git a/HeroHeader.js b/HeroHeader.js
index de721eb..e3f9060 100644
--- 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 (
-
-
-
- {children}
-
-
+
+ {children}
);
}
diff --git a/View.js b/View.js
new file mode 100644
index 0000000..dda77c8
--- /dev/null
+++ 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
index 9a0f532..8d690bd 100644
--- 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 (
-
{children}
-
+
);
}
}
diff --git a/ZoomOut.js b/ZoomOut.js
index 78ca039..42574d2 100644
--- 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 (
-
{children}
-
+
);
}
}
diff --git a/animations.js b/animations.js
new file mode 100644
index 0000000..0989531
--- /dev/null
+++ 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],
+ }),
+ },
+ ],
+ };
+ },
+};