基于视图在滚动视图中的位置动画不透明度答案

【问题标题】：Animate opacity based on view's position in scrollview基于视图在滚动视图中的位置动画不透明度
【发布时间】：2015-10-28 00:40:33
【问题描述】：

我正在使用react-native-swiper 组件来允许用户在不同的列表视图之间水平滑动。我想为这些列表视图的不透明度设置动画，以便它们在屏幕居中时处于完全不透明状态，并在向左或向右滑动时淡出。我尝试使用父滚动视图（swiper 组件）的 onScroll 事件，然后在 listview 组件上使用 RCTUIManager 来获取它们在屏幕上的当前位置：

var handle = React.findNodeHandle(this.refs['list']);
RCTUIManager.measure(handle, (x, y, width, height, pageX, pageY)

但是生成的动画真的很不稳定，我猜这是因为它使用 onScroll 事件来更新不透明度值。

实现这一目标的最佳方法是什么？

【问题讨论】：

您找到高效的解决方案了吗？我想使用 ScrollView 或 ListView 做类似的事情来动画进入/离开视口的项目的不透明度。

标签： react-native

【解决方案1】：

可能不再相关，因为这是一个老问题，但现在您可以在 scrollView 上使用 useNativeDriver: true 并根据滚动事件以良好的性能为不透明度设置动画。

this blog post explains it really well

【讨论】：

【解决方案2】：

如果您使用 facebook 构建的 Navigator 组件而不是 swiper，您可以配置淡入淡出的场景配置，并符合您的预期。

不确定手势的支持程度，但导航器支持。

http://facebook.github.io/react-native/docs/navigator.html

请避免使用 NavigatorIOS，因为它完全不受 facebook 支持，而且似乎有很多错误！

【讨论】：