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

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

Предыдущий раздел не только научил вас применять общие значения на практике, но и использовать функции withSpring и withTiming для создания анимации. Мы думаем, что теперь вы более чем готовы к более глубокому погружению в настройку анимации!

Reanimated поставляется с тремя встроенными функциями анимации: withTiming, withSpring и withDecay. Пока остановимся на первых двух, а к withDecay вернемся в разделе Handling gestures.

В Reanimated очень легко настраивать поведение функций анимации. Для этого нужно передать объект config во второй параметр функции withTiming или withSpring.

Конфигурирование withTiming

Параметр config функции withTiming имеет два свойства: duration и easing.

1
2
3
4
5
6
7
8
9
import {
    withTiming,
    Easing,
} from 'react-native-reanimated';

withTiming(sv.value, {
    duration: 300,
    easing: Easing.inOut(Easing.quad),
});

Параметр duration достаточно прост, он определяет, за какое время в миллисекундах анимация должна достичь заданного toValue. По умолчанию длительность равна 300 миллисекунд.

Параметр easing позволяет точно настроить анимацию на заданное время. Например, можно сделать так, чтобы анимация начиналась медленно, затем набирала скорость и снова замедлялась к концу. По умолчанию это значение равно Easing.inOut(Easing.quad).

Все это становится понятным, если сравнить linear ослабление с ослаблением по умолчанию.

Reanimated поставляется с несколькими предопределенными функциями смягчения. Вы можете поиграть с ними на интерактивной игровой площадке ниже или ознакомиться с полным справочником withTiming API.

Настройка withSpring

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

В большинстве случаев при работе с пружинами вы будете настраивать одно из этих трех свойств: mass, stiffness (также известная как натяжение) и damping (также известное как трение).

1
2
3
4
5
6
7
import { withSpring } from 'react-native-reanimated';

withSpring(sv.value, {
    mass: 1,
    stiffness: 100,
    damping: 10,
});

Масса пружины влияет на то, насколько трудно заставить объект двигаться и остановить его. Масса добавляет ощущение инерции объекту, который вы пытаетесь сдвинуть с места. На игровом поле видно, что пружина с большей массой движется более "вяло" по сравнению с конфигурацией по умолчанию.

Жесткость влияет на упругость пружины. В качестве примера можно привести разницу между стальной пружиной (с очень высокой жесткостью) и пружиной из мягкого пластика (с низкой жесткостью).

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

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

Резюме

В этом разделе мы узнали, как настраивать функции анимации withTiming и withSpring. Подведем итоги:

  • Обе функции withTiming и withSpring принимают в качестве второго параметра объект config.
  • Поведение withTiming можно настроить с помощью свойств duration и easing. Для удобства работы Reanimated поставляется со встроенным модулем Easing.
  • Некоторые свойства, которые регулируют поведение withSpring, это mass, stiffness и damping.

Что дальше?

В предстоящем разделе вы узнаете, как использовать модификаторы анимации, такие как withSequence и withRepeat. Эти модификаторы позволят нам создавать более сложные и увлекательные анимации.

Ссылки

Комментарии