Animating blurRadius property with react
I started animating an image in my interaction project, but somehow I can't animate the property blurRadius
. Translate
and Scale
work fine. Here is the code I am using for the interpolat
e values for blur, scaling and translation:
// 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',
});
And this is my image:
return (
<Animated.Image
blurRadius={imageBlur}
source={this.props.imgSrc}
style={[
animatedImageStyles.backgroundImage,
{ transform: [{ translateY: imageTranslate }, { scale: imageScale }] }
]}
/>
);
I have bound the value this.state.scrollY
to the scroll ScrollView
.
source to share
The timing of your problem indicates that the solution should be as easy as updating React Native. In version 0.46, support for the blur radius of images was added. I just created a new react app and implemented 3 animations on the image, one of which was blurRadius and everything works fine. This is with version 0.49.5. Upgrading should solve your problem!
Please note that there is an issue currently on Android, see https://github.com/facebook/react-native/issues/16494
I noticed that blurRadius doesn't work either on iOS with RN 0.48, but 0.49.5 (and possibly earlier) is fine. There is no mention of blurRadius in the release notes for 0.48 and 0.49.
source to share