反应原生动画跳到结束值答案

【问题标题】：React Native Animation skipping to end value反应原生动画跳到结束值
【发布时间】：2020-04-24 13:21:42
【问题描述】：

我在我的 Vue Native 应用程序中使用 React Native Animations。它们通常可以正常工作，但由于某种原因，当我尝试为 paddingTop 和 paddingBottom 设置动画时，这些值会跳到它们的最终值，而不是通过它们平滑地设置动画。

这似乎只有在屏幕上有很多视图 (15+) 时才会发生。请注意，并非所有这些视图都具有动画效果，只有一个！另请注意，为这些视图的不透明度设置动画效果很好，只是填充动画正在跳过。

我不能使用useNativeDriver，因为不支持 paddingTop/Bottom，并且缓动函数似乎没有帮助。如果我调整持续时间，那么跳过的动画会更正常，但不跳过的动画显然非常慢。

这只是 React Native/Vue Native 的限制吗？

一个 sn-p（注意 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()
        },

【问题讨论】：

标签： android react-native vue.js mobile vue-native

【解决方案1】：

终于明白了！

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

【讨论】：