带有 ScrollView 的 React-Native Blur Radius 动画是断断续续的

Question

我有一个使用动画事件的 ScrollView 来做一些基本的动画。一切都很好，但现在我想为图像上的 blurRadius 设置动画，但模糊直到滚动开始几秒钟后才会开始。我已经尝试了几乎所有可能的动画解决方案...

这是ScrollView...（AnimatedEvent.scrollYOffset只是我做的一个快捷函数）（通常我的油门在16，但发现7稍微好一点，但还差得远）

        <ScrollView
        onScroll={AnimatedEvent.scrollYOffset(animY)}
        scrollEventThrottle={7}
        style={[QuickStyle.fillScreen,{
            backgroundColor: 'rgb(16, 50, 74)',
            flex: 1,
        }]}>

这是模糊的图像之一属性...

    const blurry = this.state.animY.interpolate({
        inputRange: [0,150],
        outputRange: [0,7],
        extrapolate: 'clamp'
    });

    const slide1 = <View style={[{
        borderRadius: borderRadius,
        overflow: 'hidden',
        width: width,
        height: height,
        backgroundColor: 'rgb(28, 181, 251)' //light blue
    }]}>
        <Animated.Image blurRadius={blurry} ref={img => this.blur1 = img} style={{
            width: width,
            height: height,
        }} source={require('../../assets/images/big-numbers.jpg')} />
    </View>;

我试过的...（都具有相同的滞后波涛汹涌的结果）1）直接在 blurRadius 道具中设置动画 2）将 ref 与 setNativeProps({blurRadius:x}) 一起使用 3）使用 setState({ blurRadius:x}) - 这至少是平滑的，但减慢了每个动画的速度。

接下来我要尝试什么... 运行这 3 个解决方案处于发布模式。我也会考虑直接在 Objective-C 中这样做，但真的想避免这种情况...

react-native-blur 包有帮助吗？我猜不是...

请帮忙！谢谢！

Answer 1

我终于屈服了，只是将 react-native-blur 的 BlurView 放在我想要模糊的地方。然后我只是对不透明度进行动画处理，一切都很顺利。

唯一的问题是，它看起来不如直接通过 blurRadius 模糊图像好，但到目前为止，这是我目前能够让它工作的唯一方法。

如果您有其他解决方案，请告诉我！

更新

最后，我无需在 react-native-blur BlurView 上设置不透明度动画即可完成这项工作！而且看起来好 10 倍！

我正在使用来自 https://github.com/react-native-community/react-native-blur/issues/152

的@umitanuki 的解决方案

我是这样做的...

转到https://github.com/AlpacaDB/react-native-blur/tree/animate/ios
将 Xcode 中的 BlurView.m 设置为那里的 BlurView.m 所具有的值。
使用 onScroll 和 setState 更改 BlurView (react-native-blur) 上的 blurAmount 属性。

这实现了与 blurRadius 相同的效果，但在设置动画时运行起来非常流畅。

额外

使用此解决方案时，我发现了一个问题...当退出应用程序并返回到应用程序（没有完全退出）时，模糊消失，直到您再次滚动或执行某些操作来更新它。

为了解决这个问题，我回到了 BlurView.m 并添加了一个观察者，用于观察应用何时激活...

        [[NSNotificationCenter defaultCenter]addObserver:self
                                            selector:@selector(appBecameActive)
                                                name:UIApplicationDidBecomeActiveNotification
                                              object:nil];
-(void) appBecameActive {
    [self updateBlurEffect];
}

我然后运行在应用程序激活时更新 BlurEffect。不幸的是，在 react-native 内无法解决此问题，但这非常有效。

带有 ScrollView 的 React-Native Blur Radius 动画是断断续续的

React-Native Blur Radius Animation with ScrollView is Choppy

javascript

ios

objective-c

reactjs

native

带有 ScrollView 的 React-Native Blur Ra​​dius 动画是断断续续的

React-Native Blur Radius Animation with ScrollView is Choppy

javascript

ios

objective-c

reactjs

native

带有 ScrollView 的 React-Native Blur Radius 动画是断断续续的