Собираем анимацию: значение, подписка, кадр

Начнём с привычки. Полоса — вложенный View, ширина которого зависит от состояния: нажали «Отдых» — ширина стала нулём. Чтобы убывание было плавным, в вебе хватает одной строки transition — перенесём её как есть. Через 300 мс спросим у полосы её ширину методом measure: ref в React Native отдаёт не DOM-узел, а нативный компонент, и размеры тот сообщает в колбэк, а не возвращает.

Примеры этой статьи — про кадры, а кадры браузер выдаёт только видимому «экрану примера». Пока тот прокручен за край окна, requestAnimationFrame не вызывается и переход CSS не идёт — пример напечатает не то. Длинный пример запускайте клавишей Enter в поле прогноза: экран примера стоит прямо над ним.

Прогноз: промолчит ли компилятор? И окажется ли полоса через 300 мс на полпути?

const { View, Pressable, Text } = ReactNative;

function RestBar() {
  const [resting, setResting] = React.useState(false);
  const bar = React.useRef<React.ComponentRef<typeof View>>(null);

  React.useEffect(() => {
    if (!resting) return;
    const id = setTimeout(() => {
      // ref здесь — нативный компонент, а не DOM-узел: размеры он отдаёт в колбэк
      bar.current?.measure((x, y, width) => {
        console.log("полоса в пути:", width > 0 && width < 300);
      });
    }, 300);
    return () => clearTimeout(id);
  }, [resting]);

  return (
    <View style={{ padding: 16, gap: 12 }}>
      <View style={{ height: 12, backgroundColor: "#ddd" }}>
        {/* привычка из CSS: объявить переход и просто сменить ширину */}
        <View
          ref={bar}
          style={{
            height: 12,
            width: resting ? 0 : 300,
            backgroundColor: "#e4572e",
            transition: "width 1s linear",
          }}
        />
      </View>
      <Pressable testID="rest" onPress={() => setResting(true)}>
        <Text>Отдых</Text>
      </Pressable>
    </View>
  );
}

mount(<RestBar />);
setTimeout(() => fireEvent.press("rest"), 50);

Компилятор возразил сразу, и возразил дословно: «"transition" не существует в типе "ViewStyle | RecursiveArray<Falsy | ViewStyle>"». А полоса тем не менее поехала: через 300 мс она где-то посередине. Кто прав?

Правы оба, но про разные машины. В предпросмотре работает react-native-web (Platform.OS здесь — "web"): он переводит объект стиля в стиль браузерного элемента и незнакомый ключ не выбрасывает. Его проверка стилей ругается на animation и на сокращения вроде font, а про transition молчит. Дальше дело браузера: движок переходов у него есть, и он честно тянет ширину секунду.

На телефоне браузера нет. Перед отправкой в нативный слой пропсы проходят через список известных атрибутов компонента, и то, чего в списке нет, пропускается одной строкой:

// react-native 0.86, Libraries/ReactNative/ReactFabricPublicInstance/ReactNativeAttributePayload.js
const attributeConfig = validAttributes[propKey];
if (!attributeConfig) {
  continue; // not a valid native prop
}

transition в этом списке нет, и фильтр отбрасывает его молча. Ширина на телефоне станет нулём за один кадр. Выходит, из трёх свидетелей правду про телефон сказал только компилятор с настоящими типами, а предпросмотр соврал в лучшую сторону.

На телефоне иначе: transition, как и любой ключ стиля вне списка атрибутов, до нативного слоя не доезжает. Движение в предпросмотре — заслуга браузера, а не React Native.

Корень провала не в том, что «CSS-переходы не завезли». Переход — договорённость с движком: вы сообщаете конечное значение, а промежуточные досчитывает он. Движка, который досчитывал бы стили, у React Native нет, значит, промежуточные значения придётся досчитывать самим — по одному на кадр.

Досчитывать промежуточные значения — значит много раз в секунду вызывать функцию, которая ставит следующее. Для этого есть requestAnimationFrame, тот же, что в браузере (его место в цикле событий разобрано в статье «Микрозадачи и макрозадачи» части I). В React Native это тоже глобальная функция, и в 0.86 она, как и setTimeout, приходит из самого рантайма, а не из JS-полифила. Колбэк вызывается один раз, перед ближайшим кадром; хотите следующий — заказывайте его изнутри колбэка.

Самое прямое решение — положить долю оставшегося отдыха в состояние экрана и менять её с каждым кадром. Долю считаем от времени, а не от числа кадров: кадр может выпасть, и отдых от этого удлиняться не должен. Рядом с полосой — список подходов, в котором за время отдыха не меняется ничего. Прогноз: сколько раз он перерисуется?

const { View, Text } = ReactNative;

let frames = 0;
let listRenders = 0;

function SetsList() {
  listRenders += 1;
  return <Text>80 кг × 8 · 80 кг × 8 · 85 кг × 6</Text>;
}

function Workout() {
  const [left, setLeft] = React.useState(1);
  React.useEffect(() => {
    const duration = 600;
    // часы свои, а не штамп из колбэка кадра — почему, во врезке ниже
    const start = Date.now();
    let id = requestAnimationFrame(function step() {
      frames += 1;
      // доля от времени, а не от числа кадров: выпавший кадр не растянет отдых
      const t = Math.min((Date.now() - start) / duration, 1);
      setLeft(1 - t);
      if (t < 1) id = requestAnimationFrame(step);
    });
    return () => cancelAnimationFrame(id);
  }, []);
  return (
    <View style={{ padding: 16, gap: 12 }}>
      <View style={{ height: 12, backgroundColor: "#ddd" }}>
        <View style={{ height: 12, width: left * 300, backgroundColor: "#e4572e" }} />
      </View>
      <SetsList />
    </View>
  );
}

mount(<Workout />);
setTimeout(() => {
  console.log("кадров:", frames > 10 ? "больше десяти" : frames);
  console.log("рендеров списка:", listRenders > 10 ? "больше десяти" : listRenders);
}, 1000);

Полоса поехала — на этот раз и на телефоне поехала бы тоже: ширина честно меняется каждый кадр. Но и список перерисовался вместе с ней, с каждым кадром. Для читателя части IV тут нет загадки: состояние лежит в экране, значит, каждое его изменение перерисовывает экран со всеми детьми. Меняется масштаб: не одно нажатие, а шестьдесят изменений в секунду, на экране 120 Гц — сто двадцать. И все эти рендеры идут в JS-потоке, где выполняются и ваши обработчики нажатий, — на телефоне он один на всё приложение.

Обернуть список в memo (часть IV) — значит снять симптом. Причина в другом: значению, которое меняется каждый кадр, не место в состоянии экрана.

Вынесем долю отдыха из экрана в отдельный объект — анимируемое значение. Оно хранит число, умеет его отдать и сменить, а при смене само обходит подписчиков. React о нём не знает; узнаёт только тот компонент, который подписался.

Подписываться будет полоса — лист дерева. Для подписки компонента на внешний источник в React есть useSyncExternalStore, им мы подписывались на состояние сети в статье «Свой хук: логика без разметки» части IV: функция подписки плюс функция чтения. Методы get и subscribe сделаны полями-стрелками не ради красоты — почему, сказано в комментарии.

Кадров пока не будет: значение подвинем руками, в двух тактах — сначала одна смена, потом две подряд. Прогноз: сколько строк «экран» и сколько «полоса»?

const { View, Text } = ReactNative;

type Listener = (value: number) => void;

class AnimValue {
  private value: number;
  private listeners = new Set<Listener>();
  constructor(initial: number) {
    this.value = initial;
  }
  // стрелки-поля, а не методы: хук сравнивает subscribe по ссылке,
  // а такая стрелка одна на объект и не теряет this
  get = (): number => this.value;
  subscribe = (listener: Listener): (() => void) => {
    this.listeners.add(listener);
    return () => this.listeners.delete(listener);
  };
  set(next: number): void {
    // то же сравнение, что у сеттера состояния: не изменилось — никого не будим
    if (Object.is(next, this.value)) return;
    this.value = next;
    this.listeners.forEach((listener) => listener(next));
  }
}

const rest = new AnimValue(1);
let notified = 0;
rest.subscribe(() => {
  notified += 1;
});

interface BarProps {
  value: AnimValue;
}

function Bar({ value }: BarProps) {
  // функция подписки и функция чтения — как в «Своём хуке» части IV
  const left = React.useSyncExternalStore(value.subscribe, value.get);
  console.log("полоса:", Math.round(left * 100) + "%");
  return (
    <View style={{ height: 12, backgroundColor: "#ddd" }}>
      <View style={{ height: 12, width: left * 300, backgroundColor: "#e4572e" }} />
    </View>
  );
}

function Workout() {
  console.log("экран: рендер");
  return (
    <View style={{ padding: 16, gap: 12 }}>
      <Bar value={rest} />
      <Text>80 кг × 8 · 80 кг × 8 · 85 кг × 6</Text>
    </View>
  );
}

mount(<Workout />);
setTimeout(() => rest.set(0.5), 50);
setTimeout(() => {
  rest.set(0.3);
  rest.set(0.1);
}, 100);
setTimeout(() => console.log("уведомлений:", notified), 150);

Экран отрисовался один раз — при монтировании, и больше его не трогали: изменения шли мимо него, прямо в полосу. А строк «полоса» после первой две, хотя смен три. Две смены подряд в одном такте React склеил в одну отрисовку: подписчик React получил оба уведомления, но к моменту отрисовки значение уже было 10%, и промежуточные 30% рисовать не стали. Для анимации это ровно то, что нужно: на экран попадает последнее значение, а не каждое промежуточное.

Уведомлений же три — по числу смен. Само значение ничего не склеивает: о кадрах и отрисовках оно не знает, это забота того, кто подписан.

Слово «такт» здесь буквальное: всё, что выполнилось подряд в одной задаче, до первой паузы. По той же причине два fireEvent подряд в одном такте дают одну отрисовку.

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

Возвращает она функцию остановки — отмену следующего кадра. Форма выбрана нарочно: такую функцию можно прямо вернуть из эффекта как уборку, и уход экрана остановит анимацию. Класс AnimValue из прошлого раздела уехал в подложку примера.

Прогноз: сколько раз за время отдыха отрисуется экран и сколько — полоса?

// AnimValue из прошлого раздела лежит в подложке примера
declare class AnimValue {
  constructor(initial: number);
  get: () => number;
  set(next: number): void;
  subscribe: (listener: (value: number) => void) => () => void;
}
const { View, Text } = ReactNative;

function animate(value: AnimValue, to: number, duration: number, onEnd?: () => void): () => void {
  const from = value.get();
  const start = Date.now();
  let id = requestAnimationFrame(function step() {
    const t = Math.min((Date.now() - start) / duration, 1);
    value.set(from + (to - from) * t);
    if (t < 1) id = requestAnimationFrame(step);
    else onEnd?.();
  });
  // остановить — значит не заказать следующий кадр: значение застынет, где было
  return () => cancelAnimationFrame(id);
}

const rest = new AnimValue(1);
let changes = 0;
let barRenders = 0;
let screenRenders = 0;
rest.subscribe(() => {
  changes += 1;
});

interface BarProps {
  value: AnimValue;
}

function Bar({ value }: BarProps) {
  barRenders += 1;
  const left = React.useSyncExternalStore(value.subscribe, value.get);
  return (
    <View style={{ height: 12, backgroundColor: "#ddd" }}>
      <View style={{ height: 12, width: left * 300, backgroundColor: "#e4572e" }} />
    </View>
  );
}

function Workout() {
  screenRenders += 1;
  // animate возвращает остановку — она же уборка эффекта
  React.useEffect(() => animate(rest, 0, 600, () => console.log("отдых окончен")), []);
  return (
    <View style={{ padding: 16, gap: 12 }}>
      <Bar value={rest} />
      <Text>80 кг × 8 · 80 кг × 8 · 85 кг × 6</Text>
    </View>
  );
}

mount(<Workout />);
setTimeout(() => {
  console.log("изменений значения:", changes > 10 ? "больше десяти" : changes);
  console.log("рендеров полосы — по одному на изменение:", barRenders - 1 === changes);
  console.log("рендеров экрана:", screenRenders);
}, 900);

Сравните с прошлым разделом: там в состоянии экрана лежала та же доля, и на каждый кадр приходился рендер экрана со всеми детьми. Сейчас на каждый кадр — рендер одного маленького компонента из двух View.

Кадры заказывает сама анимация, а не экран. Уйдёт экран без уборки — цикл продолжит крутиться в JS-потоке и будить подписчиков, которых уже никто не видит. Третья задача ниже — ровно про это.

Настоящий Animated — следующая статья, но узнать в нём нашу миниатюру можно уже сейчас. Его значение, Animated.Value, — такое же число с подписчиками. Прогноз: сколько строк «слушатель» напечатается?

const { Animated } = ReactNative;

const rest = new Animated.Value(1);
const id = rest.addListener(({ value }) => console.log("слушатель:", value));
rest.setValue(0.5);
rest.setValue(0.5);
// публичного чтения у Animated.Value нет: значение отдают колбэком
rest.stopAnimation((value) => console.log("прочитали через stopAnimation:", value));
rest.removeListener(id);
rest.setValue(0);
console.log("подписка —", typeof id);

Отличий от нашей миниатюры четыре. Слушатель получает не число, а объект { value }. Подписка возвращает не функцию отписки, а строку-номер, и отписываются по нему через removeListener. Сравнения в setValue нет: одно и то же 0.5 разбудило слушателя дважды. И публичного чтения нет — значение отдают только колбэком, например в stopAnimation. Последнее не небрежность: с useNativeDriver настоящее значение живёт в нативном потоке, и синхронно спросить его из JS нельзя, — об этом третья статья главы.

Последняя строка таблицы в предпросмотре совпадает буквально: Animated.View в react-native-web на каждый кадр JS-анимации перерисовывает сам себя через собственный useReducer — ровно как наша полоса. На телефоне React Native 0.86 идёт дальше. Флаг shouldUseSetNativePropsInFabric там включён по умолчанию, и кадр кладёт новые значения прямо в нативный компонент через setNativeProps, мимо рендера React. Сам React узнаёт о них одним обновлением через 48 мс после последнего кадра — чтобы его дерево не разошлось с экраном.

На телефоне иначе: Animated.View на JS-анимации не перерисовывает себя каждый кадр, а правит нативный компонент напрямую. Наша полоса и предпросмотр перерисовывают лист — это дороже, но подписка устроена так же.

Что осталось за бортом миниатюры: плавность хода (первая задача ниже), пружина, связки анимаций и превращение одного числа в ширину, угол или цвет — это timing, spring и interpolate в следующей статье. А то, что можно не перерисовывать даже лист, потому что кадр считается вовсе не в JS, — статья про useNativeDriver.

// миниатюра статьи — в таком виде она едет в подложку следующих статей главы
class AnimValue {
  constructor(initial) {
    this.value = initial;
    this.listeners = new Set();
    // стрелки-поля: useSyncExternalStore сравнивает subscribe по ссылке
    this.get = () => this.value;
    this.subscribe = (listener) => {
      this.listeners.add(listener);
      return () => this.listeners.delete(listener);
    };
  }
  set(next) {
    if (Object.is(next, this.value)) return;
    this.value = next;
    this.listeners.forEach((listener) => listener(next));
  }
}

function animate(value, to, duration, onEnd) {
  const from = value.get();
  // свои часы, как у TimingAnimation: штамп кадра бывает старым
  const start = Date.now();
  let id = requestAnimationFrame(function step() {
    const t = Math.min((Date.now() - start) / duration, 1);
    value.set(from + (to - from) * t);
    if (t < 1) id = requestAnimationFrame(step);
    else if (onEnd) onEnd();
  });
  return () => cancelAnimationFrame(id);
}