Почему анимация текста дёрганая?

Question

[historydev]

Полный пример:
https://snack.expo.dev/uw3en-9CwCiCIQ1PX-GOl

В данный момент использую react-native-reanimated, началось это на стандартном пакете анимации react-native

Почему-то при изменении fontSize каким-либо способом (scale или напрямую), я получаю подёргивания текста, перескок с пикселя на пиксель очень сильно заметен (при масштабировании не так сильно, но тоже заметно).
Если ускорить анимацию, это перестаёт быть заметно, но мне нужна текущая скорость.

По результатам тестов:

1. Это проявляется на 60гц (андроид) как подёргивание.
2. На 120гц (андроид) не проявляется или слабо (не я смотрел, попросил знакомого), но он мог и не заметить, возможно там так-же, как при использовании scale.
3. На пк 144гц больше похоже на мыло, но это у меня (другой человек ничего не заметил с его слов, может и не хотел)

Мне посоветовали использовать линейную интерполяцию, но эффекта это почему-то не даёт, в данный момент размер шага 0.1.

Здесь дока:
https://docs.swmansion.com/react-native-reanimated...

Вот так выглядит, как работает можно посмотреть в примере:

const animatedStyle = useAnimatedStyle(() => ({
        fontSize: interpolate(fontSize.value, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20], [11.1, 11.2, 11.3, 11.4, 11.5, 11.6, 11.7, 11.8, 11.9, 12, 12.1, 12.2, 12.3, 12.4, 12.5, 12.6, 12.7, 12.8, 12.9, 13])
    }));

Сейчас я меняю значение на 1-20, а получаю выход в fontSize 11.1-13 (с шагом 0.1).

Что делать?

Answer 1

[historydev]

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

Поэтому масштабируйте весь элемент, будь то текст или кнопка, по отдельности:

function Button(props: IButtonProps) {

    const scaleX = useSharedValue(1);
    const scaleY = useSharedValue(1);
    const scaleFontSize = useSharedValue(1);
    const [isPressed, setIsPressed] = useState(false);

    useEffect(() => {
        scaleFontSize.value = animationWithRepeat(1.07070707070707072);
        scaleX.value = animationWithRepeat(1.1071428571428572);
        scaleY.value = animationWithRepeat(1.1111111111111111);
    }, []);

    return (
        <AnimatedPressable style={[
                styles.defaultButton,
                !isPressed ? styles.notPressedButton : styles.pressedButton,
                { transform: [ {scaleX}, {scaleY} ] },
                props.styles
            ]}>

            <AnimatedText style={[
                styles.defaultText,
                !isPressed ? styles.notPressedText : styles.pressedText,
            ]}>Принять</AnimatedText>

        </AnimatedPressable>
    )
}