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

【问题标题】：Animate blurRadius property with react-native使用 react-native 为 blurRadius 属性设置动画
【发布时间】：2017-06-29 12:52:17
【问题描述】：

我开始在我的 react-native 项目中为图像制作动画，但不知何故我无法为 blurRadius 属性制作动画。 Translate 和 Scale 工作正常。这是我用于 interpolate 模糊、缩放和平移值的代码：

// 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 滚动条上。

【问题讨论】：

动画 blurRadius 类型在 0.51 中有效，但我遇到了一些严重的 Android 性能问题。

标签： animation react-native react-animated

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

我看到了 0.49 Release Note ，没有关于 Android 上的 blurRadius 错误修复。
嗯，OP 在问题中没有说任何关于它具体是 Android 问题的内容。事实上，是的，我在 Android 7.1 和 7.0 上尝试使用 blurRadius 时遇到了红屏死机。不过，我写的是正确的 - blurRadius 是几个月前实施的。而且它似乎在以前的某个时间点适用于 Android。对此有一个未解决的问题：github.com/facebook/react-native/issues/16494