Анимации входа/выхода¶

Анимации входа/выхода позволяют анимировать элементы при их добавлении и удалении из иерархии представления.

Reanimated поставляется с кучей предопределенных анимаций, которые можно настраивать. Для более сложных случаев можно использовать Keyframes или создавать собственные пользовательские анимации входа/выхода.

Fade¶

FadeX позволяет создать анимацию затухания.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

import { FadeIn, FadeOut } from 'react-native-reanimated';

function App() {
    return (
        <Animated.View
            entering={FadeIn}
            exiting={FadeOut}
        />
    );
}

Доступные анимации затухания:

• Вход: FadeIn, FadeInRight, FadeInLeft, FadeInUp, FadeInDown.
• Выход: FadeOut, FadeOutRight, FadeOutLeft, FadeOutUp, FadeOutDown.

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

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

Time-based¶

Модификаторы, основанные на времени, ретранслируют функцию withTiming.

1

FadeOutLeft.duration(500).easing(Easing.ease);

• .duration(durationMs: число) - продолжительность анимации (в миллисекундах). По умолчанию равна 300.
• .easing(easingFunction: EasingFunction) - функция easing, определяющая кривую анимации. По умолчанию Easing.inOut(Easing.quad).

Spring-based¶

Модификаторы, основанные на пружинах, используют функцию withSpring.

1
2
3
4
5
6
7

FadeInUp.springify()
    .damping(30)
    .mass(5)
    .stiffness(10)
    .overshootClamping(false)
    .restDisplacementThreshold(0.1)
    .restSpeedThreshold(5);

• .springify() включает конфигурацию анимации на основе пружин.
• .damping(value: number) определяет, как быстро пружина прекращает движение. Большее значение демпфирования означает, что пружина будет быстрее приходить в состояние покоя. По умолчанию 10.
• .mass( value: number) - это масса пружины. Уменьшение этого значения ускоряет анимацию. По умолчанию 1.
• .stiffness(value: number) определяет, насколько пружина упруга. По умолчанию 100.
• .overshootClamping(value: boolean) определяет, может ли пружина перескочить через заданное положение. По умолчанию false.
• .restDisplacementThreshold( value: number) - смещение, ниже которого пружина будет защелкиваться в заданном положении без дальнейших колебаний. По умолчанию 0.001.
• .restSpeedThreshold( value: number) - скорость в пикселях в секунду, начиная с которой пружина будет защелкиваться в заданное положение без дальнейших колебаний. По умолчанию 2.

Common¶

1
2
3
4
5
6
7
8

FadeInDown.delay(500)
    .randomDelay()
    .withInitialValues({ transform: [{ translateY: 420 }] })
    .withCallback((finished) => {
        console.log(
            `finished without interruptions: ${finished}`
        );
    });

• .delay(durationMs: number) - задержка перед началом анимации (в миллисекундах). По умолчанию равна 0.
• .randomDelay() рандомизирует задержку анимации между 0 и указанной задержкой. Используется 1000 мс, если задержка не была указана.
• .withInitialValues(values: StyleProps) позволяет переопределить начальную конфигурацию анимации.
• .withCallback(callback: (finished: boolean) => void) - обратный вызов, который будет выполнен после завершения анимации. Устанавливает значение finished в true, если анимация завершается без прерываний, и false в противном случае.

Bounce¶

BounceX позволяет создать анимацию прыжков.

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

import {
    BounceIn,
    BounceOut,
} from 'react-native-reanimated';

function App() {
    return (
        <Animated.View
            entering={BounceIn}
            exiting={BounceOut}
        />
    );
}

Доступные анимации отскока:

• Ввод: BounceIn, BounceInRight, BounceInLeft, BounceInUp, BounceInDown.
• Выход: BounceOut, BounceOutRight, BounceOutLeft, BounceOutUp, BounceOutDown.

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

BounceInDown.duration(500)
    .delay(500)
    .randomDelay()
    .withInitialValues({
        transform: [{ translateY: -420 }],
    })
    .withCallback((finished) => {
        console.log(
            `finished without interruptions: ${finished}`
        );
    });

• .duration(durationMs: number) - продолжительность анимации (в миллисекундах). По умолчанию равно 600.
• .delay(durationMs: number) - задержка перед началом анимации (в миллисекундах). По умолчанию 0.
• .randomDelay() рандомизирует задержку анимации между 0 и заданной задержкой. Используется 1000 мс, если задержка не была указана.
• .withInitialValues(values: StyleProps) позволяет переопределить начальную конфигурацию анимации.
• .withCallback(callback: (finished: boolean) => void) - обратный вызов, который будет выполнен после завершения анимации. Устанавливает значение finished в true, если анимация завершается без прерываний, и false в противном случае.

Flip¶

FlipX позволяет создавать анимацию, основанную на вращении по определенной оси.

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

import {
    FlipInEasyX,
    FlipOutEasyX,
} from 'react-native-reanimated';

function App() {
    return (
        <Animated.View
            entering={FlipInEasyX}
            exiting={FlipOutEasyX}
        />
    );
}

Доступные анимации переворачивания:

• Ввод: FlipInEasyX, FlipInEasyY, FlipInXDown, FlipInXUp, FlipInYLeft, FlipInYRight.
• Выход: FlipOutEasyX, FlipOutEasyY, FlipOutXDown, FlipOutXUp, FlipOutYLeft, FlipOutYRight.

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

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

Time-based¶

Модификаторы, основанные на времени, ретранслируют функцию withTiming.

1

FlipOutYLeft.duration(500).easing(Easing.ease);

• .duration(durationMs: number) - продолжительность анимации (в миллисекундах). По умолчанию равна 300.
• .easing(easingFunction: EasingFunction) - функция easing, определяющая кривую анимации. По умолчанию Easing.inOut(Easing.quad).

Spring-based¶

Модификаторы, основанные на пружинах, используют функцию withSpring.

1
2
3
4
5
6
7

FlipInXUp.springify()
    .damping(2)
    .mass(3)
    .stiffness(10)
    .overshootClamping(false)
    .restDisplacementThreshold(0.1)
    .restSpeedThreshold(5);

• .springify() включает конфигурацию анимации на основе пружин.
• .damping(value: number) определяет, как быстро пружина прекращает движение. Большее значение демпфирования означает, что пружина будет быстрее приходить в состояние покоя. По умолчанию 10.
• .mass( value: number) - это масса пружины. Уменьшение этого значения ускоряет анимацию. По умолчанию 1.
• .stiffness(value: number) определяет, насколько пружина упруга. По умолчанию 100.
• .overshootClamping(value: boolean) определяет, может ли пружина перескочить через заданное положение. По умолчанию false.
• .restDisplacementThreshold( value: number) - смещение, ниже которого пружина будет защелкиваться в заданном положении без дальнейших колебаний. По умолчанию 0.001.
• .restSpeedThreshold( value: number) - скорость в пикселях в секунду, начиная с которой пружина будет защелкиваться в заданное положение без дальнейших колебаний. По умолчанию 2.

Common¶

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

FlipInEasyY.delay(500)
    .randomDelay()
    .withInitialValues({
        transform: [
            { perspective: 100 },
            { rotateY: '123deg' },
        ],
    })
    .withCallback((finished) => {
        console.log(
            `finished without interruptions: ${finished}`
        );
    });

• .delay(durationMs: number) - задержка перед началом анимации (в миллисекундах). По умолчанию равна 0.
• .randomDelay() рандомизирует задержку анимации между 0 и указанной задержкой. Используется 1000 мс, если задержка не была указана.
• .withInitialValues(values: StyleProps) позволяет переопределить начальную конфигурацию анимации.
• .withCallback(callback: (finished: boolean) => void) - обратный вызов, который будет выполнен после завершения анимации. Устанавливает значение finished в true, если анимация завершается без прерываний, и false в противном случае.

LightSpeed¶

LightSpeedX позволяет создать анимацию горизонтально движущегося объекта с изменением непрозрачности и перекоса.

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

import {
    LightSpeedInRight,
    LightSpeedOutLeft,
} from 'react-native-reanimated';

function App() {
    return (
        <Animated.View
            entering={LightSpeedInRight}
            exiting={LightSpeedOutLeft}
        />
    );
}

Доступные анимации скорости света:

• Вход: LightSpeedInRight, LightSpeedInLeft.
• Выход: LightSpeedOutRight, LightSpeedOutLeft.

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

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

Time-based¶

Модификаторы, основанные на времени, ретранслируют функцию withTiming.

1

LightSpeedOutLeft.duration(500).easing(Easing.ease);

• .duration(durationMs: number) - продолжительность анимации (в миллисекундах). По умолчанию равна 300.
• .easing(easingFunction: EasingFunction) - функция easing, определяющая кривую анимации. По умолчанию Easing.inOut(Easing.quad).

Spring-based¶

Модификаторы, основанные на пружинах, используют функцию withSpring.

1
2
3
4
5
6
7

LightSpeedInLeft.springify()
    .damping(30)
    .mass(5)
    .stiffness(10)
    .overshootClamping(false)
    .restDisplacementThreshold(0.1)
    .restSpeedThreshold(5);

• .springify() включает конфигурацию анимации на основе пружин.
• .damping(value: number) определяет, как быстро пружина прекращает движение. Большее значение демпфирования означает, что пружина будет быстрее приходить в состояние покоя. По умолчанию 10.
• .mass( value: number) - это масса пружины. Уменьшение этого значения ускоряет анимацию. По умолчанию 1.
• .stiffness(value: number) определяет, насколько пружина упруга. По умолчанию 100.
• .overshootClamping(value: boolean) определяет, может ли пружина перескочить через заданное положение. По умолчанию false.
• .restDisplacementThreshold( value: number) - смещение, ниже которого пружина будет защелкиваться в заданном положении без дальнейших колебаний. По умолчанию 0.001.
• .restSpeedThreshold( value: number) - скорость в пикселях в секунду, начиная с которой пружина будет защелкиваться в заданное положение без дальнейших колебаний. По умолчанию 2.

Common¶

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

LightSpeedInRight.delay(500)
    .randomDelay()
    .withInitialValues({
        transform: [
            { translateX: -100 },
            { skewX: '-10deg' },
        ],
    })
    .withCallback((finished) => {
        console.log(
            `finished without interruptions: ${finished}`
        );
    });

• .delay(durationMs: number) - задержка перед началом анимации (в миллисекундах). По умолчанию равна 0.
• .randomDelay() рандомизирует задержку анимации между 0 и указанной задержкой. Используется 1000 мс, если задержка не была указана.
• .withInitialValues(values: StyleProps) позволяет переопределить начальную конфигурацию анимации.
• .withCallback(callback: (finished: boolean) => void) - обратный вызов, который будет выполнен после завершения анимации. Устанавливает значение finished в true, если анимация завершается без прерываний, и false в противном случае.

Pinwheel¶

PinwheelX позволяет создавать анимацию на основе вращения, масштаба и непрозрачности.

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

import {
    PinwheelIn,
    PinwheelOut,
} from 'react-native-reanimated';

function App() {
    return (
        <Animated.View
            entering={PinwheelIn}
            exiting={PinwheelOut}
        />
    );
}

Доступные анимации колес:

• Ввод: PinwheelIn
• Выход: PinwheelOut.

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

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

Time-based¶

Модификаторы, основанные на времени, ретранслируют функцию withTiming.

1

PinwheelOut.duration(500).easing(Easing.ease);

• .duration(durationMs: number) - продолжительность анимации (в миллисекундах). По умолчанию равна 300.
• .easing(easingFunction: EasingFunction) - функция easing, определяющая кривую анимации. По умолчанию Easing.inOut(Easing.quad).

Spring-based¶

Модификаторы, основанные на пружинах, ретранслируют функцию withSpring.

1
2
3
4
5
6
7

PinwheelIn.springify()
    .damping(2)
    .mass(5)
    .stiffness(10)
    .overshootClamping(false)
    .restDisplacementThreshold(0.1)
    .restSpeedThreshold(5);

• .springify() включает конфигурацию анимации на основе пружин.
• .damping(value: number) определяет, как быстро пружина прекращает движение. Большее значение демпфирования означает, что пружина будет быстрее приходить в состояние покоя. По умолчанию 10.
• .mass( value: number) - это масса пружины. Уменьшение этого значения ускоряет анимацию. По умолчанию 1.
• .stiffness(value: number) определяет, насколько пружина упруга. По умолчанию 100.
• .overshootClamping(value: boolean) определяет, может ли пружина перескочить через заданное положение. По умолчанию false.
• .restDisplacementThreshold( value: number) - смещение, ниже которого пружина будет защелкиваться в заданном положении без дальнейших колебаний. По умолчанию 0.001.
• .restSpeedThreshold( value: number) - скорость в пикселях в секунду, начиная с которой пружина будет защелкиваться в заданное положение без дальнейших колебаний. По умолчанию 2.

Common¶

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

PinwheelIn.delay(500)
    .randomDelay()
    .withInitialValues({
        transform: [{ scale: 0.8 }, { rotate: '3' }],
    })
    .withCallback((finished) => {
        console.log(
            `finished without interruptions: ${finished}`
        );
    });

• .delay(durationMs: number) - задержка перед началом анимации (в миллисекундах). По умолчанию равна 0.
• .randomDelay() рандомизирует задержку анимации между 0 и указанной задержкой. Используется 1000 мс, если задержка не была указана.
• .withInitialValues(values: StyleProps) позволяет переопределить начальную конфигурацию анимации.
• .withCallback(callback: (finished: boolean) => void) - обратный вызов, который будет выполнен после завершения анимации. Устанавливает значение finished в true, если анимация завершается без прерываний, и false в противном случае.

Roll¶

RollX позволяет создать анимацию горизонтально движущегося объекта с вращением.

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

import {
    RollInRight,
    RollOutLeft,
} from 'react-native-reanimated';

function App() {
    return (
        <Animated.View
            entering={RollInRight}
            exiting={RollOutLeft}
        />
    );
}

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

• Вход: RollInRight, RollInLeft.
• Выход: RollOutRight, RollOutLeft.

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

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

Time-based¶

Модификаторы, основанные на времени, ретранслируют функцию withTiming.

1

RollOutLeft.duration(500).easing(Easing.ease);

• .duration(durationMs: number) - продолжительность анимации (в миллисекундах). По умолчанию равна 300.
• .easing(easingFunction: EasingFunction) - функция easing, определяющая кривую анимации. По умолчанию Easing.inOut(Easing.quad).

Spring-based¶

Модификаторы, основанные на пружинах, ретранслируют функцию withSpring.

1
2
3
4
5
6
7

RollInLeft.springify()
    .damping(30)
    .mass(5)
    .stiffness(10)
    .overshootClamping(false)
    .restDisplacementThreshold(0.1)
    .restSpeedThreshold(5);

• .springify() включает конфигурацию анимации на основе пружин.
• .damping(value: number) определяет, как быстро пружина прекращает движение. Большее значение демпфирования означает, что пружина будет быстрее приходить в состояние покоя. По умолчанию 10.
• .mass( value: number) - это масса пружины. Уменьшение этого значения ускоряет анимацию. По умолчанию 1.
• .stiffness(value: number) определяет, насколько пружина упруга. По умолчанию 100.
• .overshootClamping(value: boolean) определяет, может ли пружина перескочить через заданное положение. По умолчанию false.
• .restDisplacementThreshold( value: number) - смещение, ниже которого пружина будет защелкиваться в заданном положении без дальнейших колебаний. По умолчанию 0.001.
• .restSpeedThreshold( value: number) - скорость в пикселях в секунду, начиная с которой пружина будет защелкиваться в заданное положение без дальнейших колебаний. По умолчанию 2.

Common¶

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

RollInRight.delay(500)
    .randomDelay()
    .withInitialValues({
        transform: [
            { translateX: 100 },
            { rotate: '-45deg' },
        ],
    })
    .withCallback((finished) => {
        console.log(
            `finished without interruptions: ${finished}`
        );
    });

• .delay(durationMs: number) - задержка перед началом анимации (в миллисекундах). По умолчанию равна 0.
• .randomDelay() рандомизирует задержку анимации между 0 и указанной задержкой. Используется 1000 мс, если задержка не была указана.
• .withInitialValues(values: StyleProps) позволяет переопределить начальную конфигурацию анимации.
• .withCallback(callback: (finished: boolean) => void) - обратный вызов, который будет выполнен после завершения анимации. Устанавливает значение finished в true, если анимация завершается без прерываний, и false в противном случае.

Rotate¶

RotateX позволяет создать анимацию вращения.

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

import {
    RotateInDownLeft,
    RotateOutDownLeft,
} from 'react-native-reanimated';

function App() {
    return (
        <Animated.View
            entering={RotateInDownLeft}
            exiting={RotateOutDownLeft}
        />
    );
}

Доступные анимации поворота:

• Ввод: RotateInDownLeft, RotateInDownRight, RotateInUpLeft, RotateInUpRight.
• Выход: RotateOutDownLeft, RotateOutDownRight, RotateOutUpLeft, RotateOutUpRight.

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

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

Time-based¶

Модификаторы, основанные на времени, ретранслируют функцию withTiming.

1

RotateOutDownRight.duration(500).easing(Easing.ease);

• .duration(durationMs: number) - продолжительность анимации (в миллисекундах). По умолчанию равна 300.
• .easing(easingFunction: EasingFunction) - функция easing, определяющая кривую анимации. По умолчанию Easing.inOut(Easing.quad).

Spring-based¶

Модификаторы, основанные на пружинах, ретранслируют функцию withSpring.

1
2
3
4
5
6
7

RotateInUpLeft.springify()
    .damping(30)
    .mass(5)
    .stiffness(10)
    .overshootClamping(false)
    .restDisplacementThreshold(0.1)
    .restSpeedThreshold(5);

• .springify() включает конфигурацию анимации на основе пружин.
• .damping(value: number) определяет, как быстро пружина прекращает движение. Большее значение демпфирования означает, что пружина будет быстрее приходить в состояние покоя. По умолчанию 10.
• .mass( value: number) - это масса пружины. Уменьшение этого значения ускоряет анимацию. По умолчанию 1.
• .stiffness(value: number) определяет, насколько пружина упруга. По умолчанию 100.
• .overshootClamping(value: boolean) определяет, может ли пружина перескочить через заданное положение. По умолчанию false.
• .restDisplacementThreshold( value: number) - смещение, ниже которого пружина будет защелкиваться в заданном положении без дальнейших колебаний. По умолчанию 0.001.
• .restSpeedThreshold( value: number) - скорость в пикселях в секунду, начиная с которой пружина будет защелкиваться в заданное положение без дальнейших колебаний. По умолчанию 2.

Common¶

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

RotateInDownLeft.delay(500)
    .randomDelay()
    .withInitialValues({
        transform: [
            { rotate: '-90deg' },
            { translateX: 100 },
            { translateY: 100 },
        ],
    })
    .withCallback((finished) => {
        console.log(
            `finished without interruptions: ${finished}`
        );
    });

• .delay(durationMs: number) - задержка перед началом анимации (в миллисекундах). По умолчанию равна 0.
• .randomDelay() рандомизирует задержку анимации между 0 и указанной задержкой. Используется 1000 мс, если задержка не была указана.
• .withInitialValues(values: StyleProps) позволяет переопределить начальную конфигурацию анимации.
• .withCallback(callback: (finished: boolean) => void) - обратный вызов, который будет выполнен после завершения анимации. Устанавливает значение finished в true, если анимация завершается без прерываний, и false в противном случае.

Slide¶

SlideX позволяет создать анимацию горизонтально или вертикально движущегося объекта.

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

import {
    SlideInRight,
    SlideOutLeft,
} from 'react-native-reanimated';

function App() {
    return (
        <Animated.View
            entering={SlideInRight}
            exiting={SlideOutLeft}
        />
    );
}

Available slide animations:

• Entering: SlideInRight, SlideInLeft, SlideInUp, SlideInDown
• Exiting: SlideOutRight, SlideOutLeft, SlideOutUp, SlideOutDown

These are the initial values for each animation that can be customized with the withInitialValues modifier.

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

Time-based¶

Модификаторы, основанные на времени, ретранслируют функцию withTiming.

1

SlideOutLeft.duration(500).easing(Easing.ease);

• .duration(durationMs: number) - продолжительность анимации (в миллисекундах). По умолчанию равна 300.
• .easing(easingFunction: EasingFunction) - функция easing, определяющая кривую анимации. По умолчанию Easing.inOut(Easing.quad).

Spring-based¶

Модификаторы, основанные на пружинах, ретранслируют функцию withSpring.

1
2
3
4
5
6
7

SlideInUp.springify()
    .damping(30)
    .mass(5)
    .stiffness(10)
    .overshootClamping(false)
    .restDisplacementThreshold(0.1)
    .restSpeedThreshold(5);

• .springify() включает конфигурацию анимации на основе пружин.
• .damping(value: number) определяет, как быстро пружина прекращает движение. Большее значение демпфирования означает, что пружина будет быстрее приходить в состояние покоя. По умолчанию 10.
• .mass( value: number) - это масса пружины. Уменьшение этого значения ускоряет анимацию. По умолчанию 1.
• .stiffness(value: number) определяет, насколько пружина упруга. По умолчанию 100.
• .overshootClamping(value: boolean) определяет, может ли пружина перескочить через заданное положение. По умолчанию false.
• .restDisplacementThreshold( value: number) - смещение, ниже которого пружина будет защелкиваться в заданном положении без дальнейших колебаний. По умолчанию 0.001.
• .restSpeedThreshold( value: number) - скорость в пикселях в секунду, начиная с которой пружина будет защелкиваться в заданное положение без дальнейших колебаний. По умолчанию 2.

Common¶

1
2
3
4
5
6
7
8

SlideInDown.delay(500)
    .randomDelay()
    .withInitialValues({ transform: [{ translateY: 420 }] })
    .withCallback((finished) => {
        console.log(
            `finished without interruptions: ${finished}`
        );
    });

• .delay(durationMs: number) - задержка перед началом анимации (в миллисекундах). По умолчанию равна 0.
• .randomDelay() рандомизирует задержку анимации между 0 и указанной задержкой. Используется 1000 мс, если задержка не была указана.
• .withInitialValues(values: StyleProps) позволяет переопределить начальную конфигурацию анимации.
• .withCallback(callback: (finished: boolean) => void) - обратный вызов, который будет выполнен после завершения анимации. Устанавливает значение finished в true, если анимация завершается без прерываний, и false в противном случае.

Stretch¶

StretchX позволяет создать анимацию, основанную на масштабировании по оси X или Y.

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

import {
    StretchInX,
    StretchOutY,
} from 'react-native-reanimated';

function App() {
    return (
        <Animated.View
            entering={StretchInX}
            exiting={StretchOutY}
        />
    );
}

Доступные анимации растяжения:

• Ввод: StretchInX, StretchInY.
• Выход: StretchOutX, StretchOutY.

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

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

Time-based¶

Модификаторы, основанные на времени, ретранслируют функцию withTiming.

1

StretchOutX.duration(500).easing(Easing.ease);

• .duration(durationMs: number) - продолжительность анимации (в миллисекундах). По умолчанию равна 300.
• .easing(easingFunction: EasingFunction) - функция easing, определяющая кривую анимации. По умолчанию Easing.inOut(Easing.quad).

Spring-based¶

Модификаторы, основанные на пружинах, ретранслируют функцию withSpring.

1
2
3
4
5
6
7

StretchInX.springify()
    .damping(30)
    .mass(5)
    .stiffness(10)
    .overshootClamping(false)
    .restDisplacementThreshold(0.1)
    .restSpeedThreshold(5);

• .springify() включает конфигурацию анимации на основе пружин.
• .damping(value: number) определяет, как быстро пружина прекращает движение. Большее значение демпфирования означает, что пружина будет быстрее приходить в состояние покоя. По умолчанию 10.
• .mass( value: number) - это масса пружины. Уменьшение этого значения ускоряет анимацию. По умолчанию 1.
• .stiffness(value: number) определяет, насколько пружина упруга. По умолчанию 100.
• .overshootClamping(value: boolean) определяет, может ли пружина перескочить через заданное положение. По умолчанию false.
• .restDisplacementThreshold( value: number) - смещение, ниже которого пружина будет защелкиваться в заданном положении без дальнейших колебаний. По умолчанию 0.001.
• .restSpeedThreshold( value: number) - скорость в пикселях в секунду, начиная с которой пружина будет защелкиваться в заданное положение без дальнейших колебаний. По умолчанию 2.

Common¶

1
2
3
4
5
6
7
8

StretchInY.delay(500)
    .randomDelay()
    .withInitialValues({ transform: [{ scaleY: 0.5 }] })
    .withCallback((finished) => {
        console.log(
            `finished without interruptions: ${finished}`
        );
    });

• .delay(durationMs: number) - задержка перед началом анимации (в миллисекундах). По умолчанию равна 0.
• .randomDelay() рандомизирует задержку анимации между 0 и указанной задержкой. Используется 1000 мс, если задержка не была указана.
• .withInitialValues(values: StyleProps) позволяет переопределить начальную конфигурацию анимации.
• .withCallback(callback: (finished: boolean) => void) - обратный вызов, который будет выполнен после завершения анимации. Устанавливает значение finished в true, если анимация завершается без прерываний, и false в противном случае.

Zoom¶

ZoomX позволяет создать анимацию, основанную на масштабе.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

import { ZoomIn, ZoomOut } from 'react-native-reanimated';

function App() {
    return (
        <Animated.View
            entering={ZoomIn}
            exiting={ZoomOut}
        />
    );
}

Доступные анимации масштабирования:

• Вход: ZoomIn, ZoomInDown, ZoomInEasyDown, ZoomInEasyUp, ZoomInLeft, ZoomInRight, ZoomInRotate, ZoomInUp.
• Выход: ZoomOut, ZoomOutDown, ZoomOutEasyDown, ZoomOutEasyUp, ZoomOutLeft, ZoomOutRight, ZoomOutRotate, ZoomOutUp.

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

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

Time-based¶

Модификаторы, основанные на времени, ретранслируют функцию withTiming.

1

ZoomOutLeft.duration(500).easing(Easing.ease);

• .duration(durationMs: number) - продолжительность анимации (в миллисекундах). По умолчанию равна 300.
• .easing(easingFunction: EasingFunction) - функция easing, определяющая кривую анимации. По умолчанию Easing.inOut(Easing.quad).

Spring-based¶

Модификаторы, основанные на пружинах, ретранслируют функцию withSpring.

1
2
3
4
5
6
7

ZoomInRotate.springify()
    .damping(30)
    .mass(5)
    .stiffness(10)
    .overshootClamping(false)
    .restDisplacementThreshold(0.1)
    .restSpeedThreshold(0.1);

• .springify() включает конфигурацию анимации на основе пружин.
• .damping(value: number) определяет, как быстро пружина прекращает движение. Большее значение демпфирования означает, что пружина будет быстрее приходить в состояние покоя. По умолчанию 10.
• .mass( value: number) - это масса пружины. Уменьшение этого значения ускоряет анимацию. По умолчанию 1.
• .stiffness(value: number) определяет, насколько пружина упруга. По умолчанию 100.
• .overshootClamping(value: boolean) определяет, может ли пружина перескочить через заданное положение. По умолчанию false.
• .restDisplacementThreshold( value: number) - смещение, ниже которого пружина будет защелкиваться в заданном положении без дальнейших колебаний. По умолчанию 0.001.
• .restSpeedThreshold( value: number) - скорость в пикселях в секунду, начиная с которой пружина будет защелкиваться в заданное положение без дальнейших колебаний. По умолчанию 2.

Common¶

1
2
3
4
5
6
7
8

ZoomIn.delay(500)
    .randomDelay()
    .withInitialValues({ transform: [{ scale: 0.5 }] })
    .withCallback((finished) => {
        console.log(
            `finished without interruptions: ${finished}`
        );
    });

• .delay(durationMs: number) - задержка перед началом анимации (в миллисекундах). По умолчанию равна 0.
• .randomDelay() рандомизирует задержку анимации между 0 и указанной задержкой. Используется 1000 мс, если задержка не была указана.
• .withInitialValues(values: StyleProps) позволяет переопределить начальную конфигурацию анимации.
• .withCallback(callback: (finished: boolean) => void) - обратный вызов, который будет выполнен после завершения анимации. Устанавливает значение finished в true, если анимация завершается без прерываний, и false в противном случае.

Совместимость с платформами¶

ССылки¶

• Entering/Exiting animations

Комментарии