React native - Animation des UnschärfeRadius eines Bildes

Question

Ich habe ein "Cover" Bild für die Spitze einer meiner Ansichten, die ich gerne verwischen würde, wenn Sie es aus der Sicht als einen coolen Effekt scrollen.

Mein Zustand enthält eine blurRadius Eigenschaft, die ich an die blurRadius={this.state.blurRadius} Prop auf meine <Image> Komponente binde.

Ich habe eine <ScrollView> und Überwachung bin, wenn es mit onScroll gescrollt ist, wo ich bin Aufruf setState({blurRadius: value}) - value den Abstand zu sein, dass Sie die Ansicht gescrollt haben.

Ich habe auch die scrollEventThrottle={30} Requisite auf der Scrollview gesetzt, so dass ich das Ereignis regelmäßig als der Benutzer scrollt.

Das Problem scheint zu sein, dass der BlurRadius aber nach einer erheblichen Verzögerung aktualisiert - und nur auf den Maximalwert. Fehle ich etwas, damit das Bild bei jedem Aufruf von setState den neuen blurRadius anwendet?

Könnte es sein, dass das Bild einfach zu groß ist?

Answer 1

Sie können versuchen, setNativeProps anstelle von setState zu verwenden, um zu sehen, ob die Leistung verbessert wird. Sie müssen nur Ihre Image eine ref geben.

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

Die Reduzierung der Bildgröße würde auch helfen, da nicht so viele Pixel verwischt werden müssten.

Answer 2

Sie sollten setState nicht verwenden, um irgendetwas als Antwort auf onScroll einzustellen, da dies zu schlechter Leistung führt. Der Grund dafür ist, dass die gesamte Ansicht für jeden Aufruf von setState neu gerendert wird, was zu "View Thrashing" führt.

Stattdessen sollten Sie die Animated API verwenden, da dies die Animation in den nativen UI-Thread "deklariert" und somit Wiederholungen vermeidet.

Brent Vatne (von der Expo-Team) sowie ein konkretes Beispiel für Animationen als Antwort auf onScroll Ereignisse eine große Erklärung Trick gibt in ScrollViewhere

Hoffe, es hilft jemand :-)