Animate blurRadius属性与反应原生

我开始在我的react-native项目中为图像制作动画，但不知何故我无法为blurRadius属性设置动画效果。 Translate和Scale工作得很好。这里是我用来interpolatË值模糊，规模和翻译代码：Animate 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 }] } 
    ]} 
    /> 
);

我绑定在ScrollView滚动的this.state.scrollY值。

来源

2017-06-29 David

动画blurRadius类型的作品在0.51，但我得到了一些严重的性能问题与Android特别是。 – 30secondstosam

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

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

我注意到blurRadius不会在iOS与RN 0.48工作，要么，但0.49.5（甚至更早）的罚款。在0.48和0.49发行说明中没有提及blurRadius。

来源

2017-11-02 12:19:09 sinewave440hz

我看到0.49发行说明，没有关于Android上的blurRadius错误修复的信息。 – Arman

嗯，OP在关于它特别是Android问题的问题上没有说什么。事实上，当我尝试在Android 7.1和7.0上使用blurRadius时，我会看到一个红色的死亡屏幕。不过，我写的是正确的 - blurRadius是在几个月前实施的。而且它似乎在之前的某个时候对Android有用。对此有一个公开的问题：https：//github.com/facebook/react-native/issues/16494 – sinewave440hz

Animate blurRadius属性与反应原生

回答

相关问题