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

@@ -6,6 +6,7 @@ import { RectButton, ScrollView } from 'react-native-gesture-handler';
 import Snappable from './snappable';
 import ImageViewer from './imageViewer';
 import Test from './test';
+import Interpolate from './interpolate'
 
 YellowBox.ignoreWarnings([
   'Warning: isMounted(...) is deprecated',
@@ -18,6 +19,7 @@ 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 {

Example/interpolate/index.js

@@ -0,0 +1,131 @@
+import React, { Component } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import Animated, { Easing } from 'react-native-reanimated';
+
+const {
+  set,
+  cond,
+  eq,
+  and,
+  add,
+  call,
+  multiply,
+  lessThan,
+  startClock,
+  stopClock,
+  clockRunning,
+  block,
+  timing,
+  debug,
+  spring,
+  Value,
+  Clock,
+  event,
+  interpolate,
+} = Animated;
+
+function runSpring(clock, value, dest) {
+  const state = {
+    finished: new Value(0),
+    velocity: new Value(0),
+    position: new Value(0),
+    time: new Value(0),
+  };
+
+  const config = {
+    toValue: new Value(0),
+    damping: 7,
+    mass: 1,
+    stiffness: 121.6,
+    overshootClamping: false,
+    restSpeedThreshold: 0.001,
+    restDisplacementThreshold: 0.001,
+  };
+
+  return block([
+    cond(clockRunning(clock), 0, [
+      set(state.finished, 0),
+      set(state.time, 0),
+      set(state.position, value),
+      set(state.velocity, -2500),
+      set(config.toValue, dest),
+      startClock(clock),
+    ]),
+    spring(clock, state, config),
+    cond(state.finished, debug('stop clock', 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,
+  ]);
+}
+
+export default class Example extends Component {
+  constructor(props) {
+    super(props);
+    const clock = new Clock();
+    const base = runTiming(clock, -120, 120);
+    this._transX = interpolate(base, [-120, -60, 60, 120], [-20, -1, 1, 20])
+  }
+  render() {
+    return (
+      <View style={styles.container}>
+        <Animated.View
+          style={[styles.box, { transform: [{ translateX: this._transX }] }]}
+        />
+      </View>
+    );
+  }
+}
+
+const BOX_SIZE = 100;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF',
+  },
+  box: {
+    width: BOX_SIZE,
+    height: BOX_SIZE,
+    borderColor: '#F5FCFF',
+    alignSelf: 'center',
+    backgroundColor: 'plum',
+    margin: BOX_SIZE / 2,
+  },
+});

Example/package.json

@@ -3,9 +3,9 @@
   "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",
@@ -18,6 +18,7 @@
     "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/yarn.lock

@@ -1715,6 +1715,10 @@ decode-uri-component@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
 
+dedent-js@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/dedent-js/-/dedent-js-1.0.1.tgz#bee5fb7c9e727d85dffa24590d10ec1ab1255305"
+
 deep-extend@~0.4.0:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.2.tgz#48b699c27e334bf89f10892be432f6e4c7d34a7f"
@@ -3408,6 +3412,12 @@ [email protected]:
   dependencies:
     source-map "^0.5.6"
 
+metro-with-symlinks@^1.0.12:
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/metro-with-symlinks/-/metro-with-symlinks-1.0.12.tgz#d76599face0e6f6dfc849de042249427809ee48c"
+  dependencies:
+    dedent-js "^1.0.1"
+
 metro@^0.30.0:
   version "0.30.2"
   resolved "https://registry.yarnpkg.com/metro/-/metro-0.30.2.tgz#e722e0eb106530f6d5bcf8de1f50353a0732cfb3"

src/derived.js

@@ -7,13 +7,14 @@ import {
   sub,
   set,
   add,
+  divide,
 } from './base';
 import AnimatedValue from './core/AnimatedValue';
 import { adapt } from './utils';
 
-export function abs(a) {
+export const abs = function(a) {
   return cond(lessThan(a, 0), multiply(-1, a), a);
-}
+};
 
 export const min = function(a, b) {
   a = adapt(a);
@@ -49,3 +50,37 @@ export const diffClamp = function(a, minVal, maxVal) {
     min(max(add(cond(defined(value), value, a), diff(a)), minVal), maxVal)
   );
 };
+
+const interpolateInternalSingle = function(
+  value,
+  inputRange,
+  outputRange,
+  offset
+) {
+  const inS = inputRange[offset];
+  const inE = inputRange[offset + 1];
+  const outS = outputRange[offset];
+  const outE = outputRange[offset + 1];
+  const progress = divide(sub(value, inS), sub(inE, inS));
+  return add(outS, multiply(progress, sub(outE, outS)));
+};
+
+const interpolateInternal = function(
+  value,
+  inputRange,
+  outputRange,
+  offset = 0
+) {
+  if (inputRange.length - offset === 2) {
+    return interpolateInternalSingle(value, inputRange, outputRange, offset);
+  }
+  return cond(
+    lessThan(value, inputRange[offset + 1]),
+    interpolateInternalSingle(value, inputRange, outputRange, offset),
+    interpolateInternal(value, inputRange, outputRange, offset + 1)
+  );
+};
+
+export const interpolate = function(value, inputRange, outputRange) {
+  return interpolateInternal(value, inputRange, outputRange);
+};