反應原生 - 動畫blurRadius的圖像

Question

我有一個「封面」圖像的頂部我的意見之一，我希望能夠模糊出來，當你將它從視圖中滾動出來作爲一個很酷的效果。

我的狀態包含一個blurRadius屬性，我將其綁定到我的<Image>組件上的blurRadius={this.state.blurRadius}支柱。

我有一個<ScrollView>和我進行監視時，它與onScroll，在那裏我打電話setState({blurRadius: value})滾動 - value是，你已經滾動視圖的距離。

我也設置了滾動視圖上的scrollEventThrottle={30}道具，以便我在用戶滾動時定期接收事件。

這個問題似乎是blurRadius更新，但經過了很長的延遲 - 並且只能達到最大值。我是否錯過了一些東西以便使圖像在每次調用setState時應用新的blurRadius？

難道是圖像太大？

Answer 1

您可以嘗試使用setNativeProps而不是setState來查看性能是否提高。你只需要給你的Image一個ref。

this.refs.myImage.setNativeProps({ blurRadius: myValue }); 

減小圖像尺寸也將有所幫助，因爲它不需要模糊儘可能多的像素。

Answer 2

您不應該使用setState來設置任何對onScroll的響應，因爲這會導致較差的性能。原因是整個視圖都會對setState的每次調用重新渲染，導致「視圖抖動」。

相反，您應該使用Animated API，因爲這會向本機UI線程「聲明」動畫，從而避免重新渲染。

布倫特Vatne（從世博團隊）提供了動畫的很好的解釋，以及動畫在ScrollViewhere

到onScroll事件的迴應一個具體的例子希望它可以幫助別人:-)