Add interpolate function from kmagiera with example. [WIP]

Example/.gitignore

@@ -54,3 +54,6 @@ buck-out/
 
 # Bundle artifact
 *.jsbundle
+
+# metro-with-symlinks
+metro.config.js

Example/App.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import { Text, View, FlatList, StyleSheet, YellowBox } from 'react-native';
-import { StackNavigator } from 'react-navigation';
+import { createStackNavigator } from 'react-navigation';
 import { RectButton, ScrollView } from 'react-native-gesture-handler';
 
 import Snappable from './snappable';
 import ImageViewer from './imageViewer';
 import Test from './test';
+import Interpolate from './src/interpolate';
 
 YellowBox.ignoreWarnings([
   'Warning: isMounted(...) is deprecated',
@@ -18,11 +19,12 @@ const SCREENS = {
   Snappable: { screen: Snappable, title: 'Snappable' },
   Test: { screen: Test, title: 'Test' },
   ImageViewer: { screen: ImageViewer, title: 'Image Viewer' },
+  Interpolate: { screen: Interpolate, title: 'Interpolate' },
 };
 
 class MainScreen extends React.Component {
   static navigationOptions = {
-    title: '🎬 Reanimated Demo',
+    title: '🎬 Reanimated Examples',
   };
   render() {
     const data = Object.keys(SCREENS).map(key => ({ key }));
@@ -57,7 +59,7 @@ class MainScreenItem extends React.Component {
   }
 }
 
-const ExampleApp = StackNavigator(
+const ExampleApp = createStackNavigator(
   {
     Main: { screen: MainScreen },
     ...SCREENS,

Example/imageViewer/index.js

@@ -420,6 +420,9 @@ class Viewer extends Component {
 }
 
 export default class Example extends Component {
+  static navigationOptions = {
+    title: 'Image Viewer Example',
+  };
   render() {
     return (
       <View style={styles.container}>

Example/package.json

@@ -3,21 +3,22 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "start": "node node_modules/react-native/local-cli/cli.js start",
+    "start": "metro-with-symlinks start",
     "test": "jest",
-    "postinstall": "rm -rf node_modules/react-native-reanimated/{.git,node_modules,Example}"
+    "postinstall": "metro-with-symlinks"
   },
   "dependencies": {
     "react": "16.3.2",
     "react-native": "0.55.3",
     "react-native-gesture-handler": "^1.0.0",
     "react-native-reanimated": "file:../",
-    "react-navigation": "^1.5.11"
+    "react-navigation": "^2.0.4"
   },
   "devDependencies": {
     "babel-jest": "22.4.3",
     "babel-preset-react-native": "4.0.0",
     "jest": "22.4.3",
+    "metro-with-symlinks": "^1.0.12",
     "react-test-renderer": "16.3.1"
   },
   "jest": {

Example/rn-cli.config.js

@@ -0,0 +1,3 @@
+const config = require('./metro.config.js')
+
+module.exports = config

Example/snappable/index.js

@@ -128,6 +128,9 @@ class Snappable extends Component {
 }
 
 export default class Example extends Component {
+  static navigationOptions = {
+    title: 'Snappable Example',
+  };
   render() {
     return (
       <View style={styles.container}>

Example/src/Box.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import Animated, { Easing } from 'react-native-reanimated';
+
+/**
+ * Needs to be a class component for react-native-gesture-handler to put a ref on it.
+ */
+export default class Box extends React.Component {
+  render() {
+    const { style, ...props } = this.props;
+    return <Animated.View style={[styles.box, style]} {...props} />;
+  }
+}
+
+const BOX_SIZE = 44;
+
+const styles = StyleSheet.create({
+  box: {
+    width: BOX_SIZE,
+    height: BOX_SIZE,
+    alignSelf: 'center',
+    backgroundColor: 'blue',
+    margin: 10,
+  },
+});

Example/src/Row.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+
+const Row = ({ style, ...props }) => (
+  <View style={[styles.style, style]} {...props} pointerEvents="box-none" />
+);
+
+const styles = StyleSheet.create({
+  style: {
+    height: 64,
+  },
+});
+
+export default Row;

Example/src/interpolate/AnimatedBounds.js

@@ -0,0 +1,233 @@
+import React, { Component } from 'react';
+import { StyleSheet, View } from 'react-native';
+import Animated, { Easing } from 'react-native-reanimated';
+import { PanGestureHandler, State } from 'react-native-gesture-handler';
+import Box from '../Box';
+import Row from '../Row';
+
+const {
+  set,
+  cond,
+  sub,
+  eq,
+  and,
+  add,
+  call,
+  multiply,
+  lessThan,
+  startClock,
+  stopClock,
+  clockRunning,
+  block,
+  timing,
+  debug,
+  spring,
+  Value,
+  Clock,
+  event,
+  interpolate,
+  defined,
+} = Animated;
+
+function runSpring(clock, value, velocity, dest) {
+  const state = {
+    finished: new Value(0),
+    velocity: new Value(0),
+    position: new Value(0),
+    time: new Value(0),
+  };
+
+  const config = {
+    damping: 7,
+    mass: 1,
+    stiffness: 121.6,
+    overshootClamping: false,
+    restSpeedThreshold: 0.001,
+    restDisplacementThreshold: 0.001,
+    toValue: new Value(0),
+  };
+
+  return [
+    cond(clockRunning(clock), 0, [
+      set(state.finished, 0),
+      set(state.velocity, velocity),
+      set(state.position, value),
+      set(config.toValue, dest),
+      startClock(clock),
+    ]),
+    cond(state.finished, stopClock(clock)),
+    state.position,
+  ];
+}
+
+function runTiming(clock, value, dest) {
+  const state = {
+    finished: new Value(1),
+    position: new Value(value),
+    time: new Value(0),
+    frameTime: new Value(0),
+  };
+
+  const config = {
+    duration: 500,
+    toValue: new Value(0),
+    easing: Easing.inOut(Easing.ease),
+  };
+
+  const reset = [
+    set(state.finished, 0),
+    set(state.time, 0),
+    set(state.frameTime, 0),
+  ];
+
+  return block([
+    cond(and(state.finished, eq(state.position, value)), [
+      ...reset,
+      set(config.toValue, dest),
+    ]),
+    cond(and(state.finished, eq(state.position, dest)), [
+      ...reset,
+      set(config.toValue, value),
+    ]),
+    cond(clockRunning(clock), 0, startClock(clock)),
+    timing(clock, state, config),
+    state.position,
+  ]);
+}
+
+const getThing = (min, max) => {
+  const clock = new Clock();
+  const state = {
+    finished: new Value(1),
+    position: new Value(min),
+    time: new Value(0),
+    frameTime: new Value(0),
+  };
+
+  const config = {
+    duration: 500,
+    toValue: new Value(0),
+    easing: Easing.inOut(Easing.ease),
+  };
+
+  const reset = [
+    set(state.finished, 0),
+    set(state.time, 0),
+    set(state.frameTime, 0),
+  ];
+
+  return block([
+    cond(and(state.finished, eq(state.position, min)), [
+      ...reset,
+      set(config.toValue, max),
+    ]),
+    cond(and(state.finished, eq(state.position, max)), [
+      ...reset,
+      set(config.toValue, min),
+    ]),
+    cond(clockRunning(clock), 0, startClock(clock)),
+    timing(clock, state, config),
+    state.position,
+  ]);
+};
+
+export default class AnimatedBounds extends Component {
+  constructor(props) {
+    super(props);
+    const TOSS_SEC = 0.2;
+
+    const dragX = new Value(0);
+    const state = new Value(-1);
+    const dragVX = new Value(0);
+    const transX = new Value();
+    const prevDragX = new Value(0);
+    const clock = new Clock();
+
+    this._onGestureEvent = event([
+      { nativeEvent: { translationX: dragX, velocityX: dragVX, state: state } },
+    ]);
+
+    const snapPoint = cond(
+      lessThan(add(transX, multiply(TOSS_SEC, dragVX)), 0),
+      -100,
+      100
+    );
+
+    this._transX = cond(
+      eq(state, State.ACTIVE),
+      [
+        stopClock(clock),
+        set(transX, add(transX, sub(dragX, prevDragX))),
+        set(prevDragX, dragX),
+        transX,
+      ],
+      [
+        set(prevDragX, 0),
+        set(
+          transX,
+          cond(defined(transX), runSpring(clock, transX, dragVX, snapPoint), 0)
+        ),
+      ]
+    );
+
+    this._transX = interpolate(this._transX, {
+      inputRange: [-100, 100],
+      outputRange: [-100, 100],
+      extrapolate: 'clamp',
+    });
+
+    const min = getThing(-100, -50);
+    const max = getThing(100, 50);
+    this._transXA = interpolate(this._transX, {
+      inputRange: [-100, 100],
+      outputRange: [min, max],
+      extrapolate: 'clamp',
+    });
+    this.min = min;
+    this.max = max;
+  }
+  render() {
+    return (
+      <View style={styles.container}>
+        <Row>
+          <Animated.View
+            style={[styles.line, { transform: [{ translateX: -100 }] }]}
+          />
+          <Animated.View
+            style={[styles.line, { transform: [{ translateX: 100 }] }]}
+          />
+          <PanGestureHandler
+            maxPointers={1}
+            onGestureEvent={this._onGestureEvent}
+            onHandlerStateChange={this._onGestureEvent}>
+            <Box style={{ transform: [{ translateX: this._transX }] }} />
+          </PanGestureHandler>
+        </Row>
+        <Row>
+          <Animated.View
+            style={[styles.line, { transform: [{ translateX: this.min }] }]}
+          />
+          <Animated.View
+            style={[styles.line, { transform: [{ translateX: this.max }] }]}
+          />
+          <Box style={{ transform: [{ translateX: this._transXA }] }} />
+        </Row>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  line: {
+    position: 'absolute',
+    alignSelf: 'center',
+    backgroundColor: 'red',
+    height: 64,
+    width: 1,
+  },
+});