@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).

Что делать?
  • Вопрос задан
  • 22 просмотра
Решения вопроса 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>
    )
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы