interpolateColor¶

Сопоставляет входной диапазон с выходными цветами с помощью линейной интерполяции. Работает аналогично функции interpolate, но на выходе получается цветовая строка в нотации rgba(r, g, b, a).

Аргументы¶

value [Float]¶

Значение из входного диапазона, которое должно быть отображено на значение из выходного диапазона.

input range [Float[]]¶

Массив Floats, содержащий точки, указывающие на диапазон входного значения. Значения в диапазоне ввода должны возрастать.

output range [(string | number)[]]¶

Массив цветов (строки типа 'red', '#ff0000', 'rgba(255, 0, 0, 0.5)' и т.д.), содержащий точки, которые указывают на диапазон выходного значения. Количество точек должно быть не меньше, чем диапазон входных значений.

color space [String]¶

Может быть либо 'RGB', либо 'HSV'.

options [Object]¶

Объект, содержащий параметры цветовой интерполяции. Допустимые параметры перечислены ниже:

Возвраты¶

interpolateColor возвращает цвет после интерполяции из выходного диапазона в формате rgba(r, g, b, a).

Опции объяснения¶

• gamma - Цвета в web/мобильном пространстве выражаются в цветовом пространстве sRGB, которое является гамма-корректированным, то есть нелинейным.

  Операции над цветами в нелинейном пространстве, такие как сложение, будут давать неверные результаты. Например, интерполированный цвет может оказаться темнее, чем должен быть. Поэтому при интерполяции мы сначала преобразуем sRGB в линейное пространство, а затем преобразуем результат обратно в нелинейное пространство sRGB. Гамма-коррекция зависит от устройства, но для большинства устройств для преобразования из нелинейного пространства в линейное повышение компонентов до значения гамма=2,2 является хорошим приближением. Если вы хотите отключить это, вы всегда можете установить gamma=1. Хорошая статья на эту тему.

• useCorrectedHSVInterpolation - Иногда (например, при интерполяции от желтого к пурпурному) HSV-интерполяция проходит через множество других оттенков.

  Эта опция позволяет уменьшить количество оттенков в таких случаях, рассматривая оттенки HSV как круговой спектр и выбирая кратчайшую дугу (так, вместо перехода от желтого к пурпурному через зеленый и синий, он проходит только через красный).

Пример¶

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

const Component = () => {
    const progress = useSharedValue(0);

    const animatedStyle = useAnimatedStyle(() => {
        return {
            backgroundColor: interpolateColor(
                progress.value,
                [0, 1],
                ['red', 'green']
            ),
        };
    });

    return (
        <View>
            <Animated.View
                style={[
                    { width: 100, height: 100 },
                    animatedStyle,
                ]}
            />
            <Button
                onPress={() => {
                    progress.value = withTiming(
                        1 - progress.value,
                        { duration: 1000 }
                    );
                }}
                title="run animation"
            />
        </View>
    );
};

Ссылки¶

• interpolateColor

Комментарии