Реакция Native Animation с пропуском до конечного значения - PullRequest
Новая
       21

Реакция Native Animation с пропуском до конечного значения

0 голосов
/ 07 января 2020

Я использую анимацию React Native в своем приложении Vue Native. Обычно они работают нормально, но по какой-то причине, когда я пытаюсь анимировать paddingTop и paddingBottom, значения переходят к их конечному значению, а не плавно анимируются через них.

Это, кажется, происходит только при большом количестве просмотров (15+) на экране. Обратите внимание, что не все эти виды анимации, а только один! Также обратите внимание, что анимация непрозрачности этих представлений работает нормально, пропускается только анимация заполнения.

Я не могу использовать useNativeDriver, потому что paddingTop / Bottom не поддерживаются, а функции замедления не кажутся помогать. Если я продолжу время, то анимации будут более нормальными для пропускаемых, но, очевидно, чрезвычайно медленными для тех, кто нет.

Это ограничение React Native / Vue Native?

Фрагмент (обратите внимание, что opacityGrowth не анимируется одновременно с paddingMod): 


        <animated:view
            :style="{opacity: opacityGrowth,
                    paddingTop: paddingMod,
                    paddingBottom: paddingMod }">



        widenLetter () {
            var time = 300
            // Animate the letter as we read it, making it inflate
            Animated.timing(this.paddingMod, {
                toValue: 20,
                duration: time,
            }).start()
        },

        shrinkLetter () {
            var time = 300
            // Animate the letter after we read it, making it deflate
            Animated.timing(this.paddingMod, {
                toValue: 0,
                duration: time,
            }).start()
        },

1 Ответ

0 голосов
/ 07 января 2020

Наконец-то понял!

Это было связано с тем, что свойство компонента изменилось в середине анимации. Обратите внимание, что это свойство НИЧЕГО НЕ СДЕЛАНО с самой анимацией, но когда родительский компонент изменил свойство, которое он передал дочернему компоненту (который сам выполнял анимацию), он заставил компонент немедленно обновить sh и принудительно остановить все анимация

...