Question

如何实现Animated.diffClamp的任何代码示例？

我正在尝试创建一个标题滚动动画，就像谷歌播放应用中的一个。当你开始向下滚动时我已经隐藏了标题，但问题是我想在你开始向上滚动时再次显示标题，它只在你到达视图顶部时显示。

class Services extends Component {
  constructor(props){
  super(props);
  this.state = {
    scrollY : new Animated.Value(0),
  }
}

renderScrollViewContent(){
  return (
    <View style={styles.scrollViewContent}>
    </View>
  )
}

render() {
  const headerHeight = this.state.scrollY.interpolate({
    inputRange: [0, 60],
    outputRange: [0, -60],
    extrapolate: 'clamp'
  });

  return (
    <View style={styles.container}>
      <ScrollView style={styles.container}
        scrollEventThrottle={16}
        onScroll={Animated.event(
          [{nativeEvent: {contentOffset: {y: this.state.scrollY}}}]
        )}
      >
        {this.renderScrollViewContent()}
      </ScrollView>
      <Animated.View style={[styles.header, {top: headerHeight}]}>
        <View style={styles.bar}>
          <Text style={styles.title}>Title</Text>
        </View>
      </Animated.View>
    </View>
  );
 }
}

Answer 1

我们为此用例添加了这个。这是文档页面https://facebook.github.io/react-native/docs/animated.html#diffclamp

我还建议将它与translate转换一起使用（更好的perf，可以与本机驱动程序一起使用）。这是使用它的示例渲染：

const headerTranslate = Animated.diffClamp(this.state.scrollY, 0, 60)
  .interpolate({
    inputRange: [0, 1],
    outputRange: [0, -1],
  });

return (
 <View style={styles.container}>
   <ScrollView style={styles.container}
     scrollEventThrottle={16}
     onScroll={Animated.event(
       [{nativeEvent: {contentOffset: {y: this.state.scrollY}}}]
     )}
   >
     {this.renderScrollViewContent()}
   </ScrollView>
   <Animated.View style={[styles.header, {transform: [{translateY: headerTranslate}]}]}>
     <View style={styles.bar}>
       <Text style={styles.title}>Title</Text>
     </View>
   </Animated.View>
 </View>
);

它是如何工作的我们将滚动位置传递给diffClamp，因此在我们使用插值使值为负值（我们希望它转换为）之后，它被钳制在0到60之间。

Answer 2

这里是一个示例，只有在用户滚动到最小的Y位置并通过夹紧解决过滚动/弹跳问题后，标题才从顶部出现。

const minScroll = 100;

const clampedScrollY = scrollY.interpolate({
  inputRange: [minScroll, minScroll + 1],
  outputRange: [0, 1],
  extrapolateLeft: 'clamp',
});

const minusScrollY = Animated.multiply(clampedScrollY, -1);

const translateY = Animated.diffClamp(
  minusScrollY,
  -AnimatedHeaderHeight,
  0,
);

const opacity = translateY.interpolate({
  inputRange: [-AnimatedHeaderHeight, 0],
  outputRange: [0.4, 1],
  extrapolate: 'clamp',
});

更多详细信息：https://stackoverflow.com/a/51638296/82609

如何使用Animated.diffClamp反应原生

2 个答案: