useAnimatedSensor¶

С помощью хука useAnimatedSensor можно легко создавать классные интерактивные анимации на основе данных от датчиков устройства, таких как гироскоп, акселерометр и т. д.

1
2
3
4

useAnimatedSensor(
    sensorType: [SensorType],
    config?: [UserConfig]
) -> [AnimatedSensor]

Аргументы¶

sensorType - [SensorType]¶

Вы можете выбрать датчик, доступный в перечне [SensorType].

config - [UserConfig]¶

Опционально можно передать конфигурацию для настройки поведения датчика.

Returns¶

Хук useAnimatedSensor возвращает экземпляр [AnimatedSensor];

Типы¶

AnimatedSensor: [object]¶

Свойства:

• sensor: [SharedValue] содержит [3DVector] или [RotationVector] или null содержит реальные измерения датчика как общее значение
• unregister: [function] позволяет прекратить прослушивание обновлений датчика
• isAvailable: [boolean] флаг содержит информацию о доступности датчиков в устройстве
• config: [UserConfig] конфигурация, предоставленная пользователем

SensorType: [enum]¶

SensorType - это перечисление, содержащее возможные поддерживаемые датчики. Значения:

• ACCELEROMETER измерения выводятся в виде [3DVector]. Измеряется в м/с², без учета силы тяжести.
• Измерения GYROSCOPE выводятся в виде [3DVector]. Измеряется в рад/с.
• Измерения GRAVITY выводятся в виде [3DVector]. Измеряется в м/с².
• Измерения MAGNETIC_FIELD выводятся в виде [3DVector]. Измеряется в мкТл.
• Измерения ROTATION выводятся в виде [RotationVector]. [qx, qy, qz, qw] - нормализованный кватернион. [yaw, pitch, roll] - вращение в радианах вдоль соответствующих осей. Мы следуем конвенции iOS.

UserConfig: [object]¶

Свойства:

• interval: [number | auto] - интервал в миллисекундах между обновлениями общих значений. Передайте 'auto' для выбора интервала на основе частоты кадров устройства. По умолчанию: 'auto'.
• iosReferenceFrame: [IOSReferenceFrame]- опорная рамка для использования на iOS. По умолчанию:Auto`.
• adjustToInterfaceOrientation: [boolean] - нужно ли подстраивать измерения под текущую ориентацию интерфейса. Например, при альбомной ориентации оси x и y могут быть перевернуты при рисовании на экране. По умолчанию это значение равно true.

IOSReferenceFrame: [enum]¶

IOSReferenceFrame - перечисление, описывающее систему отсчета, используемую в iOS. Он соответствует документации Apple. Возможные значения:

• XArbitraryZVertical
• XArbitraryCorrectedZVertical
• XMagneticNorthZVertical
• XTrueNorthZVertical
• Auto - на устройствах без магнитометра (например, iPod) XArbitraryZVertical, на устройствах с магнитометром XArbitraryCorrectedZVertical.

3DVector: [object]¶

Свойства:

• x: number
• y: number
• z: number
• interfaceOrientation: [[InterfaceOrientation](#interfaceorientation-enum)]

RotationVector: [object]¶

Свойства:

• qw: number
• qx: number
• qy: number
• qz: number
• yaw: number
• pitch: number
• roll: number
• interfaceOrientation: [[InterfaceOrientation](#interfaceorientation-enum)]

InterfaceOrientation: [enum]¶

Значения:

• ROTATION_0 - поворот по умолчанию на Android, портретная ориентация на iOS
• ROTATION_90 - поворот на 90 градусов на Android, альбомная ориентация справа на iOS (альбомная ориентация и кнопка home справа)
• ROTATION_180 - поворот на 180 градусов на Android, перевернутая ориентация на iOS
• ROTATION_270 - поворот на 270 градусов на Android, альбомная левая ориентация на iOS (альбомная и кнопка "Домой" слева)

Пример¶

 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

function UseAnimatedSensorExample() {
    const animatedSensor = useAnimatedSensor(
        SensorType.ROTATION,
        {
            interval: 10,
        }
    ); // <- initialization
    const style = useAnimatedStyle(() => {
        const yaw = Math.abs(
            animatedSensor.sensor.value.yaw
        );
        const pitch = Math.abs(
            animatedSensor.sensor.value.pitch
        );
        return {
            height: withTiming(yaw * 200 + 20, {
                duration: 100,
            }), // <- usage
            width: withTiming(pitch * 200 + 20, {
                duration: 100,
            }), // <- usage
        };
    });

    return (
        <View
            style={{
                flex: 1,
                justifyContent: 'center',
                alignItems: 'center',
            }}
        >
            <Animated.View
                style={[
                    { backgroundColor: 'black' },
                    style,
                ]}
            />
        </View>
    );
}

Живой пример¶

Советы¶

Ссылки¶

• useAnimatedSensor

Комментарии