Переходы между макетами¶

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

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

Как использовать предопределенные переходы макета?¶

1. Импортируйте выбранный переход¶

1
2
3

// Transition is just an example and should be replaced
// by real animation. For Instance Layout
import { Transition } from 'react-native-reanimated';

2. Выберите Animated Component (Анимированный компонент), какой макет вы хотите анимировать¶

1
2
3

// AnimatedComponent - component created by
// createAnimatedComponent or imported from Reanimated
<AnimatedComponent layout={Transition} >

3. Настройка анимации¶

Различные типы переходов макета могут быть настроены по-разному. Полный список возможностей приведен в параграфе, посвященном конкретному типу анимации.

1

<AnimatedComponent layout={Transition.duration(3000).otherModifier()} >

Предопределенные переходы¶

Ниже мы перечислили все имеющиеся на данный момент предопределенные переходы макета. Каждый переход содержит все его модификаторы и видеоролик, демонстрирующий, как он выглядит при применении к сетке водопада.

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

Макет¶

Линейный переход, одинаково анимирует и положение, и размеры.

Модификаторы:

• duration (в мс) по умолчанию: 300
• delay (в мс) по умолчанию: 0
• easing - тот же рабочий элемент easing, что и в withTiming.
• springify изменить анимацию на пружинную
• damping по умолчанию: 10
• mass по умолчанию: 1
• stiffness по умолчанию: 100
• overshootClamping по умолчанию: false
• restDisplacementThreshold по умолчанию: 0.001
• restSpeedThreshold по умолчанию: 0.001
• withCallback обратный вызов, который сработает после окончания анимации выхода
• randomDelay рандомизирует задержку анимации между 0 и указанной задержкой (или 1000 мс, если задержка не указана)

Пример:

Последовательный переход¶

Последовательный переход, анимирует сначала x-позицию и ширину, затем y-позицию и высоту.

Модификаторы:

• duration (в мс) по умолчанию: 300
• delay (в мс) по умолчанию: 0
• withCallback обратный вызов, который сработает после окончания анимации выхода
• randomDelay рандомизирует задержку анимации между 0 и заданной задержкой (или 1000 мс, если задержка не задана)
• reverse обратный порядок анимации (сначала анимируется измерение y и высота)

Пример:

Затухающий переход¶

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

Модификаторы:

• duration (в мс) по умолчанию: 300
• delay (в мс) по умолчанию: 0
• withCallback обратный вызов, который сработает после окончания анимации выхода
• randomDelay рандомизирует задержку анимации между 0 и указанной задержкой (или 1000 мс, если задержка не указана).

Пример:

Прыгающий переход¶

Прыгающий переход, компонент "перепрыгивает" в новую позицию.

Модификаторы:

• duration (в мс) по умолчанию: 300
• delay (в мс) по умолчанию: 0
• withCallback обратный вызов, который сработает после окончания анимации выхода
• randomDelay рандомизирует задержку анимации между 0 и указанной задержкой (или 1000 мс, если задержка не указана).

Пример:

Изогнутый переход¶

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

Модификаторы:

• duration (в мс) по умолчанию: 300
• delay (в мс) по умолчанию: 0
• withCallback обратный вызов, который сработает после завершения анимации выхода
• randomDelay рандомизирует задержку анимации между 0 и указанной задержкой (или 1000 мс, если задержка не указана)
• easingX обеспечивает Easing для x-позиции (по умолчанию: Easing.in(Easing.ease))
• easingY обеспечивает Easing для y-позиции (по умолчанию: Easing.out(Easing.ease))
• easingWidth обеспечивает Easing для ширины (по умолчанию: Easing.in(Easing.exp))
• easingHeight обеспечивает Easing для высоты (по умолчанию: Easing.out(Easing.exp))

Пример:

Переход входа/выхода¶

Переход вход/выход позволяет задать различные анимации для выхода из текущей позиции и различные анимации для входа в новую позицию с новыми размерами. Вы можете использовать все имеющиеся предопределенные анимации входа/выхода или создать свою собственную. Ее длительность равна сумме длительностей входа и выхода. Также следует иметь в виду, что в качестве анимации входа и выхода нельзя использовать анимацию пружины, так как она не имеет фиксированной длительности.

Модификаторы:

• delay (в мс) по умолчанию: 0
• withCallback обратный вызов, который сработает после окончания анимации выхода
• randomDelay рандомизирует задержку анимации между 0 и указанной задержкой (или 1000 мс, если задержка не указана)
• entering анимация, которая будет использоваться для входа в компонент (по умолчанию: FadeIn)
• exiting анимация, которая будет использоваться для выхода компонента (по умолчанию: FadeOut)

Комбинированный переход

Для упрощения использования перехода мы подготовили функцию combineTransition, которая сделает ваш код чище и короче.

Использование:

1
2
3
4
5
6

// you can change ExitingAnimation and EnteringAnimation for any predefined animation you would like
// you can apply modifier (i.ex. delay()) on the object that this function returns
combineTransition(
    ExitingAnimation,
    EnteringAnimation
).modifier();

Пример:

Ссылки¶

• Layout transitions

Комментарии