Привет! Меня зовут Денис, я мобильный разработчик в СберМаркете. Пишу на React Native и люблю анимации, ведь они дают жизнь нашим проектам :)
В этой статье попробуем разобраться, что же всё-таки работает быстрее: React-Native-Reanimated или Animated + useNativeDriver: true.
Будем сравнивать FPS, нагрузку на процессор, оперативную память и воспользуется EventQueue для получения логов.
Дисклеймер: Это теоретическое сравнение на абстрактных примерах, так что перфоманс на реальных проектах может отличаться. Но я постарался нагрузить инструменты как следует и хорошенько проверить их на прочность.
Почему именно этот эксперимент?
Эксперимент 1. Тестируем loop анимацию
Эксперимент 2. Добавляем scale
Эксперимент 3. Анимация, привязанная к скроллу
Почему именно этот эксперимент?
Не так давно мой коллега Женя Прокопьев (aka @Evgen175) опубликовал на Хабре статью в двух частях о том, почему анимации в React Native работают именно так, как работают. Цель серии — объяснить, откуда берутся лаги в анимациях, за которые многие так не любят RN, и дать советы, для каких случаев лучше использовать разные инструменты.
Под капотом анимаций в React Native. Часть 1/2: Animated and Bridge
Под капотом анимаций в React Native. Часть 2/2: Reanimated and JSI
В финале получились следующие выводы:
Какой инструмент выбрать? | |
Animated |
Reanimated |
|
Для простых анимаций Когда надо сделать анимацию, которая не перерисовывает макет: transform, opacity, borderRadius и др. (!) Всегда надо использовать useNativeDriver: true |
Если свойства, которые надо анимировать перерисовывают макет Если надо реализовать сложную анимацию, где разные свойства зависят друг от друга Когда используем жесты |
А ещё появилась гипотеза:
Animated с useNativeDriver отправляет граф, описывающий анимацию, для расчета на UI, а Reanimated делает все расчеты на стороне JS.
Возможно из-за меньшего количества «накладных расходов» Animated будет иметь лучшую производительность и будет меньше потреблять память для тех кейсов, которые можно реализовать с помощью обоих инструментов.
Ну что ж, перехватываю эстафету. Хочется раз и навсегда выяснить, для каких кейсов что оптимальнее.
В красном углу ринга — Animated. В синем — Reanimated. Поехали!
Эксперимент 1. Тестируем loop анимацию
Возьмем 500 шариков с анимированным translateY, чтобы было нагляднее. Добавим loop и накинем easing функцию.
Код Reanimated
export const ReanimatedAnimatedItem = () => {
const animation = useDerivedValue(() =>
withRepeat(
withSequence(
withTiming(0, {
duration: twoNumRandom(1500, 2000),
easing: Easing.bounce,
}),
withTiming(1, {
duration: twoNumRandom(1500, 2000),
easing: Easing.bounce,
}),
),
-1,
true,
),
);
const animatedStyle = useAnimatedStyle(() => ({
transform: [
{
translateY: interpolate(
animation.value,
[0, 1],
[0, 834.3333129882812],
),
},
],
}));
return (
<Animated.View
style={[styles.box, {left: generateRandom()}, animatedStyle]}
/>
);
};
Код Animated
export const NativeAnimatedItem = () => {
const value = useRef(new Animated.Value(0)).current;
useEffect(() => {
Animated.loop(
Animated.sequence([
Animated.timing(value, {
toValue: 834.3333129882812,
useNativeDriver: true,
duration: twoNumRandom(1500, 2000),
easing: Easing.bounce,
}),
Animated.timing(value, {
toValue: 0,
useNativeDriver: true,
duration: twoNumRandom(1500, 2000),
easing: Easing.bounce,
}),
]),
).start();
}, []);
const style = useMemo(
() => [
styles.box,
{
left: generateRandom(),
transform: [
{
translateY: value,
},
],
},
],
[],
);
return <Animated.View style={style} />;
};Получаем вот такой результат:
Animated |
Reanimated |
|
RAM |
121 |
200 |
CPU(ios) |
60% |
60% |
FPS |
60 |
60 |
Оба инструмента справились неплохо, хотя в начале проявились небольшие просадки при построении виртуального дерева. Однако перфоманс монитор сверху показывает, что Reanimated требуется как минимум на 60мб больше оперативной памяти.
Нагрузка на ЦП в этом кейсе одинаковая.
Результаты первого эксперимента: | |
Плавность анимации (fps) |
по очку Animated и Reanimated |
Расходование памяти |
победил Animated |
Нагрузка на ЦП |
по очку Animated и Reanimated |
Animated 3-2 Reanimated | |
Первый раунд за Animated | |
Эксперимент 2. Добавляем scale
Добавим анимированное свойство scale. Посмотрим, как будет влиять на перфоманс наличие больше чем одного свойства.
Код Animated
export const NativeAnimatedItem = () => {
const value = useRef(new Animated.Value(0)).current;
const scallableValue = useRef(new Animated.Value(0)).current;
useEffect(() => {
Animated.loop(
Animated.sequence([
Animated.timing(scallableValue, {
toValue: twoNumRandom(0.85, 0.95),
useNativeDriver: true,
easing: Easing.bounce,
}),
Animated.timing(scallableValue, {
toValue: twoNumRandom(2.6, 3),
useNativeDriver: true,
easing: Easing.bounce,
}),
]),
).start();
Animated.loop(
Animated.sequence([
Animated.timing(value, {
toValue: 834.3333129882812,
useNativeDriver: true,
duration: twoNumRandom(1500, 2000),
easing: Easing.bounce,
}),
Animated.timing(value, {
toValue: 0,
useNativeDriver: true,
duration: twoNumRandom(1500, 2000),
easing: Easing.bounce,
}),
]),
).start();
}, []);
const style = useMemo(
() => [
styles.box,
{
left: generateRandom(),
transform: [
{
translateY: value,
},
{scale: scallableValue},
],
},
],
[],
);
return <Animated.View style={style} />;
};Код Reanimated
export const ReanimatedAnimatedItem = () => {
const scallableValue = useDerivedValue(() =>
withRepeat(
withSequence(
withTiming(twoNumRandom(0.85, 0.95)),
withTiming(twoNumRandom(2.6, 3)),
),
-1,
true,
),
);
const animation = useDerivedValue(() =>
withRepeat(
withSequence(
withTiming(0, {
duration: twoNumRandom(1500, 2000),
easing: Easing.bounce,
}),
withTiming(1, {
duration: twoNumRandom(1500, 2000),
easing: Easing.bounce,
}),
),
-1,
true,
),
);
const animatedStyle = useAnimatedStyle(() => ({
transform: [
{
translateY: interpolate(
animation.value,
[0, 1],
[0, 834.3333129882812],
),
},
{
scale: scallableValue.value,
},
],
}));
return (
<Animated.View
style={[styles.box, {left: generateRandom()}, animatedStyle]}
/>
);
};
Animated |
Reanimated |
|
RAM |
140 |
240 |
CPU(iOS) |
181% |
85% |
FPS |
2 (JS-поток) |
60 |
useNativeDriver не справляется с нагрузкой, приложение просело до 1 кадра в секунду. А вот Reanimated показывает те же стабильные 60 fps.
Нагрузка на процессор у Reanimated ниже чем у useNativeDriver, но оперативной памяти расходуется на 100 мб больше. Также, посмотрим на перфоманс монитор в Android Studio.
Для наглядности сравним расход оперативной памяти в кейсе с шариками на разном количестве элементов.
Существенная разница заметна лишь на 1000 нодах и выше. Но в реальности больше чем 100 анимированных нод встретить тяжело. В рамках эксперимента Reanimated берёт верх, но запомним, что преимущество здесь весьма умозрительное.
Результаты эксперимента: | |
Плавность анимации (fps) |
победил Reanimated |
Расходование памяти |
победил Animated |
Нагузка на ЦП |
победил Reanimated |
Animated 1-2 Reanimated | |
Второй раунд за Reanimated | |
Почему так произошло?
Давайте разбираться, почему эксперимент 1 и 2 дали разные результаты.
Не все методы поддерживают useNativeDriver. Вместо этого подключается requestAnimationFrame. Event.start() запускается в нативке, а вот остальные методы требуют лишний раз перегнать значение в JS-потоке.
В данном примере мы используем Sequence для объединения анимаций в цепочку. Из-за этого fps падает. Если убрать Sequence, то useNativeDriver будет включен и анимации станут более плавными.
В случае с Reanimated общение происходит через JSI, поэтому JS-поток не перегружается.
Давайте посмотрим в логи с помощью MessageQueue для большего понимания того что происходит под капотом:
В Reanimated создается таймер для анимации и сама нода. Никаких лишних вызовов не видим. Animated + useNativeDriver делает то же самое, но ещё каждый раз делает вызовы на выполнение анимации в JS-потоке.
Эксперимент 3. Анимация, привязанная к скроллу
Посмотрим на другой вид анимации — привязанный к скроллу. Для этого у Animated есть метод Event который создает карту анимированных значений. А в случае с Reanimated создадим shared value для получения позиции скролла. Анимировать будем Lottie анимацию.
Обзор на разные библиотеки, которые можно подключить к Reanimated можно прочитать ещё в одной статье Жени: Эффектно и эффективно. 6 инструментов для анимации в React Native
Код Reanimated
export const CompareWithScroll = () => {
const scrollY = useSharedValue(0);
return (
<Animated.ScrollView
style={{flex: 1, backgroundColor: '#fff'}}
onScroll={event => {
scrollY.value = event.nativeEvent.contentOffset.y;
}}
scrollEventThrottle={16}>
{new Array(100).fill(0).map(() => (
<LottieReanimated source={lottie} scrollY={scrollY} />
))}
</Animated.ScrollView>
);
};
export const LottieReanimated = ({source, scrollY}: Props) => {
const animatedProps = useAnimatedProps(() => ({
progress: interpolate(-scrollY.value, [0, height], [0, 1]),
}));
const styles = useAnimatedStyle(() => ({
left: generateRandom(width),
top: generateRandom(height),
}));
return (
<AnimatedLottieView
style={[ownStyles.view, styles]}
source={source}
animatedProps={animatedProps}
/>
);
};Код Animated
export const CompareWithScroll = () => {
const scrollY = useRef(new Animated.Value(0));
return (
<Animated.ScrollView
style={{flex: 1, backgroundColor: '#fff'}}
onScroll={Animated.event(
[
{
nativeEvent: {
contentOffset: {y: scrollY.current},
},
},
],
{useNativeDriver: true},
)}
scrollEventThrottle={16}>
{new Array(100).fill(0).map(() => (
<LottieNative source={lottie} scrollY={scrollY.current} />
))}
</Animated.ScrollView>
);
};
export const LottieNative = ({source, scrollY}: Props) => {
const styles = useMemo(
() => [
{
left: generateRandom(width),
top: generateRandom(height),
},
],
[],
);
return (
<AnimatedLottieView
style={[ownStyles.view, styles]}
source={source}
progress={scrollY.interpolate({
inputRange: [0, height],
outputRange: [0, 1],
})}
/>
);
};Теперь создадим сразу 100 элементов.
Animated |
Reanimated |
|
RAM |
640 |
650 |
CPU(ios) |
96% |
97% |
FPS |
25-35 |
1 |
По оперативной памяти видим, что разницы практически нет, но Reanimated просел до 1 fps. Animated + useNativeDriver держится в пределах 20-30 fps.
В этом кейсе нагрузка на ЦП одинаковая.
Результаты эксперимента: | |
Плавность анимации (fps) |
победил Animated |
Расходование памяти |
ничья |
Нагузка на ЦП |
ничья |
Animated 3-2 Reanimated | |
Третий раунд за Animated | |
Так кто быстрее?
Animated победил, хоть и дал слабину во втором эксперименте. Оперативная память сильнее расходуется в Reanimated, а Animated + useNativeDriver сильнее нагружает процессор.
Итоговый результат: | |||
эксперимент 1 |
эксперимент 2 |
эксперимент 3 |
|
Плавность анимации (fps) |
R, A |
R |
A |
Расходование памяти |
A |
A |
R, A |
Нагузка на ЦП |
R, A |
R |
R, A |
Animated 7-6 Reanimated | |||
Animated ???? | |||
По факту же все зависит от контекста. Например, в эксперименте 2 Reanimated вырвал победу у Animated по плавности анимации при весьма нереалистичных для настоящего проекта предпосылках.
Итого, на небольших проектах можно в принципе не задумываться о скорости и использовать, что понравится. Reanimated покрывает почти все кейсы, но, в некоторых случаях, хуже по перфомансу. В то время как useNativeDriver имеет ограничения и позволяет анимировать только базовые свойства. Если нужно анимировать макет(width, height и т.д), то точно присматриваемся к Reanimated.
А вот и финальное сравнение инструментов:
Reanimated |
Animated |
|
+ |
Покрывает почти все кейсы |
Идет из коробки |
– |
Большой размер исходников(3мб) Ест много оперативной памяти |
Ест ресурсы процессора Не все свойства можно анимировать Не все методы работают с useNativeDriver |
Спасибо тем, кто дочитал до конца! Надеюсь, было полезно (и интересно). Если есть, что рассказать на тему производительности Animated и Reanimated, буду ждать вас в комментариях :)
Tech-команда СберМаркета ведет соцсети с новостями и анонсами. Если хочешь узнать, что под капотом высоконагруженного e-commerce, следи за нами в Telegram и на YouTube. А также слушай подкаст «Для tech и этих» от наших it-менеджеров.