Animation 使用react native设置blurRadius属性的动画

我开始在react原生项目中设置图像动画，但不知何故，我无法设置

blurRadius

属性的动画<代码>翻译和

缩放

工作正常。 下面是我用来插值模糊、缩放和平移值的代码：

// 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

值绑定在

滚动视图

滚动上。

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

请注意，Android目前似乎存在一个问题，请参阅

---

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

您可以添加事件侦听器以获取动画模糊值并更改状态。然后将您的

blurValue

状态置于

blurRadius

prop中

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

---

我看了0.49的发行说明，没有关于Android上的blurRadius bug补丁的内容。嗯，OP在问题中没有说它是一个Android问题。事实上，是的，当我尝试在安卓7.1和7.0上使用blurRadius时，我看到了一个红色的死亡屏幕。不过，我写的是正确的——blurRadius是在几个月前实现的。而且它似乎在以前的某个时候对Android起到了作用。关于这一点，有一个公开的问题：在0.51版本中，动画有点可行，但我发现Android的性能问题尤其严重。