Animer la propriété blurRadius avec react-native

Question

J'ai commencé à animer une image dans mon projet réac-natif mais de toute façon je ne peux pas animer la propriété blurRadius. Translate et Scale fonctionnent très bien. Voici le code que j'utilise pour interpolat valeurs e pour le flou, l'échelle et traduis:

// 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', 
}); 

Et ceci est mon image:

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

Je binded la valeur this.state.scrollY sur un rouleau ScrollView.

Answer 1

Le timing de votre problème indique que la solution doit être aussi simple que la mise à niveau de React Native. Le support du flou de rayon sur les images a été ajouté dans la version 0.46. Je viens de créer une nouvelle application réac-native et j'ai implémenté 3 animations sur une image, dont l'une était blurRadius, et tout fonctionne correctement. C'est avec la version 0.49.5. La mise à niveau devrait résoudre votre problème!

Notez qu'il semble actuellement être un problème sur Android, voir https://github.com/facebook/react-native/issues/16494

je remarquai que blurRadius ne (et peut-être plus tôt) fonctionne pas non plus sur iOS avec RN 0,48, mais 0.49.5 est très bien. Il n'y a aucune mention de blurRadius dans les notes de version pour 0.48 et 0.49.