React native - 为图像的 blurRadius 设置动画答案

【问题标题】：React native - animating the blurRadius of an ImageReact native - 为图像的 blurRadius 设置动画
【发布时间】：2017-11-27 19:42:19
【问题描述】：

我的一个视图顶部有一个“封面”图像，当您将其滚动到视图之外时，我希望能够将其模糊化，作为一种很酷的效果。

我的状态包含一个blurRadius 属性，我将其绑定到我的<Image> 组件上的blurRadius={this.state.blurRadius} 属性。

我有一个<ScrollView>，当它与onScroll 一起滚动时，我正在监视它，我在这里调用setState({blurRadius: value}) - value 是您滚动视图的距离。

我还在滚动视图上设置了scrollEventThrottle={30} 属性，以便在用户滚动时定期接收事件。

问题似乎是 blurRadius 更新但在显着延迟之后 - 并且仅达到最大值。为了让图像在每次调用setState 时应用新的 blurRadius，我是否遗漏了什么？

会不会是图片太大了？

【问题讨论】：

【解决方案1】：

您不应使用setState 将任何内容设置为对 onScroll 的响应，因为这会导致性能下降。原因是每次调用 setState 都会重新渲染整个视图，这会导致“视图抖动”。

相反，您应该使用Animated API，因为这会将动画“声明”到本机 UI 线程，从而避免重新渲染。

Brent Vatne（来自 Expo 团队）对 Animated 进行了很好的解释，并提供了一个具体的动画示例作为对 ScrollViewhereonScroll 事件的回应

希望它可以帮助某人:-)

【讨论】：

【解决方案2】：

您可以尝试使用setNativeProps 代替setState 来查看性能是否有所提高。你只需要给你的Image 一个ref。

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

减小图像大小也会有所帮助，因为它不需要模糊尽可能多的像素。

【讨论】：