Skip to content
Creates a look up table which can be used to interpolate across the results of an arbitrary function.
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
LICENSE
README.md
index.js
package.json

README.md

react-native-animated-look-up-table

Creates a look up table which can be used to interpolate across the results of an arbitrary input function. This can be used to help achieve some complex effects whilst maintaining performance, since they can be used in conjunction with useNativeDriver.

Check out the deep dive here.

🚀 Getting Started

Using npm:

npm install --save react-native-animated-look-up-table

Using yarn:

yarn add react-native-animated-look-up-table

✍️ Usage

This library exports the function createTransform, which can be used to compile your animated look up table:

import { createTransform } from 'react-native-animated-transform';

// XXX: Create a sine wave between [0, 1] using 1024 samples.
const sine = createTransform(
  // Any arbitrary function of the form (p, from, to) => n can be used.
  // The value of p is your current value of progression between
  // "from" and "to".
  Math.sin, 
  {
    from: 0,
    to: 2 * Math.PI,
    samples: 1024,
  },
);

Once generated, you can pass this to an Animated.Value's interpolate function:

<Animated.View
  style={{
    transform: [
      {
        // Interpolate animValue using the compiled transform.
        scale: animValue
          .interpolate(sine),
      },
    ],
  }}
/>

Since we're interpolating between samples, your look up table will smoothly transition between defined entries of your complex function.

✌️ License

MIT

@cawfree

Open source takes a lot of work! If this project has helped you, please consider buying me a coffee. ☕

Buy @cawfree a coffee

You can’t perform that action at this time.