文章/答案/技术大牛

发布

社区首页 >问答首页 >React原生动画跳到结束值

问React原生动画跳到结束值
EN

Stack Overflow用户

提问于 2020-01-07 10:52:33

回答 1查看 597关注 0票数 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()
        },

android

react-native

vue.js

mobile

vue-native

回答 1

Stack Overflow用户

发布于 2020-01-07 23:46:40

终于弄明白了！

这是由于组件的属性在动画过程中发生更改。注此属性与动画本身无关，但当父组件更改了它传递给子组件的属性(子组件在其自身上执行动画)时，它会导致组件立即刷新并强制停止所有动画

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59621587

复制

相似问题

问React原生动画跳到结束值
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React原生动画跳到结束值EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React原生动画跳到结束值
EN