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屬性與反應原生

回答

相關問題