Animiere die Eigenschaft blurRadius mit reaktionseigenem

Question

Ich begann ein Bild in meinem reaktionseigenen Projekt zu animieren, aber irgendwie kann ich die blurRadius Eigenschaft nicht animieren. Translate und Scale funktionieren gut. Hier ist der Code, den ich für Blur, Skala interpolat e Werte verwenden und übersetzen:

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

Und das ist mein Image:

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

ich den this.state.scrollY Wert auf eine ScrollView Scroll binded.

Answer 1

Das Timing Ihres Problems zeigt an, dass die Lösung so einfach wie die Aktualisierung von Native React sein sollte. Blur Radius Unterstützung für Bilder wurde in Version 0.46 hinzugefügt. Ich habe gerade eine neue reaktionsnative App erstellt und 3 Animationen auf einem Bild implementiert, von denen eines Unschärfe war, und alles funktioniert gut. Dies ist mit Version 0.49.5. Upgrade sollte dein Problem lösen!

Hinweis, dass es derzeit ein Problem, auf Android scheint, sehen https://github.com/facebook/react-native/issues/16494

Ich bemerkte, dass blurRadius auch nicht auf iOS mit RN 0,48, aber 0.49.5 (und möglicherweise auch früher) ist gut funktioniert. In den Release Notes zu 0.48 und 0.49 wird blurRadius nicht erwähnt.