带有 ScrollView 的 React-Native Blur Radius 动画是断断续续的
React-Native Blur Radius Animation with ScrollView is Choppy
我有一个使用动画事件的 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 包有帮助吗?我猜不是...
请帮忙!谢谢!
我终于屈服了,只是将 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 来做一些基本的动画。一切都很好,但现在我想为图像上的 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 包有帮助吗?我猜不是...
请帮忙!谢谢!
我终于屈服了,只是将 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 内无法解决此问题,但这非常有效。