useNativeDriver: два потока

Во всех примерах главы стояло useNativeDriver: false. Переключим кольцо из прошлой статьи на true — само кольцо лежит в подложке — и запустим заполнение дважды подряд. Прогноз: будет ли ошибка, доедет ли кольцо и сколько строк напечатает сам Animated?

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

// кольцо с 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 fill = (duration: number) =>
  Animated.timing(progress, { toValue: 1, duration, easing: Easing.linear, useNativeDriver: true });

mount(<Ring progress={progress} />);
const first = fill(600);
console.log("анимацию создали, стартуем");
first.start(({ finished }) => {
  console.log("кольцо полное:", finished);
  progress.setValue(0);
  fill(300).start(() => console.log("и второй раз доехало"));
});

Ошибки нет, кольцо доехало оба раза, а в выводе появилось длинное предупреждение — одно, хотя нативный драйвер просили дважды: флаг _warnedMissingNativeAnimated в модуле NativeAnimatedHelper взводится после первого раза, и до перезагрузки страницы строка больше не повторится. И пришла она не при вызове Animated.timing, а после строки, напечатанной между созданием и стартом: в предпросмотре объект анимации строится внутри start(), и его конструктор спрашивает shouldUseNativeDriver. Прочитаем текст по частям.

// react-native-web 0.21.2, dist/vendor/react-native/TurboModule/TurboModuleRegistry.js
export function get(name) {
  return null;
}

Текст не сочинён для веба. В React Native 0.86 функция shouldUseNativeDriver печатает дословно то же и лишь промолчит под Jest. На телефоне вы его не увидите — модуль там есть. А в веб-версии приложения на Expo увидите: она тоже работает на react-native-web, и в его копии никакой проверки сборки вокруг этой строки нет. Поэтому в коде, который собирается и для веба, флаг часто пишут так: useNativeDriver: Platform.OS !== "web".

На телефоне иначе: нативный модуль анимаций в React Native 0.86 есть всегда, и useNativeDriver: true действительно отдаёт кадры другому потоку. В предпросмотре флаг принимается, предупреждает и ничего не меняет.

Зачем вообще отдавать кадры. Для анимации в приложении важны два потока. JS-поток выполняет ваш код — рендеры, обработчики нажатий, разбор ответов — и при useNativeDriver: false ещё и каждый кадр: считает долю времени, пропускает её через easing и interpolate и отправляет новые пропсы нативному компоненту (через setNativeProps, как сказано в первой статье главы). Главный поток рисует интерфейс и принимает касания. Пока JS-поток свободен, разницы не видно. Она появляется, когда он занят.

Займём его. Анимация идёт 800 мс, на 200-й миллисекунде JS-поток на 400 мс уходит в тяжёлую работу. Слушатель меряет самую длинную паузу между кадрами. Опыт ставится дважды: с false и с true. Прогноз: чем кончится второй прогон в предпросмотре?

const { Animated, Easing } = ReactNative;

// тяжёлая работа в JS-потоке: разбор большого ответа, рендер длинного списка
function busy(ms: number) {
  const end = Date.now() + ms;
  while (Date.now() < end) {}
}

function longestPause(native: boolean, done: () => void) {
  const value = new Animated.Value(0);
  let last = Date.now();
  let longest = 0;
  value.addListener(() => {
    longest = Math.max(longest, Date.now() - last);
    last = Date.now();
  });
  Animated.timing(value, { toValue: 1, duration: 800, easing: Easing.linear, useNativeDriver: native }).start(() => {
    console.log("useNativeDriver " + native + ": самая длинная пауза", longest > 300 ? "больше 300 мс" : "меньше 300 мс");
    done();
  });
  setTimeout(() => busy(400), 200);
}

longestPause(false, () => longestPause(true, () => {}));

Оба прогона простояли дольше 300 мс. Предупреждение не соврало: с true в предпросмотре работает тот же JS-цикл, и занятый поток останавливает его так же. Будь на экране кольцо, оно замерло бы в обоих прогонах.

На телефоне второй прогон разойдётся с первым, только не в консоли. С useNativeDriver: true кадры считает главный поток: на iOS — по сигналу CADisplayLink в RCTNativeAnimatedNodesManager (метод stepAnimations:), на Android — в колбэке кадра ReactChoreographer из NativeAnimatedModule.kt. JS-поток стоит, кольцо едет. А слушатель простоял бы и там: он живёт в JS, значения ему приносят события onAnimatedValueUpdate, и они ждут, пока поток освободится. Замер из JS видит JS-поток — и ничего больше.

Главный поток JavaScript не выполняет. Значит, отдать ему «функцию анимации» нельзя — только описание, которое нативный код поймёт сам. Посмотрим, как в описание превращается timing. Его ход задаёт easing — произвольная функция JS: Easing.out(Easing.cubic) или ваш easeOut из первой задачи первой статьи главы. Выполнить её натив не может, поэтому React Native вычисляет её заранее, по значению на каждый кадр 60 Гц, и отправляет массив чисел.

Соберём это сами. toFrames строит массив, а граница между потоками в нашей модели — JSON.stringify и обратно. Прогноз: сколько кадров у секундной анимации, что лежит на середине, доедет ли easing — и сколько чисел понадобится таймеру отдыха на 90 секунд?

const { Easing } = ReactNative;
type EasingFn = (t: number) => number;

// натив не выполнит функцию JS, поэтому её значения считают заранее,
// по одному на кадр 60 Гц, и отправляют массив
function toFrames(easing: EasingFn, duration: number): number[] {
  const count = Math.round(duration / (1000 / 60));
  const frames: number[] = [];
  for (let i = 0; i < count; i++) frames.push(easing(i / count));
  frames.push(easing(1));
  return frames;
}

const easing = Easing.out(Easing.cubic);
const config = { type: "frames", frames: toFrames(easing, 1000), toValue: 1, easing };
// граница потоков в нашей модели
const arrived = JSON.parse(JSON.stringify(config));
console.log("кадров:", arrived.frames.length);
console.log("на середине:", arrived.frames[30]);
console.log("easing доехал:", "easing" in arrived);
console.log("отдых на 90 с:", toFrames(easing, 90000).length, "чисел");

Кадров 61: шестьдесят интервалов и отдельно конечная точка easing(1), чтобы анимация кончалась ровно в цели. На середине 0.875 — это easing(0.5) кубической кривой, посчитанный ещё в JS. Функция через границу не прошла — доезжает только то, что выражается данными, — но она и не нужна: всё, что она могла сказать, уже лежит в массиве. Цена видна в последней строке: полторы минуты отдыха — 5401 число, посчитанное в момент старта.

toFrames не придуман — это пересказ настоящего метода:

// react-native 0.86, Libraries/Animated/animations/TimingAnimation.js
__getNativeAnimationConfig() {
  const frameDuration = 1000.0 / 60.0;
  const frames = [];
  const numFrames = Math.round(this._duration / frameDuration);
  for (let frame = 0; frame < numFrames; frame++) {
    frames.push(this._easing(frame / numFrames));
  }
  frames.push(this._easing(1));
  return {
    type: 'frames',
    frames,
    toValue: this._toValue,
    iterations: this.__iterations,
    platformConfig: this._platformConfig,
    debugID: this.__getDebugID(),
  };
}

Проверим, что настоящий Animated строит то же самое. Метода нет в типах — это внутренности, поэтому доступ к нему описан своим интерфейсом. Заодно заглянем в пружину. Прогноз: сколько кадров у spring?

const { Animated, Easing } = ReactNative;

interface NativeAnimationConfig {
  type: string;
  frames?: number[];
  stiffness?: number;
  damping?: number;
}
// внутренности Animated: в типах их нет, поэтому описываем сами
interface Internals {
  _animation: { __getNativeAnimationConfig(): NativeAnimationConfig };
}
const peek = (value: InstanceType<typeof Animated.Value>) =>
  (value as unknown as Internals)._animation.__getNativeAnimationConfig();

const a = new Animated.Value(0);
Animated.timing(a, { toValue: 1, duration: 1000, easing: Easing.out(Easing.cubic), useNativeDriver: true }).start();
const timing = peek(a);
console.log(timing.type, "· кадров:", timing.frames?.length, "· на середине:", timing.frames?.[30]);

const b = new Animated.Value(0);
Animated.spring(b, { toValue: 1, useNativeDriver: true }).start();
const spring = peek(b);
console.log(spring.type, "· кадров:", spring.frames?.length);
console.log(JSON.stringify(spring));

У timing — те же 61 кадр и та же середина. У пружины кадров нет вовсе: её описание — жёсткость, трение, масса, пороги остановки и начальная скорость. Умолчания tension: 40 и friction: 7 из прошлой статьи здесь уже переведены в stiffness: 230.2 и damping: 22. Кадров нет потому, что формула пружины у натива своя — RCTSpringAnimation.mm на iOS и SpringAnimation.kt на Android. А easing — чужой код, его приходится превращать в данные заранее.

Так же описывается всё, что участвует в анимации. У каждого узла есть __getNativeConfig(): у значения это { type: "value", value: 0, offset: 0, … }, у половины кольца — { inputRange: [0, 0.5], outputRange: [0, 3.141592653589793], extrapolateLeft: "clamp", … }: строки "180deg" переведены в радианы ещё в JS. Узлы связаны в граф — значение, interpolate, трансформация, стиль, пропсы вида, — и граф отправляется в натив один раз, при старте. Дальше натив ходит по нему сам: берёт значение кадра, прогоняет через узлы и пишет результат в вид.

Это и есть ответ на первый вопрос статьи: в нативный поток уезжает не код, а описание в словаре, который натив знает заранее. Отсюда же видно, чего в нём быть не может: вашей функции на каждый кадр, слушателя, который что-то решает, условия «если подход последний». Всё это остаётся в JS.

Второе ограничение — не на анимацию, а на то, куда её направляют. Нативный драйвер кладёт значение кадра прямо в пропсы нативного вида, минуя всё, что обычно стоит между ними. А между ними стоит раскладка: ширину, отступы, top и flex превращает в координаты Yoga, и от ширины полосы зависят её соседи и дети. Кадр, записанный мимо раскладки, её не пересчитает. Поэтому натив принимает только то, что раскладку не трогает, — прозрачность, трансформации, цвета, скругления. Список лежит в React Native 0.86 одним файлом:

// react-native 0.86, Libraries/Animated/NativeAnimatedAllowlist.js (с сокращениями)
const SUPPORTED_STYLES: {[string]: true} = {
  ...SUPPORTED_COLOR_STYLES, // backgroundColor, borderColor, color, tintColor…
  borderRadius: true, // и ещё двенадцать скруглений по углам
  elevation: true,
  opacity: true,
  filter: true,
  transform: true,
  zIndex: true,
  /* ios styles */
  shadowOpacity: true,
  shadowRadius: true,
  // …
  ...(ReactNativeFeatureFlags.useSharedAnimatedBackend()
    ? {
        /* dimension */
        height: true,
        width: true, // и min/max-размеры, top/left/right/bottom, flex
      }
    : {}),
};

const SUPPORTED_TRANSFORMS: {[string]: true} = {
  translateX: true,
  translateY: true,
  scale: true,
  scaleX: true,
  scaleY: true,
  rotate: true,
  rotateX: true,
  rotateY: true,
  rotateZ: true,
  perspective: true,
  skewX: true,
  skewY: true,
  // …
};

Обратите внимание на ветку useSharedAnimatedBackend: с этим флагом в список добавляются размеры, позиция и flex. Это экспериментальный общий движок анимаций, и в 0.86 флаг по умолчанию выключен — рассчитывать на него пока нельзя.

Сверку React Native делает в отладочной сборке: validateStyles обходит анимируемые ключи стиля и на ключ вне списка печатает console.error. Соберём такую же для «Подхода» и сверим половину кольца, цвет дуги из задачи прошлой статьи и полосу отдыха из первой статьи главы. Сверяются только ключи, в которые приходит анимируемое значение: статичные стили натив не трогает. Прогноз: что пройдёт?

const { Animated } = ReactNative;

// сокращённые списки из NativeAnimatedAllowlist.js React Native 0.86
const STYLES = new Set(["opacity", "transform", "backgroundColor", "borderColor", "color", "borderRadius", "zIndex"]);
const TRANSFORMS = new Set(["translateX", "translateY", "scale", "scaleX", "scaleY", "rotate"]);

type AnimatedStyle = Record<string, unknown>;

// сверяем только анимируемые ключи, как validateStyles: статичные стили натив не трогает
function checkNative(name: string, animated: AnimatedStyle): void {
  let ok = true;
  for (const key of Object.keys(animated)) {
    if (STYLES.has(key)) continue;
    ok = false;
    console.error("Style property '" + key + "' is not supported by native animated module");
  }
  const transform = Array.isArray(animated.transform) ? animated.transform : [];
  for (const step of transform) {
    for (const key of Object.keys(step)) {
      if (TRANSFORMS.has(key)) continue;
      ok = false;
      console.error("Property '" + key + "' is not supported by native animated module");
    }
  }
  console.log(name + ":", ok ? "можно" : "нельзя");
}

const progress = new Animated.Value(0);
const turn = progress.interpolate({ inputRange: [0, 0.5], outputRange: ["0deg", "180deg"], extrapolate: "clamp" });
const color = progress.interpolate({ inputRange: [0, 0.8, 1], outputRange: ["#2e7d32", "#2e7d32", "#e4572e"] });
const width = progress.interpolate({ inputRange: [0, 1], outputRange: [300, 0] });

checkNative("половина кольца", { transform: [{ rotate: turn }] });
checkNative("цвет дуги", { borderColor: color });
checkNative("полоса отдыха", { width });

Кольцо проходит целиком: поворот и цвет в списке есть. Полоса — нет: она убывает шириной. Строка ошибки та же, что на телефоне: в 0.86 её печатает NativeAnimatedValidation.js, и старта она не останавливает, а что нативный вид сделает с ключом вне списка, не обещано ничем.

А предпросмотр промолчит. До сверки дело не дойдёт: в react-native-web значение нативным не становится никогда. Любопытно, что его старая копия этой функции ещё бросает исключение — throw new Error("Style property '…' is not supported by native animated module"), — но зовут её только при описании нативного значения, а такого здесь не бывает. Как с transition в первой статье главы, предпросмотр врёт в лучшую сторону: полоса с width и useNativeDriver: true в нём честно убывает.

Полосу чинят не флагом, а формой движения: не менять ширину, а сдвигать полосу полной ширины за край дорожки с overflow: "hidden" — translateX в списке есть. Это первая задача.

На телефоне иначе: анимация ширины, высоты, отступов или позиции с useNativeDriver: true в отладочной сборке печатает console.error «Style property '…' is not supported by native animated module». Предпросмотр об этом молчит: значение в нём не бывает нативным.

Третье ограничение — во времени. Значение, которое хоть раз стартовало с useNativeDriver: true, становится нативным: оно и все зависящие от него узлы переезжают в граф натива и остаются там. Проверим, что скажет предпросмотр: первую половину пути везём нативным драйвером, вторую — JS-овым. Прогноз?

const { Animated } = ReactNative;

const progress = new Animated.Value(0);
Animated.timing(progress, { toValue: 0.5, duration: 200, useNativeDriver: true }).start(() => {
  console.log("нативная половина доехала");
  Animated.timing(progress, { toValue: 1, duration: 200, useNativeDriver: false }).start(({ finished }) =>
    console.log("JS-половина доехала:", finished),
  );
});

Предпросмотр довёз обе половины. На телефоне вторая не стартовала бы вовсе — start бросил бы исключение:

// react-native 0.86, Libraries/Animated/animations/Animation.js
start(fromValue, onUpdate, onEnd, previousAnimation, animatedValue): void {
  if (!this._useNativeDriver && animatedValue.__isNative === true) {
    throw new Error(
      'Attempting to run JS driven animation on animated node ' +
        'that has been moved to "native" earlier by starting an ' +
        'animation with `useNativeDriver: true`',
    );
  }
  // …
}

Правило жёсткое, но понятное: у значения один хозяин кадров. Если бы JS взялся двигать значение, которое уже двигает натив, две стороны спорили бы о нём каждый кадр. Поэтому в «Подходе» все анимации одного значения — заполнение, «+30 с», пропуск — идут с одним и тем же флагом; это третья задача. setValue при этом можно: это не анимация, а одна запись, и у нативного значения она отправляется в натив.

Отсюда же ответ на загадку первой статьи главы — почему у Animated.Value нет публичного чтения. Пока значение двигает натив, его JS-копия стоит на месте, и __getValue() вернёт старое число. Свежее приходит тремя путями, и все асинхронные: событиями onAnimatedValueUpdate к слушателям, колбэком stopAnimation, который спрашивает натив через getValue, и в конце анимации — вместе с результатом, по которому JS-сторона догоняет узлы. Синхронный геттер у такого значения врал бы.

И последнее, что уезжает вместе со значением, — события. Animated.event с useNativeDriver: true раскладывает событие по значениям в нативном коде, и так прокрутка ScrollView двигает шапку без единого кадра в JS. Но событие должно рождаться у нативного компонента. Если такой обработчик вызвать из JS, он только позовёт слушателей, а значения не сдвинутся — так написан __getHandler в AnimatedEvent.js. Жест на PanResponder из следующей статьи рождается в JS, поэтому свайп по подходу поедет там с useNativeDriver: false. Выход — перенести в другой поток не описание, а сам код; это worklet-ы, через одну статью.

// Миниатюра статьи — в таком виде она лежит в подложке первой задачи и едет дальше.
// Проверка статьи «useNativeDriver: два потока»: те же списки, что в
// NativeAnimatedAllowlist.js React Native 0.86, и тот же текст ошибки.
// Сверяются только анимируемые ключи — статичные стили натив не трогает.
var NATIVE_STYLES = [
  "backgroundColor", "borderBottomColor", "borderColor", "borderEndColor", "borderLeftColor",
  "borderRightColor", "borderStartColor", "borderTopColor", "color", "tintColor",
  "borderBottomEndRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "borderBottomStartRadius",
  "borderEndEndRadius", "borderEndStartRadius", "borderRadius", "borderTopEndRadius", "borderTopLeftRadius",
  "borderTopRightRadius", "borderTopStartRadius", "borderStartEndRadius", "borderStartStartRadius",
  "elevation", "opacity", "filter", "transform", "zIndex", "shadowOpacity", "shadowRadius",
  "scaleX", "scaleY", "translateX", "translateY"
];
var NATIVE_TRANSFORMS = [
  "translateX", "translateY", "scale", "scaleX", "scaleY", "rotate", "rotateX", "rotateY", "rotateZ",
  "perspective", "skewX", "skewY"
];
function checkNative(name, animated) {
  var ok = true;
  Object.keys(animated).forEach(function (key) {
    if (NATIVE_STYLES.indexOf(key) >= 0) return;
    ok = false;
    console.error("Style property '" + key + "' is not supported by native animated module");
  });
  (Array.isArray(animated.transform) ? animated.transform : []).forEach(function (step) {
    Object.keys(step).forEach(function (key) {
      if (NATIVE_TRANSFORMS.indexOf(key) >= 0) return;
      ok = false;
      console.error("Property '" + key + "' is not supported by native animated module");
    });
  });
  console.log(name + ":", ok ? "можно" : "нельзя");
}

// Кадры timing для нативного драйвера — как в TimingAnimation.js React Native 0.86:
// easing — функция JS, поэтому её значения считают заранее, по одному на кадр 60 Гц.
function toFrames(easing, duration) {
  var count = Math.round(duration / (1000 / 60));
  var frames = [];
  for (var i = 0; i < count; i++) frames.push(easing(i / count));
  frames.push(easing(1));
  return frames;
}