Skip to content

Commit

Permalink
Remove color-interpolate and use AnimatedInterpolation instead
Browse files Browse the repository at this point in the history
  • Loading branch information
phamfoo committed May 1, 2021
1 parent 767f7f2 commit a47b374
Show file tree
Hide file tree
Showing 3 changed files with 21 additions and 64 deletions.
3 changes: 0 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,6 @@
"react": "*",
"react-native": "*"
},
"dependencies": {
"color-interpolate": "^1.0.5"
},
"devDependencies": {
"@types/react": "^16.9.19",
"@types/react-native": "0.62.13",
Expand Down
28 changes: 20 additions & 8 deletions src/index.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import { Easing, EasingFunction } from 'react-native'
import interpolate from 'color-interpolate'

const easeInOut = Easing.bezier(0.42, 0, 0.58, 1)
const TOTAL_STOPS_PER_STEP = 16
import { Easing, EasingFunction, Animated } from 'react-native'
// @ts-expect-error
import AnimatedInterpolation from 'react-native/Libraries/Animated/src/nodes/AnimatedInterpolation'

interface ColorStops {
[location: number]: {
Expand All @@ -16,6 +14,11 @@ interface GradientParams {
easing?: EasingFunction
}

type ColorInterpolateFunction = (input: number) => string

const easeInOut = Easing.bezier(0.42, 0, 0.58, 1)
const TOTAL_STOPS_PER_STEP = 16

function easeGradient({ colorStops, easing = easeInOut }: GradientParams) {
const colors: string[] = []
const locations: number[] = []
Expand All @@ -36,19 +39,28 @@ function easeGradient({ colorStops, easing = easeInOut }: GradientParams) {

const startColor = colorStops[startLocation].color
const endColor = colorStops[endLocation].color
const colorScale = interpolate([startColor, endColor])
const currentEasing = colorStops[startLocation].easing ?? easing

const interpolationConfig: Animated.InterpolationConfigType = {
inputRange: [0, 1],
outputRange: [startColor, endColor],
easing: currentEasing,
}

const colorScale: ColorInterpolateFunction = AnimatedInterpolation.__createInterpolation(
interpolationConfig
)

const stepSize = endLocation - startLocation
const frameSize = 1 / (TOTAL_STOPS_PER_STEP - 1)
const currentEasing = colorStops[startLocation].easing ?? easing

for (
let frameIndex = 0;
frameIndex <= TOTAL_STOPS_PER_STEP - 1;
frameIndex++
) {
const progress = frameIndex * frameSize
const color = colorScale(currentEasing(progress))
const color = colorScale(progress)
colors.push(color)
locations.push(startLocation + stepSize * progress)
}
Expand Down
54 changes: 1 addition & 53 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1463,11 +1463,6 @@ ajv@^6.10.0, ajv@^6.12.4:
json-schema-traverse "^0.4.1"
uri-js "^4.2.2"

almost-equal@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/almost-equal/-/almost-equal-1.1.0.tgz#f851c631138757994276aa2efbe8dfa3066cccdd"
integrity sha1-+FHGMROHV5lCdqou++jfowZszN0=

anser@^1.4.9:
version "1.4.10"
resolved "https://registry.yarnpkg.com/anser/-/anser-1.4.10.tgz#befa3eddf282684bd03b63dcda3927aef8c2e35b"
Expand Down Expand Up @@ -2023,11 +2018,6 @@ ci-info@^2.0.0:
resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==

clamp@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/clamp/-/clamp-1.0.1.tgz#66a0e64011816e37196828fdc8c8c147312c8634"
integrity sha1-ZqDmQBGBbjcZaCj9yMjBRzEshjQ=

class-utils@^0.3.5:
version "0.3.6"
resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
Expand Down Expand Up @@ -2121,41 +2111,16 @@ color-convert@^2.0.1:
dependencies:
color-name "~1.1.4"

color-interpolate@^1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/color-interpolate/-/color-interpolate-1.0.5.tgz#d5710ce4244bd8b9feeda003f409edd4073b6217"
integrity sha512-EcWwYtBJdbeHyYq/y5QwVWLBUm4s7+8K37ycgO9OdY6YuAEa0ywAY+ItlAxE1UO5bXW4ugxNhStTV3rsTZ35ZA==
dependencies:
clamp "^1.0.1"
color-parse "^1.2.0"
color-space "^1.14.3"
lerp "^1.0.3"

[email protected]:
version "1.1.3"
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=

color-name@^1.0.0, color-name@~1.1.4:
color-name@~1.1.4:
version "1.1.4"
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==

color-parse@^1.2.0:
version "1.4.2"
resolved "https://registry.yarnpkg.com/color-parse/-/color-parse-1.4.2.tgz#78651f5d34df1a57f997643d86f7f87268ad4eb5"
integrity sha512-RI7s49/8yqDj3fECFZjUI1Yi0z/Gq1py43oNJivAIIDSyJiOZLfYCRQEgn8HEVAj++PcRe8AnL2XF0fRJ3BTnA==
dependencies:
color-name "^1.0.0"

color-space@^1.14.3:
version "1.16.0"
resolved "https://registry.yarnpkg.com/color-space/-/color-space-1.16.0.tgz#611781bca41cd8582a1466fd9e28a7d3d89772a2"
integrity sha512-A6WMiFzunQ8KEPFmj02OnnoUnqhmSaHaZ/0LVFcPTdlvm8+3aMJ5x1HRHy3bDHPkovkf4sS0f4wsVvwk71fKkg==
dependencies:
hsluv "^0.0.3"
mumath "^3.3.4"

color-support@^1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2"
Expand Down Expand Up @@ -3439,11 +3404,6 @@ hosted-git-info@^3.0.6:
dependencies:
lru-cache "^6.0.0"

hsluv@^0.0.3:
version "0.0.3"
resolved "https://registry.yarnpkg.com/hsluv/-/hsluv-0.0.3.tgz#829107dafb4a9f8b52a1809ed02e091eade6754c"
integrity sha1-gpEH2vtKn4tSoYCe0C4JHq3mdUw=

http-cache-semantics@^4.0.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz#49e91c5cbf36c9b94bcfcd71c23d5249ec74e390"
Expand Down Expand Up @@ -4127,11 +4087,6 @@ language-tags@^1.0.5:
dependencies:
language-subtag-registry "~0.3.2"

lerp@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/lerp/-/lerp-1.0.3.tgz#a18c8968f917896de15ccfcc28d55a6b731e776e"
integrity sha1-oYyJaPkXiW3hXM/MKNVaa3Med24=

leven@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
Expand Down Expand Up @@ -4793,13 +4748,6 @@ [email protected]:
resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==

mumath@^3.3.4:
version "3.3.4"
resolved "https://registry.yarnpkg.com/mumath/-/mumath-3.3.4.tgz#48d4a0f0fd8cad4e7b32096ee89b161a63d30bbf"
integrity sha1-SNSg8P2MrU57Mglu6JsWGmPTC78=
dependencies:
almost-equal "^1.1.0"

[email protected]:
version "0.0.7"
resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
Expand Down

0 comments on commit a47b374

Please sign in to comment.