0

我在我的 Vue Native 应用程序中使用 React Native Animations。它们通常可以正常工作，但由于某种原因，当我尝试为 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()
        },
4

1 回答 1

0

终于想通了！

这是由于组件的属性在动画中间发生了变化。注意这个属性与动画本身没有任何关系，但是当父组件更改它传递给子组件的属性时（它正在自己做动画），它会导致组件立即刷新并强制停止所有动画

于 2020-01-07T15:46:39.540 回答