Глоссарий терминов¶

Анимированный компонент¶

Анимированные компоненты - это компоненты, которые Reanimated может анимировать. Reanimated поставляется с небольшим количеством встроенных компонентов, таких как Animated.View, Animated.ScrollView или Animated.ScrollView.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

import Animated from 'react-native-reanimated';

function App() {
    return (
        <Animated.View
            style={{
                width: 100,
                height: 100,
                backgroundColor: 'violet',
            }}
        />
    );
}

Для компонентов, не являющихся частью Reanimated, чтобы сделать их пропсы и стили анимируемыми, необходимо обернуть их с помощью createAnimatedComponent:

1
2
3
4
5
6

import Animated from 'react-native-reanimated';
import { Circle } from 'react-native-svg';

const AnimatedCircle = Animated.createAnimatedComponent(
    Circle
);

Общие значения¶

Общие значения являются движущим фактором всех ваших анимаций в Reanimated.

Они определяются с помощью хука useSharedValue:

1

import { useSharedValue } from 'react-native-reanimated';

и доступ к ним и их изменение осуществляется через их свойство .value:

1
2
3
4
5
6
7
8
9

function App() {
    const sv = useSharedValue(0);

    const handlePress = () => {
        sv.value += 10;
    };

    // rest of your glamorous code ✨
}

Это может быть значение любого типа. При использовании общие значения автоматически синхронизируются между JavaScript-потоком и UI-потоком.

Анимируемое значение¶

Анимируемое значение относится к типу значений, которые могут быть использованы для анимации. К таким значениям относятся числа, строки и массивы чисел.

Строковые значения могут быть анимированы, если они имеют определенный формат, например 10deg, 21% или даже цвет, например ffaabb или rgba(100, 200, 100, 0.7).

Функция анимации¶

Анимационные функции - это функции, позволяющие создавать анимацию. Они представляют собой строительные блоки, описывающие поведение анимации.

Reanimated поставляется с 3 встроенными функциями анимации:

• withSpring позволяет создавать анимацию на основе пружин.
• withTiming позволяет создать анимацию, основанную на длительности и easing
• withDecay позволяет создавать анимацию, имитирующую движение объектов с заданной скоростью замедления.

Эти функции можно комбинировать с модификаторами анимации для создания насыщенных и сложных анимаций.

Модификатор анимации¶

Модификаторы анимации - это функции, используемые для настройки анимации.

Reanimated поставляется с 3 встроенными модификаторами:

• withDelay позволяет добавить задержку перед началом анимации
• withRepeat позволяет повторять анимацию определенное количество раз
• withSequence позволяет выстраивать анимацию в цепочку друг за другом

Объект анимации¶

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

При передаче объекта анимации в общее значение он автоматически рассматривается как анимируемое значение.

Например, рассмотрим следующий код:

1

sv.value = withSpring(100);

Несмотря на то, что withSpring возвращает объект анимации, конечный результат, хранящийся в общем значении, является просто числом.

Анимации в инлайн-стилистике¶

Передача общих значений непосредственно в свойство style без использования useAnimatedStyle.

Например:

1
2
3
4
5

function App() {
    const width = useSharedValue(100);

    return <Animated.View style={{ width }} />;
}

Worklet¶

Ворклеты - это короткие JavaScript-функции, которые могут выполняться в потоке UI thread. Их также можно запускать в потоке JavaScript, как и функции в коде.

В большинстве случаев при работе с Reanimated код автоматически workletized и по умолчанию выполняется в потоке UI.

1
2
3
4

const style = useAnimatedStyle(() => {
    console.log('Running on the UI thread');
    return { opacity: 0.5 };
});

Вы можете создавать собственные worklet'ы, используя директиву "worklet"; в верхней части функции.

1
2
3
4

function myWorklet() {
    'worklet';
    console.log('Running on the UI thread');
}

runOnUI позволяет вручную запускать ворклеты в потоке UI:

1
2
3
4
5
6
7
8
9

function myWorklet(greeting) {
    'worklet';
    console.log(`${greeting} from the UI thread`);
}

function onPress() {
    // highlight-next-line
    runOnUI(myWorklet)('Howdy');
}

to workletize¶

Преобразование JavaScript-функции в сериализуемый объект, который может быть скопирован и запущен на UI thread.

Функции, помеченные директивой "worklet";, автоматически подхватываются и обрабатываются плагином Reanimated Babel.

JavaScript-поток¶

JavaScript-поток (или сокращенно JS-поток) отвечает за выполнение JavaScript-кода в приложении.

Это основное место, где выполняется код приложения React Native.

UI thread¶

Поток UI отвечает за обработку обновлений пользовательского интерфейса. Также известен как основной поток.

Подробнее о нем можно узнать, прочитав статью Threading model в официальной документации React Native.

Реанимированный плагин Babel¶

Плагин выполняет автоматическую workletization некоторых функций, используемых в Reanimated, чтобы уменьшить количество кодового кода.

Подробности можно узнать, прочитав Reanimated Babel plugin README.

Ссылки¶

• Glossary of terms

Комментарии