Question

我开始在我的react-native项目中为图像设置动画，但不知怎的，我无法为blurRadius属性设置动画。 Translate和Scale工作得很好。以下是我用于模糊，缩放和翻译的interpolat e值的代码：

// Compute image position
const imageTranslate = this.state.scrollY.interpolate({
  inputRange: [-IMAGE_MAX_HEIGHT, 0, IMAGE_MAX_HEIGHT],
  outputRange: [IMAGE_MAX_HEIGHT / 2, 0, -IMAGE_MAX_HEIGHT / 3],
  extrapolate: 'clamp',
});
// Compute image blur
const imageBlur = this.state.scrollY.interpolate({
  inputRange: [0, IMAGE_MAX_HEIGHT],
  outputRange: [0, 100],
  extrapolate: 'clamp',
});
// Compute image scale
const imageScale = this.state.scrollY.interpolate({
  inputRange: [-IMAGE_MAX_HEIGHT, 0, IMAGE_MAX_HEIGHT],
  outputRange: [2, 1, 1],
  extrapolate: 'clamp',
});

这是我的形象：

return (
  <Animated.Image
    blurRadius={imageBlur}
    source={this.props.imgSrc}
    style={[
      animatedImageStyles.backgroundImage,
      { transform: [{ translateY: imageTranslate }, { scale: imageScale }] }
    ]}
  />
);

我在this.state.scrollY卷轴上绑定了ScrollView值。

Answer 1

您可以添加事件侦听器以获取动画模糊值并更改状态。然后将您的blurValue状态置于blurRadius属性中。

this.state.blurAnimation.addListener(({value}) => this.setState({blurValue:value}));

Answer 2

您的问题的时间表明解决方案应该像升级React Native一样简单。在版本0.46中添加了对图像的模糊半径支持。我刚刚创建了一个新的react-native应用程序，并在一个图像上实现了3个动画，其中一个是blurRadius，一切正常。这是版本0.49.5。升级应解决您的问题！

请注意，目前Android上似乎存在问题，请参阅https://github.com/facebook/react-native/issues/16494

我注意到在带有RN 0.48的iOS上，blurRadius不起作用，但0.49.5（可能更早）也没问题。在0.48和0.49的发行说明中没有提到blurRadius。

使用react-native为blurRadius属性设置动画

2 个答案: