滾動時根據線性漸變背景設置元素的適當顏色

Question

我需要一些關於數學/算法問題的幫助。 （你不需要知道 react-native 來解決它；只是一些數學）

我有一個 react-native 應用程序，具有從 rgb(24, 205, 246) 到 rgb(67, 33, 140) 的線性漸變背景。

共有三個不同的 Text 項目，每個項目位於屏幕上不同的垂直（y 軸）位置。 對於每個 Text 項目，我希望它的文本顏色與滾動時當前 y 位置的線性漸變背景的顏色相對應。

這就是我想要的樣子： https : //imgur.com/a/8r5VcWN

我找到了一個使用 background-clip: Text 的解決方案，但不幸的是，它只能在瀏覽器中使用，而不能在手機中使用。

經過一番研究，我決定使用 scrollview 中的 onscroll 方法，該方法將返回手機屏幕頂部的 y 位置。 y 位置在用戶向下滑動時增加，當用戶向上滑動時減少。

以下是有關手機屏幕的一些信息： https : //imgur.com/a/ui7AyY6 。

我已經為每個 Text 項目做的，它的顏色將調用函數調用 changeColor(Text item A's y position)，它將獲取 Text 項目的 y 位置並返回適當的 rgb 顏色。

changeColor = bname => {
    let topY = this.state.topY;

    let color1 = Math.round(67 - topY / ((24 / 67) * 100));
    let color2 = Math.round(33 + topY / ((33 / 205) * 30));
    let color3 = Math.round(140 + topY / ((140 / 246) * 15));

    return `rgb(${color1},${color2},${color3})`;
};

回想一下線性漸變背景是從 rgb(24, 205, 246) 到 rgb(67, 33, 140)。 我們最多可以分解三個不同的顏色部分：rgb(color1, color2, color3)。

以color1為例，color1的范圍是24到67，手機屏幕的高度是0到677。

我的邏輯是讓 rgb 和高度模擬相同？ 假設我們有兩個變量：topY（向下滑動時增加；向上滑動時減少）和從 24 開始的 rgbVar。

滑動前：

頂：0

rgbVar : 24

滑入中間時：

頂 : 338.5

rgbVar：45.5

滑入結尾時：

頂 : 667

rgbVar : 67

此外，因為文本項在不同的 Y 位置，所以我需要做一些數學運算並將其添加到計算中？

這是我到目前為止所擁有的： https : //snack.expo.io/@rex_rau/paranoid-toffee

它在某種程度上能夠為文本項 A 更改為適當的顏色，但是，文本項 B 和文本項 C 沒有區別（不是它們當前位置的適當顏色）。

當滑動到中間時，我希望輸出是這樣的：

• 文本項 A 有 rgb(45.5, 119, 193)
• 文本項 B 有 rgb(50, 70, 173)
• 文本項 C 有 rgb(55, 40, 153)

任何人有任何想法來解決這個問題？ 或者其他方式來實現我想要的？

謝謝

Answer 1

在此應用程序中，文本項的顏色取決於其相對於背景的位置。 顏色分量值（紅色、綠色、藍色）將從漸變的一端到另一端線性變化。 這意味着如果您要在 x 軸上以數學方式繪制位置，在 y 軸上繪制顏色分量值，您將得到一條帶有斜率和 y 截距的線。

你肯定知道，線性方程的斜截距形式是

y = mx + b

其中m是直線的斜率， b是 y 軸截距。

給定直線上的兩個點(x1, y1)和(x2, y2) ，斜率m可以從方程計算

m = (y2 - y1) / (x2 - x1)

現在讓我們將其應用於手頭的問題。 對於紅色分量，我們可以將兩點定義為

(x1, y1) = (position1, color1) = (0, 24)

(x2, y2) = (position2, color2) = (screenHeight, 67)

由於每條線的 y 軸截距發生在x = 0 ，請注意，由於position1 = 0我們可以說 y 軸截距b = color1 = 24 。

所以方程的斜截距形式是

textColor = color1 + textPosition * (color2 - color1) / (position2 - position1)

每個顏色分量（紅色、綠色、藍色）使用相同的公式。

在您的changeColor函數中，您需要提供一個參數來提供文本項的垂直位置。 bname ，我將您的參數bname重命名為y 。 您在三個地方的調用代碼需要修改，以便它提供數字位置值而不是字符串。

在下面的代碼中，我重新排列了上面描述的線性方程中的一些項，但原理沒有改變。

changeColor = y => {
    let topY = this.state.topY;

    const topRed = 24
    const topGreen = 205
    const topBlue = 246
    const bottomRed = 67
    const bottomGreen = 33
    const bottomBlue = 140

    let pos = (y - topY) / screenHeight

    let colorRed = topRed + (bottomRed - topRed) * pos
    let colorGreen = topGreen + (bottomGreen - topGreen) * pos
    let colorBlue = topBlue + (bottomBlue - topBlue) * pos

    return `rgb(${colorRed},${colorGreen},${colorBlue})`;
  };