From d0aab5eebec6d6c38cf812ff4af101880b9f4eb2 Mon Sep 17 00:00:00 2001 From: Felippe Rodrigo Puhle Date: Tue, 24 Dec 2019 03:13:08 -0300 Subject: [PATCH] =?UTF-8?q?feat(=E2=9C=A8):=20allow=20using=20hex=20string?= =?UTF-8?q?s=20(#137)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 15 +++++++++++++++ package.json | 2 ++ src/Colors.ts | 30 +++++++++++++++++++++++++----- yarn.lock | 48 +++++++++++++++++++++++++++++++++++++++++++++--- 4 files changed, 87 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index c44f5f2f..2ba762b2 100644 --- a/README.md +++ b/README.md @@ -368,6 +368,21 @@ interpolateColor( ); ``` +HEX colors will be automatically converted to RGB: + +```js +interpolateColor(node, { + inputRange: [0, 100], + outputRange: ["#c52c27", "#e1b044"] +}); + +// with alpha +interpolateColor(node, { + inputRange: [0, 100], + outputRange: ["#c52c2700", "#c52c27ff"] +}); +``` + ### `bInterpolateColor(node, color1, color2, [colorSpace = "rgb"])` Interpolate the node from 0 to 1 without clamping. diff --git a/package.json b/package.json index 65f19e44..771adc0f 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ }, "devDependencies": { "@react-native-community/bob": "^0.4.1", + "@types/color": "^3.0.0", "@types/react": "*", "@types/react-native": "^0.60.25", "eslint": "^6.7.2", @@ -57,6 +58,7 @@ }, "dependencies": { "abs-svg-path": "^0.1.1", + "color": "^3.1.2", "normalize-svg-path": "^1.0.1", "parse-svg-path": "^0.1.2", "use-memo-one": "^1.1.1" diff --git a/src/Colors.ts b/src/Colors.ts index 2859f91a..8d626d24 100644 --- a/src/Colors.ts +++ b/src/Colors.ts @@ -1,4 +1,5 @@ import Animated from "react-native-reanimated"; +import Color from "color"; const { cond, @@ -19,8 +20,11 @@ interface RGBColor { r: number; g: number; b: number; + a?: number; } +type ColorParam = string | RGBColor; + function match( condsAndResPairs: readonly Animated.Node[], offset = 0 @@ -159,12 +163,19 @@ const interpolateColorsRGB = ( extrapolate: Extrapolate.CLAMP }) ); - return color(r, g, b); + const a = round( + interpolate(animationValue, { + inputRange, + outputRange: colors.map(c => (c.a !== undefined ? c.a : 1)), + extrapolate: Extrapolate.CLAMP + }) + ); + return color(r, g, b, a); }; interface ColorInterpolationConfig { inputRange: number[]; - outputRange: RGBColor[]; + outputRange: ColorParam[]; } export const interpolateColor = ( @@ -172,7 +183,16 @@ export const interpolateColor = ( config: ColorInterpolationConfig, colorSpace: "hsv" | "rgb" = "rgb" ): Animated.Node => { - const { inputRange, outputRange } = config; + const { inputRange } = config; + const outputRange = config.outputRange.map(c => { + const outputColor = new Color(c); + return { + r: outputColor.red(), + g: outputColor.green(), + b: outputColor.blue(), + a: outputColor.alpha() + }; + }); if (colorSpace === "hsv") return interpolateColorsHSV(value, inputRange, outputRange); return interpolateColorsRGB(value, inputRange, outputRange); @@ -180,8 +200,8 @@ export const interpolateColor = ( export const bInterpolateColor = ( value: Animated.Adaptable, - color1: RGBColor, - color2: RGBColor, + color1: ColorParam, + color2: ColorParam, colorSpace: "hsv" | "rgb" = "rgb" ) => interpolateColor( diff --git a/yarn.lock b/yarn.lock index ae158064..8b2e29ab 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1003,11 +1003,25 @@ lodash "^4.17.4" read-pkg-up "^7.0.0" -"@types/color-name@^1.1.1": +"@types/color-convert@*": + version "1.9.0" + resolved "https://registry.yarnpkg.com/@types/color-convert/-/color-convert-1.9.0.tgz#bfa8203e41e7c65471e9841d7e306a7cd8b5172d" + integrity sha512-OKGEfULrvSL2VRbkl/gnjjgbbF7ycIlpSsX7Nkab4MOWi5XxmgBYvuiQ7lcCFY5cPDz7MUNaKgxte2VRmtr4Fg== + dependencies: + "@types/color-name" "*" + +"@types/color-name@*", "@types/color-name@^1.1.1": version "1.1.1" resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0" integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ== +"@types/color@^3.0.0": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@types/color/-/color-3.0.0.tgz#40f8a6bf2fd86e969876b339a837d8ff1b0a6e30" + integrity sha512-5qqtNia+m2I0/85+pd2YzAXaTyKO8j+svirO5aN+XaQJ5+eZ8nx0jPtEWZLxCi50xwYsX10xUHetFzfb1WEs4Q== + dependencies: + "@types/color-convert" "*" + "@types/eslint-visitor-keys@^1.0.0": version "1.0.0" resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d" @@ -2650,7 +2664,7 @@ collection-visit@^1.0.0: map-visit "^1.0.0" object-visit "^1.0.0" -color-convert@^1.9.0: +color-convert@^1.9.0, color-convert@^1.9.1: version "1.9.3" resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8" integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg== @@ -2669,16 +2683,32 @@ color-name@1.1.3: resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25" integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU= -color-name@~1.1.4: +color-name@^1.0.0, 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-string@^1.5.2: + version "1.5.3" + resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.3.tgz#c9bbc5f01b58b5492f3d6857459cb6590ce204cc" + integrity sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw== + dependencies: + color-name "^1.0.0" + simple-swizzle "^0.2.2" + color-support@^1.1.3: version "1.1.3" resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2" integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg== +color@^3.1.2: + version "3.1.2" + resolved "https://registry.yarnpkg.com/color/-/color-3.1.2.tgz#68148e7f85d41ad7649c5fa8c8106f098d229e10" + integrity sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg== + dependencies: + color-convert "^1.9.1" + color-string "^1.5.2" + colorette@^1.0.7: version "1.1.0" resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.1.0.tgz#1f943e5a357fac10b4e0f5aaef3b14cdc1af6ec7" @@ -4820,6 +4850,11 @@ is-arrayish@^0.2.1: resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d" integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0= +is-arrayish@^0.3.1: + version "0.3.2" + resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03" + integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ== + is-buffer@^1.1.5: version "1.1.6" resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be" @@ -8527,6 +8562,13 @@ simple-plist@^1.0.0: bplist-parser "0.2.0" plist "^3.0.1" +simple-swizzle@^0.2.2: + version "0.2.2" + resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a" + integrity sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo= + dependencies: + is-arrayish "^0.3.1" + slash@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"