Перейти к содержанию

interpolate

Эта страница была перенесена из старой версии документации.

В процессе переписывания документации некоторые страницы могут быть немного устаревшими.

Иногда требуется перевести значение из одного диапазона в другой. В этом случае следует использовать функцию interpolate, которая аппроксимирует значения между точками выходного диапазона и позволяет сопоставить значение внутри входного диапазона с соответствующим приближением в выходном диапазоне. Она также поддерживает несколько типов экстраполяции для отображения за пределы диапазона.

Аргументы

value [Float]

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

input range [Float[]]

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

output range [Float[]]

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

extrapolation type [Object | String]

Может быть как объектом, так и строкой. Если передается объект, то он должен явно указывать экстраполяцию для правой и левой сторон. Если экстраполяция для какой-либо стороны не указана, то по умолчанию используется Extrapolation.EXTEND. Пример объекта с типом экстраполяции:

1
2
3
4
const extrapolation = {
    extrapolateLeft: Extrapolation.CLAMP,
    extrapolateRight: Extrapolation.IDENTITY,
};

Если указана строка, то указанный тип экстраполяции применяется к обеим сторонам.

Доступные типы экстраполяции:

  • Extrapolation.CLAMP - прижимает значение к краю выходного диапазона
  • Extrapolation.IDENTITY - возвращает интерполируемое значение
  • Extrapolation.EXTEND - аппроксимирует значение даже за пределами диапазона

Доступные значения строк экстраполяции:

  • clamp
  • identity
  • extend

Возвращает

interpolate возвращает значение после интерполяции из диапазона вывода.

Пример

 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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import React from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';
import Animated, {
    useSharedValue,
    useAnimatedScrollHandler,
    useAnimatedStyle,
    interpolate,
} from 'react-native-reanimated';

export const HEADER_IMAGE_HEIGHT =
    Dimensions.get('window').width / 3;

export default function Test() {
    const scrollY = useSharedValue(0);
    const scrollHandler = useAnimatedScrollHandler({
        onScroll: (e) => {
            scrollY.value = e.contentOffset.y;
        },
    });
    const animatedStyles = useAnimatedStyle(() => {
        const scale = interpolate(
            scrollY.value,
            [-100, 0],
            [2, 1],
            {
                extrapolateRight: Extrapolation.CLAMP,
            }
        );

        return {
            transform: [{ scale: scale }],
        };
    });

    return (
        <View style={{ flex: 1, alignItems: 'center' }}>
            <Animated.View
                style={[
                    {
                        position: 'absolute',
                        top: 20,
                        left: 0,
                        width: 20,
                        height: 20,
                        backgroundColor: 'blue',
                    },
                    animatedStyles,
                ]}
            />

            <Animated.ScrollView
                style={StyleSheet.absoluteFill}
                onScroll={scrollHandler}
            ></Animated.ScrollView>
        </View>
    );
}

Ссылки

Комментарии