Animated: timing, spring, interpolate

Animated.timing(значение, настройки) возвращает анимацию, а её start запускает тот самый цикл, который мы собрали: свои часы на Date.now(), доля прошедшего времени, следующий кадр через requestAnimationFrame. Настройки называются знакомо: toValue — куда, duration — за сколько миллисекунд, easing — как (та самая функция из первой задачи прошлой статьи). Обязательна ещё одна, useNativeDriver. Её смысл — тема следующей статьи, пока везде false. Забыть её не дадут типы, а если всё же пропустить, react-native-web напишет в консоль «Animated: `useNativeDriver` was not specified. This is a required option and must be explicitly set to `true` or `false`».

Как и в прошлой статье: кадры идут, только пока экран примера виден. Запускайте примеры с анимацией клавишей Enter из поля прогноза — экран стоит прямо над ним.

Наш animate из подложки и Animated.timing везут по значению от 0 до 1 за одну и ту же секунду и стартуют в одном такте. Прогноз: кто впереди на четверти времени, кто — на трёх четвертях и кто доедет первым?

// AnimValue и animate из прошлой статьи лежат в подложке примера
declare class AnimValue {
  constructor(initial: number);
  get: () => number;
  set(next: number): void;
  subscribe: (listener: (value: number) => void) => () => void;
}
declare function animate(value: AnimValue, to: number, duration: number, onEnd?: () => void): () => void;
const { Animated } = ReactNative;

const ours = new AnimValue(0);
const theirs = new Animated.Value(0);
let theirsNow = 0;
// публичного чтения у Animated.Value нет — последнее значение сохраняет слушатель
theirs.addListener(({ value }) => {
  theirsNow = value;
});

animate(ours, 1, 1000, () => console.log("animate: доехал"));
Animated.timing(theirs, { toValue: 1, duration: 1000, useNativeDriver: false }).start(({ finished }) => {
  console.log("timing: доехал, finished =", finished);
});

const compare = (moment: string) =>
  console.log(moment + ":", theirsNow < ours.get() ? "timing позади" : "timing впереди");
setTimeout(() => compare("четверть времени"), 250);
setTimeout(() => compare("три четверти"), 750);

На четверти времени timing позади, на трёх четвертях — впереди, а доезжают оба в последнем кадре секунды: наш — строкой раньше, потому что его кадр заказан раньше. Длительность одна, форма пути разная. У animate доля пути равна доле времени, а timing без easing пропускает её через S-образную кривую: медленный разгон, быстрая середина, мягкая остановка. Это умолчание записано в исходнике прямо:

// react-native 0.86, Libraries/Animated/animations/TimingAnimation.js
function easeInOut() {
  if (!_easeInOut) {
    const Easing = require('../Easing').default;
    _easeInOut = Easing.inOut(Easing.ease);
  }
  return _easeInOut;
}
// …в конструкторе TimingAnimation:
this._easing = config.easing ?? easeInOut();
this._duration = config.duration ?? 500;

Для таймера отдыха такое умолчание вредно: кольцо, которое трогается нехотя и тормозит у конца, врёт о времени. Поэтому кольцу — easing: Easing.linear, а S-кривая остаётся тому, что должно выглядеть мягко: появлению, сдвигу, толчку. Готовые кривые лежат в модуле Easing: linear, ease, quad, cubic, bezier(…) и обёртки in, out, inOut.

Второе отличие — как сообщают о конце. Колбэк start получает не пустой вызов, а объект { finished }: true, если анимация дошла сама, и false, если её прервали. Прервать можно, даже не вызывая stop: у значения идёт не больше одной анимации за раз, и новая останавливает прежнюю. На этом держится кнопка «+30 с»: отдых убывает, а нажатие запускает новую анимацию того же значения. Прогноз: в каком порядке появятся три строки?

const { Animated, Easing } = ReactNative;

const rest = new Animated.Value(1);
Animated.timing(rest, { toValue: 0, duration: 1000, easing: Easing.linear, useNativeDriver: false }).start(
  ({ finished }) => console.log("отдых:", finished),
);

setTimeout(() => {
  // «+30 с»: новая анимация того же значения, о прежней ни слова
  Animated.timing(rest, { toValue: 1, duration: 200, useNativeDriver: false }).start(({ finished }) =>
    console.log("добавка:", finished),
  );
  console.log("добавку запустили");
}, 300);

Прежняя анимация получила finished: false, причём синхронно — внутри вызова start новой, раньше строки, которая стоит после него. Молча значение её не бросило: колбэк прерванной анимации вызывается всегда, и в разделе про связки на этом флаге держится весь сценарий.

В подложке этого примера и всех следующих, где анимацию прерывают, стоит строка var global = globalThis. Останавливая анимацию, react-native-web зовёт global.cancelAnimationFrame: имя global в React Native есть, а в браузере его нет. Без этой строки прерывание падает с ReferenceError, но в выводе вы увидите не её, а «Uncaught — ошибка выброшена из подключённой библиотеки…»: ошибка брошена внутри react-native-web, и браузер прячет её текст. На телефоне строка не нужна.

Кольцо отдыха управляется одним числом — долей прошедшего отдыха от 0 до 1. Но на экран нужно не оно, а углы. Кольцо без SVG собирается из двух половин: в каждой за окном в полкруга крутится дуга в полкруга, и видно ровно то, что успело въехать в окно (устройство — в углублении ниже). Правая половина заполняется за первую половину отдыха, левая — за вторую.

Число в угол превращает interpolate: inputRange — точки входа, outputRange — что им соответствует на выходе, между точками — прямая. На выходе можно писать и строки с единицами вроде "180deg", и цвета. Результат — не число, а новый анимируемый узел: он пересчитывается сам, когда меняется исходное значение, и его можно отдать в стиль Animated.View, как само значение.

Анимации пока нет: поставим долю 0.25, затем 1 — через setValue. Прогноз: какие углы напечатают половины? Посмотрите и на экран примера.

const { Animated, View, StyleSheet } = ReactNative;

const SIZE = 120;
const HALF = SIZE / 2;

const progress = new Animated.Value(0);
// правая половина заполняется за первую половину отдыха, левая — за вторую
const rightTurn = progress.interpolate({ inputRange: [0, 0.5], outputRange: ["0deg", "180deg"] });
const leftTurn = progress.interpolate({ inputRange: [0.5, 1], outputRange: ["0deg", "180deg"] });
rightTurn.addListener(({ value }) => console.log("правая:", value));
leftTurn.addListener(({ value }) => console.log("левая:", value));

interface HalfProps {
  turn: typeof rightTurn;
  side: "left" | "right";
}

// окно в полкруга, за ним крутится дуга в полкруга: что вне окна, того не видно
function Half({ turn, side }: HalfProps) {
  const right = side === "right";
  return (
    <View style={[styles.window, { left: right ? HALF : 0 }]}>
      <Animated.View style={[styles.turner, { left: right ? -HALF : 0, transform: [{ rotate: turn }] }]}>
        <View style={right ? styles.arcLeft : styles.arcRight} />
      </Animated.View>
    </View>
  );
}

const arc = { position: "absolute", top: 0, width: HALF, height: SIZE, borderWidth: 12, borderColor: "#e4572e" } as const;
const styles = StyleSheet.create({
  box: { width: SIZE, height: SIZE, margin: 16 },
  track: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0, borderRadius: HALF, borderWidth: 12, borderColor: "#ddd" },
  window: { position: "absolute", top: 0, width: HALF, height: SIZE, overflow: "hidden" },
  turner: { position: "absolute", top: 0, width: SIZE, height: SIZE },
  arcLeft: { ...arc, left: 0, borderRightWidth: 0, borderTopLeftRadius: HALF, borderBottomLeftRadius: HALF },
  arcRight: { ...arc, left: HALF, borderLeftWidth: 0, borderTopRightRadius: HALF, borderBottomRightRadius: HALF },
});

mount(
  <View style={styles.box}>
    <View style={styles.track} />
    <Half turn={rightTurn} side="right" />
    <Half turn={leftTurn} side="left" />
  </View>,
);
setTimeout(() => progress.setValue(0.25), 50);
setTimeout(() => progress.setValue(1), 100);

На четверти правая половина честно повернулась на 90°, а левая — на −90°, хотя её отрезок ещё не начинался. На экране это видно: дуга занимает не четверть кольца, а половину, — лишнюю четверть нарисовала левая, провернувшись в обратную сторону. А в конце правая ушла на 360°: дуга сделала полный оборот, вернулась за край окна, и правая половина кольца опустела.

Дело в том, что interpolate делает за краем inputRange. По умолчанию extrapolate равен "extend": прямая продолжается за крайние точки, и доля 0.25 для отрезка [0.5, 1] даёт законные −90°. Половине кольца нужен "clamp": за краем отрезка выход стоит на крайнем значении. Допишите extrapolate: "clamp" обеим половинам и запустите снова: на четверти левая скажет 0deg, в конце правая — 180deg, и кольцо станет честным.

Край можно задать и с одной стороны: extrapolateLeft и extrapolateRight перекрывают общий extrapolate.

Слушатель у interpolate срабатывает, только пока узел кто-то рисует. Узел, не отданный ни одному Animated.View, к исходному значению не подцеплен, и его addListener молчит: значение будит только подцепившихся детей. Так в предпросмотре, и так же в исходнике React Native 0.86.

Кольцо с clamp уехало в подложку: дальше оно называется Ring и принимает одно значение progress.

Когда отдых кончился, кольцо должно не просто замереть, а толкнуться: так приложение говорит «пора». Для толчков у Animated есть spring. Длительности у пружины нет вовсе — в её настройках нет поля duration. Вместо часов — затухающие колебания груза на пружине: жёсткость stiffness, трение damping, масса mass. Кадр за кадром пружина считает, где сейчас груз, и останавливается сама, когда и отклонение от цели, и скорость стали не больше тысячной.

Задают одну из трёх групп: stiffness/damping/mass, tension/friction или bounciness/speed. Смешивать их нельзя — пружина бросит ошибку при старте. Без настроек берутся tension: 40 и friction: 7.

Подвинем долю кольца пружиной от 0.2 к 0.6. Прогноз: окажется ли доля хоть раз больше 0.6? И на каком значении пружина остановится?

// кольцо с clamp и строка про global — в подложке примера
declare function Ring(props: RingProps): React.ReactNode;
interface RingProps {
  progress: InstanceType<typeof ReactNative.Animated.Value>;
}
const { Animated } = ReactNative;

const progress = new Animated.Value(0.2);
let peak = 0;
let last = 0;
progress.addListener(({ value }) => {
  peak = Math.max(peak, value);
  last = value;
});

mount(<Ring progress={progress} />);
setTimeout(() => {
  Animated.spring(progress, { toValue: 0.6, useNativeDriver: false }).start(({ finished }) => {
    console.log("остановилась сама:", finished);
    console.log("перелетела цель:", peak > 0.6);
    console.log("последнее значение:", last);
  });
}, 300);

Пружина перелетела цель и вернулась. Перелёт невелик: доля доходит примерно до 0.615, на кольце это около пяти градусов. При умолчаниях у неё коэффициент затухания около 0.72 — меньше единицы, значит, колебание будет. Остановилась она ровно на 0.6: на последнем кадре SpringAnimation ставит значение точно в цель, чтобы не остался хвост вроде 0.5999.

Перелёт — главное, что надо помнить, отдавая пружине значение, из которого что-то считается. Кольцо его пережило благодаря clamp: правая половина стоит на своих 180°, куда бы ни улетела доля. А полоса шириной доля × 300 на перелёте вылезла бы за дорожку. Если перелёт не нужен вовсе, есть overshootClamping: true: пружина заканчивается на первом кадре за целью и ставит значение ровно в цель — но сам этот кадр слушатели всё же получают.

Пружину, в отличие от timing, можно перенаправить на лету без рывка: новая spring того же значения подхватывает скорость прерванной — SpringAnimation.start читает её у предыдущей анимации. Поэтому пружины любят жесты, о них четвёртая статья главы.

Соберём таймер целиком: кольцо заполняется за время отдыха, потом три раза бьётся пульс. Можно цеплять шаги колбэками — start(() => следующий.start()), — но у Animated есть готовые связки. Animated.sequence([…]) запускает анимации по очереди: следующая стартует из колбэка предыдущей. Animated.loop(анимация, { iterations }) повторяет одну анимацию, а без iterations — бесконечно. Связка сама тоже анимация, с start и stop, поэтому связки вкладываются друг в друга.

Пульс — масштаб всего кольца, transform: [{ scale: pulse }]. Прогноз: в каком порядке появятся строки и сколько ударов насчитает слушатель пульса?

// кольцо с clamp и строка про global — в подложке примера
declare function Ring(props: RingProps): React.ReactNode;
interface RingProps {
  progress: InstanceType<typeof ReactNative.Animated.Value>;
}
const { Animated, Easing } = ReactNative;

const progress = new Animated.Value(0);
const pulse = new Animated.Value(1);
let beats = 0;
let pulseSeen = false;
progress.addListener(({ value }) => {
  if (value === 1) console.log("кольцо полное");
});
pulse.addListener(({ value }) => {
  if (!pulseSeen) console.log("пульс тронулся");
  pulseSeen = true;
  // удар кончается, когда масштаб вернулся ровно к 1
  if (value === 1) beats += 1;
});

const rest = Animated.sequence([
  Animated.timing(progress, { toValue: 1, duration: 800, easing: Easing.linear, useNativeDriver: false }),
  Animated.loop(
    Animated.sequence([
      Animated.timing(pulse, { toValue: 1.15, duration: 150, useNativeDriver: false }),
      Animated.timing(pulse, { toValue: 1, duration: 150, useNativeDriver: false }),
    ]),
    { iterations: 3 },
  ),
]);

mount(
  <Animated.View style={{ alignSelf: "flex-start", transform: [{ scale: pulse }] }}>
    <Ring progress={progress} />
  </Animated.View>,
);
rest.start(({ finished }) => console.log("отдых окончен:", finished, "· ударов:", beats));

Внутри loop — не просто повтор. Перед каждым кругом он сбрасывает анимацию:

// react-native 0.86, Libraries/Animated/AnimatedImplementation.js — Animated.loop
{iterations = -1, resetBeforeIteration = true}: LoopAnimationConfig = {},
// …
const restart = function (result: EndResult = {finished: true}): void {
  if (
    isFinished ||
    iterationsSoFar === iterations ||
    result.finished === false
  ) {
    callback && callback(result);
  } else {
    iterationsSoFar++;
    resetBeforeIteration && animation.reset();
    animation.start(restart, iterations === -1);
  }
};

reset() у простой анимации возвращает значению то, с чего оно начинало жизнь, — число из new Animated.Value(…), и возвращает молча, без слушателей. Для пульса «вверх — вниз» это незаметно: круг и так кончается там, где начинался. А петля из одного шага «вверх» перед каждым кругом прыгала бы вниз — это вторая задача.

Отдых можно пропустить. stop() у связки останавливает текущий шаг, тот сообщает finished: false, и sequence, получив его, дальше не идёт: колбэк связки вызывается с тем же false, а оставшиеся шаги не стартуют вовсе. Прогноз: что напечатает колбэк отдыха после «Пропустить», был ли толчок и где встанет кольцо?

// кольцо с clamp и строка про global — в подложке примера
declare function Ring(props: RingProps): React.ReactNode;
interface RingProps {
  progress: InstanceType<typeof ReactNative.Animated.Value>;
}
const { Animated, Easing, View, Pressable, Text } = ReactNative;

const progress = new Animated.Value(0);
const pulse = new Animated.Value(1);
let pulseMoved = false;
pulse.addListener(() => {
  pulseMoved = true;
});

const rest = Animated.sequence([
  Animated.timing(progress, { toValue: 1, duration: 1000, easing: Easing.linear, useNativeDriver: false }),
  Animated.timing(pulse, { toValue: 1.15, duration: 150, useNativeDriver: false }),
]);
rest.start(({ finished }) => console.log("отдых окончен:", finished));

mount(
  <View>
    <Animated.View style={{ alignSelf: "flex-start", transform: [{ scale: pulse }] }}>
      <Ring progress={progress} />
    </Animated.View>
    <Pressable testID="skip" onPress={() => rest.stop()}>
      <Text>Пропустить</Text>
    </Pressable>
  </View>,
);
setTimeout(() => fireEvent.press("skip"), 400);
setTimeout(() => {
  progress.stopAnimation((value) => console.log("кольцо застыло посередине:", value > 0 && value < 1));
  console.log("толчок был:", pulseMoved);
}, 1500);

Значение застыло там, где его застали, — никакого возврата в начало, это делает только reset(). Толчка не было: до второго шага связка не дошла. Сбросить кольцо после пропуска — отдельное решение, и принимать его приходится в колбэке, по finished.

Есть и второй путь к остановке, о котором в прошлой статье было сказано словами. Когда последний Animated.View, рисующий значение, уходит с экрана, узлы отцепляются, и значение останавливает свою анимацию само: в исходнике 0.86 его __detach вызывает stopAnimation(). Проверим: закроем экран с кольцом посреди отдыха.

// кольцо с clamp и строка про global — в подложке примера
declare function Ring(props: RingProps): React.ReactNode;
interface RingProps {
  progress: InstanceType<typeof ReactNative.Animated.Value>;
}
const { Animated, Easing, View, Pressable, Text } = ReactNative;

const progress = new Animated.Value(0);
let last = 0;
progress.addListener(({ value }) => {
  last = value;
});

function RestScreen() {
  React.useEffect(() => {
    // старт без уборки нарочно: смотрим, остановит ли Animated сам
    Animated.timing(progress, { toValue: 1, duration: 1000, easing: Easing.linear, useNativeDriver: false }).start(
      ({ finished }) => console.log("отдых:", finished),
    );
  }, []);
  return <Ring progress={progress} />;
}

function App() {
  const [open, setOpen] = React.useState(true);
  const close = () => {
    setOpen(false);
    console.log("закрыли");
  };
  return (
    <View>
      {open && <RestScreen />}
      <Pressable testID="close" onPress={close}>
        <Text>Закрыть</Text>
      </Pressable>
    </View>
  );
}

mount(<App />);
setTimeout(() => fireEvent.press("close"), 300);
setTimeout(() => console.log("кольцо дошло до конца:", last === 1), 1500);

Сначала закончился обработчик нажатия, затем React убрал экран с кольцом — и в этот момент анимация получила finished: false. Кадров дальше не было, кольцо до конца не дошло, хотя эффект уборки не написан. Отсюда правило: анимацию, которую рисует один экран, отдельно останавливать не нужно. Но только если значение больше никто не рисует: значение, общее для двух экранов, — скажем, кольцо в шапке и на экране отдыха, — будет крутить кадры, пока жив второй. Тогда остановку отдают эффекту, как в третьей задаче прошлой статьи: return () => animation.stop().

В React Native 0.86 значение в компоненте заводят хуком useAnimatedValue(0) — внутри это useRef, который создаёт Animated.Value один раз на жизнь компонента. В типах хук есть, а в react-native-web 0.21 его нет: в предпросмотре вызов падает с «TypeError: useAnimatedValue is not a function». Поэтому примеры держат значения на уровне модуля, а в компоненте предпросмотра значение заводят так же, как внутри хука: useRef(null) и new Animated.Value(0) только при первом рендере, пока ref пуст.

// Кольцо таймера отдыха из статьи «Animated: timing, spring, interpolate».
// Две половины: в каждой за окном в полкруга крутится дуга в полкруга.
// ReactNative и React читаются при отрисовке: подложка грузится раньше них.
function Ring(props) {
  var RN = ReactNative;
  var h = React.createElement;
  var SIZE = 120;
  var HALF = SIZE / 2;
  var progress = props.progress;
  var turns = React.useMemo(function () {
    // clamp: вне своего отрезка половина стоит, а не докручивается дальше
    var turn = function (from, to) {
      return progress.interpolate({ inputRange: [from, to], outputRange: ["0deg", "180deg"], extrapolate: "clamp" });
    };
    return { right: turn(0, 0.5), left: turn(0.5, 1) };
  }, [progress]);
  var arc = { position: "absolute", top: 0, width: HALF, height: SIZE, borderWidth: 12, borderColor: "#e4572e" };
  var half = function (right) {
    return h(
      RN.View,
      { style: { position: "absolute", top: 0, left: right ? HALF : 0, width: HALF, height: SIZE, overflow: "hidden" } },
      h(
        RN.Animated.View,
        {
          style: {
            position: "absolute",
            top: 0,
            left: right ? -HALF : 0,
            width: SIZE,
            height: SIZE,
            transform: [{ rotate: right ? turns.right : turns.left }],
          },
        },
        h(RN.View, {
          style: right
            ? Object.assign({}, arc, { left: 0, borderRightWidth: 0, borderTopLeftRadius: HALF, borderBottomLeftRadius: HALF })
            : Object.assign({}, arc, { left: HALF, borderLeftWidth: 0, borderTopRightRadius: HALF, borderBottomRightRadius: HALF }),
        }),
      ),
    );
  };
  return h(
    RN.View,
    { style: { width: SIZE, height: SIZE, margin: 16 } },
    h(RN.View, { style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0, borderRadius: HALF, borderWidth: 12, borderColor: "#ddd" } }),
    half(true),
    half(false),
  );
}