{"id":16799316,"url":"https://github.com/osdnk/react-native-spline-interpolate","last_synced_at":"2025-03-22T02:30:55.050Z","repository":{"id":97765751,"uuid":"161324860","full_name":"osdnk/react-native-spline-interpolate","owner":"osdnk","description":"Spline interpolation for React Native animations","archived":false,"fork":false,"pushed_at":"2018-12-12T08:56:40.000Z","size":521,"stargazers_count":71,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-01T11:44:37.467Z","etag":null,"topics":["animation","animations","interpolation","interpolation-methods","react","react-native"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/osdnk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-12-11T11:38:17.000Z","updated_at":"2024-08-20T23:01:11.000Z","dependencies_parsed_at":null,"dependency_job_id":"5c4c6b74-8ef5-4771-a380-738f633257d0","html_url":"https://github.com/osdnk/react-native-spline-interpolate","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/osdnk%2Freact-native-spline-interpolate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/osdnk%2Freact-native-spline-interpolate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/osdnk%2Freact-native-spline-interpolate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/osdnk%2Freact-native-spline-interpolate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/osdnk","download_url":"https://codeload.github.com/osdnk/react-native-spline-interpolate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244173517,"owners_count":20410298,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","animations","interpolation","interpolation-methods","react","react-native"],"created_at":"2024-10-13T09:28:31.558Z","updated_at":"2025-03-22T02:30:55.044Z","avatar_url":"https://github.com/osdnk.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-spline-interpolate\n\n\u003cimg src=\"gifs/reanimated.gif\" width=\"200\" /\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\n\nSmall library for performing interpolation imitating physical movement. With this library it's possible generate animated node which could interpolate given points' mapping with input node (e.g. attached to `timing` animation) in a very smooth way using cubic splines.\n\n## What is cubic spline?\n\nIn order to make interpolation really smooth it's required to build a smooth interpolation function (e.g. differentiable up to infinity — for all derivatives). It could be achieved using Lagrange's interpolation, but it gives some unwanted effects. Runge's phenomenon could be observable and a complexity is quite high then.\n\nSplines appears to be quite a good solution for our case. We could assume that function doesn't have to be only one polynomial, but could be defined with different polynomials on given ranges defined by interpolation nodes. In order to make it smooth we could make it continuous when it comes not only to values but to derivatives' values and derivatives' of derivatives as well.\n\nSplines' formulas have been very nice explained here: https://en.wikiversity.org/wiki/Cubic_Spline_Interpolation. As a result of given steps, we obtain matrix of equations which we should solve in order to determine factors of interpolation polynomials.\nWe could solve this equation once (in JavaScript) and then build nodes' structure for performing interpolation. The basic approach for solving matrices is Gauss-Jordan's method which has cubic computation complexity and quadratic memory complexity. However, considering that this matrix is dense and regular, I managed to achieve the result in a linear complexity whenit comes to computation and memory usage as well.\n\nImplementation could be seen in `./index.js` file.\n\n## And how it comes to React Native?\n\nI have made two implementation of this feature. One has been written with RN's `Animated` API, but it's very hacky and is not very performant (evaluation of each frame has great complexity since handling logical expression has been done with the linear interpolation taken from RN's core) so I recommend to use the second implementation done with `react-native-reanimated`. Using logical (`cond`) nodes I manage to do it without any dirty workaround.\n\n## Getting started\n\n### Installation of `react-native-reanimated` version\n```bash\nyarn add react-native-reanimated-spline-interpolate\n```\n\n### Installation of RN's legacy version\n```bash\nyarn add react-native-animated-spline-interpolate\n```\n\n## Usage\n\n### Import\n\n```javascript\nimport splineInterpolate from \"react-native-reanimated-spline-interpolate\";\n```\nor\n```javascript\nimport splineInterpolate from \"react-native-animated-spline-interpolate\";\n```\n\n### Interpolation\n\n```javascript\nconst interpolationNode = splineInterpolate(inputNode, { inputRange, outputRange });\n```\n\n\n## Example\n\n### core RN's `Animated`\n```javascript\nimport React, { Component } from \"react\";\nimport { View, Animated } from \"react-native\";\nimport splineInterpolate from \"react-native-animated-spline-interpolate\";\n\nconst { multiply, Value, timing } = Animated;\n\nconst inputRange = [0, 20, 45, 70, 85, 100];\nconst outputRange = [100, 70, 60, 30, 35, 0];\n\nexport default class Example extends Component {\n  _transX = new Value(0);\n  _anim = timing(this._transX, {\n    toValue: 100,\n    duration: 5000,\n    useNativeDriver: true\n  }).start();\n  render() {\n    const interpolated = splineInterpolate(this._transX, { inputRange, outputRange });\n    return (\n      \u003cView\u003e\n        \u003cAnimated.View\n          style={{ transform: [{ translateX: interpolated }] }}\n        /\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n\n```\n\n### `Reanimated`\n```javascript\nimport React, { Component } from \"react\";\nimport { View } from \"react-native\";\nimport splineInterpolate from \"react-native-reanimated-spline-interpolate\";\nimport Animated, { Easing } from \"react-native-reanimated\";\n\nconst { cond, multiply, startClock, stopClock, clockRunning, block, timing, Value, Clock } = Animated;\n\nfunction runTiming() {\n  const state = {\n    finished: new Value(0),\n    position: new Value(0),\n    time: new Value(0),\n    frameTime: new Value(0)\n  };\n  const clock = new Clock();\n  const config = {\n    duration: 5000,\n    toValue: new Value(100),\n    easing: Easing.linear\n  };\n\n  return block([\n    cond(clockRunning(clock), 0, [startClock(clock)]),\n    timing(clock, state, config),\n    cond(state.finished, stopClock(clock)),\n    state.position\n  ]);\n}\n\nconst inputRange = [0, 20, 70, 100];\nconst outputRange = [0, 40, 50, 100];\nclass Example extends Component {\n  _transX = runTiming();\n  render() {\n    const interpolated = splineInterpolate(this._transX, { inputRange, outputRange });\n    return (\n      \u003cView\u003e\n          \u003cAnimated.View\n            style={{ transform: [{ translateX: interpolated }] }}\n          /\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n```\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fosdnk%2Freact-native-spline-interpolate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fosdnk%2Freact-native-spline-interpolate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fosdnk%2Freact-native-spline-interpolate/lists"}