带有 ScrollView 的 React-Native 模糊半径动画很不稳定

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）使用带有setNativeProps（{blurRadius：x}）的ref 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 的解决方案

我是这样做的……

1. 转到https://github.com/AlpacaDB/react-native-blur/tree/animate/ios
2. 在 Xcode 中将 BlurView.m 设置为与 BlurView.m 完全相同的内容。
3. 使用 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];
}

然后，当应用程序处于活动状态时，我运行了 updateBlurEffect。不幸的是，没有办法在 react-native 中解决这个问题，但这很有效。